/**
 * samples-shop.com storefront theme tokens.
 *
 * Approved base palette: Soft Mist.
 * Components must use semantic tokens from this file instead of hard-coded colors.
 * To change the storefront palette later, update this file first.
 */

:root {
  color-scheme: light;

  /* Raw Soft Mist palette */
  --ss-raw-gray-0: #ffffff;
  --ss-raw-gray-25: #fbfcfd;
  --ss-raw-gray-50: #f5f7f9;
  --ss-raw-gray-75: #eef2f5;
  --ss-raw-gray-100: #e9edf1;
  --ss-raw-gray-150: #d9dfe5;
  --ss-raw-gray-200: #cfd6dd;
  --ss-raw-gray-300: #aab4bf;
  --ss-raw-gray-500: #66717f;
  --ss-raw-gray-700: #3f4a57;
  --ss-raw-gray-800: #283442;
  --ss-raw-gray-900: #141922;
  --ss-raw-red-600: #a14c42;
  --ss-raw-green-600: #55735e;

  /* Semantic color tokens */
  --ss-color-page-bg: var(--ss-raw-gray-50);
  --ss-color-page-bg-accent: var(--ss-raw-gray-75);
  --ss-color-surface: var(--ss-raw-gray-0);
  --ss-color-surface-muted: var(--ss-raw-gray-75);
  --ss-color-surface-raised: var(--ss-raw-gray-0);
  --ss-color-surface-inset: var(--ss-raw-gray-25);
  --ss-color-text: var(--ss-raw-gray-900);
  --ss-color-text-muted: var(--ss-raw-gray-500);
  --ss-color-text-subtle: var(--ss-raw-gray-700);
  --ss-color-border: rgba(38, 52, 69, 0.13);
  --ss-color-border-strong: var(--ss-raw-gray-200);
  --ss-color-action: var(--ss-raw-gray-800);
  --ss-color-action-hover: #1f2a36;
  --ss-color-action-active: #111827;
  --ss-color-action-text: #ffffff;
  --ss-color-link: var(--ss-raw-gray-800);
  --ss-color-link-hover: var(--ss-raw-gray-900);
  --ss-color-sale: var(--ss-raw-red-600);
  --ss-color-success: var(--ss-raw-green-600);
  --ss-color-warning: #9a6a24;
  --ss-color-focus: rgba(40, 52, 66, 0.28);
  --ss-color-product-placeholder: var(--ss-raw-gray-100);
  --ss-color-product-placeholder-2: var(--ss-raw-gray-150);
  --ss-color-overlay: rgba(20, 25, 34, 0.58);

  /* Typography */
  --ss-font-family: Inter, Arial, Helvetica, sans-serif;
  --ss-font-size-xs: 12px;
  --ss-font-size-sm: 13px;
  --ss-font-size-md: 15px;
  --ss-font-size-lg: 17px;
  --ss-font-size-xl: 22px;
  --ss-font-size-2xl: 30px;
  --ss-font-size-3xl: 42px;
  --ss-line-height-tight: 1.12;
  --ss-line-height-base: 1.5;
  --ss-line-height-relaxed: 1.65;
  --ss-letter-tight: -0.03em;

  /* Layout */
  --ss-content-max: 1440px;
  --ss-content-wide-max: 1680px;
  --ss-page-gutter: 32px;
  --ss-section-gap: 28px;
  --ss-column-gap: 20px;
  --ss-header-height: 72px;
  --ss-filter-width: 260px;
  --ss-discovery-width: 280px;
  --ss-buy-box-width: 292px;
  --ss-product-media-width: 360px;

  /* Spacing */
  --ss-space-1: 4px;
  --ss-space-2: 8px;
  --ss-space-3: 12px;
  --ss-space-4: 16px;
  --ss-space-5: 20px;
  --ss-space-6: 24px;
  --ss-space-8: 32px;
  --ss-space-10: 40px;
  --ss-space-12: 48px;

  /* Radius */
  --ss-radius-xs: 6px;
  --ss-radius-sm: 10px;
  --ss-radius-md: 14px;
  --ss-radius-lg: 20px;
  --ss-radius-xl: 28px;
  --ss-radius-pill: 999px;

  /* Shadows */
  --ss-shadow-sm: 0 8px 24px rgba(38, 52, 69, 0.07);
  --ss-shadow-md: 0 18px 44px rgba(38, 52, 69, 0.09);
  --ss-shadow-lg: 0 22px 54px rgba(38, 52, 69, 0.1);
  --ss-shadow-focus: 0 0 0 3px var(--ss-color-focus);

  /* Components */
  --ss-control-height-sm: 34px;
  --ss-control-height-md: 42px;
  --ss-control-height-lg: 50px;
  --ss-card-image-ratio: 1 / 1;
  --ss-card-min-width: 0;
  --ss-transition-fast: 140ms ease;

  /* Breakpoints, documented for JS/PHP decisions too */
  --ss-bp-min-desktop: 1280px;
  --ss-bp-laptop: 1366px;
  --ss-bp-standard: 1440px;
  --ss-bp-mid: 1536px;
  --ss-bp-wide: 1920px;
}

/* Optional future palette override example:
[data-theme="original-gray"] {
  --ss-color-page-bg: #f3f4f6;
  --ss-color-surface-muted: #f9fafb;
  --ss-color-action: #1f2937;
}
*/