/* ============================================================
   SAINT BONES — CANONICAL DESIGN TOKENS
   Layer 1: primitives  ·  Layer 2: semantics
   Derived by measurement from the approved Desktop + Mobile
   design artifacts. Do not add values here without governance.
   ============================================================ */

:root {
  /* ---------- PRIMITIVE · COLOR ---------------------------- */
  /* Ink (dark) ramp */
  --sb-ink-950: #0A0A0B;   /* Vienna Black — dark page ground */
  --sb-ink-900: #101012;   /* dark media plate */
  --sb-ink-880: #141416;   /* dark inset plate (charms, thumbs) */
  --sb-ink-850: #1A1A1D;   /* Graphite — reserved elevation */
  --sb-ink-800: #151517;   /* primary text on light */
  --sb-ink-700: #31302D;   /* solid-button hover on light */

  /* Bone (light) ramp */
  --sb-bone-050: #F3F0E9;  /* Bone — light page ground */
  --sb-bone-100: #F1EFEA;  /* body text on dark */
  --sb-bone-150: #EAE6DC;  /* light media plate */
  --sb-bone-200: #E2DDD1;  /* light hairline, low emphasis */
  --sb-bone-300: #D9D4C8;  /* light hairline, standard */
  --sb-bone-400: #C8C2B4;  /* light control border */

  /* Stone (neutral) ramp */
  --sb-stone-200: #D8D4CB; /* muted text on dark */
  --sb-stone-300: #CFCABF; /* body text on dark */
  --sb-stone-400: #A39D92; /* Warm Stone — muted on dark */
  --sb-stone-500: #9A948A; /* label on dark */
  --sb-stone-550: #8A8578; /* Warm Stone dark variant */
  --sb-stone-600: #8B857A; /* muted text, both grounds */
  --sb-stone-700: #7E7A72; /* disabled / unavailable on dark */
  --sb-stone-750: #5C5952; /* muted text on light */
  --sb-stone-800: #4E4B45; /* secondary text on light */
  --sb-stone-850: #3C3A36; /* long-form body on light */

  /* Metal (accent) ramp — accent only, never a surface */
  --sb-metal-300: #D6CDB9; /* eyebrow over imagery */
  --sb-metal-350: #E4DBC7; /* hero eyebrow over imagery */
  --sb-metal-400: #BEB5A5; /* Champagne Steel — canonical accent */
  --sb-metal-500: #C8BBA4; /* Champagne Steel warm variant */

  /* Signal — the single non-palette hue, validation only */
  --sb-signal-error: #8A3A2E;
  --sb-signal-error-on-dark: #C87F6A;

  /* Hairline / scrim alphas (channel triplets kept literal) */
  --sb-alpha-line-dark: 241, 239, 234;  /* Bone on dark */
  --sb-alpha-line-light: 21, 21, 23;    /* Ink on light */
  --sb-alpha-scrim: 10, 10, 11;         /* Vienna Black scrim */

  /* ---------- PRIMITIVE · SPACE ---------------------------- */
  /* 2px base unit; the measured recurring ladder. */
  --sb-space-1: 2px;
  --sb-space-2: 4px;
  --sb-space-3: 6px;
  --sb-space-4: 8px;
  --sb-space-5: 10px;
  --sb-space-6: 12px;
  --sb-space-7: 14px;
  --sb-space-8: 16px;
  --sb-space-9: 18px;
  --sb-space-10: 20px;
  --sb-space-11: 22px;
  --sb-space-12: 24px;
  --sb-space-13: 26px;
  --sb-space-14: 30px;
  --sb-space-16: 32px;
  --sb-space-18: 36px;
  --sb-space-20: 40px;
  --sb-space-22: 44px;
  --sb-space-24: 48px;
  --sb-space-28: 56px;
  --sb-space-32: 64px;
  --sb-space-36: 72px;
  --sb-space-40: 80px;
  --sb-space-44: 88px;
  --sb-space-48: 96px;
  --sb-space-52: 104px;
  --sb-space-56: 112px;
  --sb-space-60: 120px;

  /* ---------- PRIMITIVE · TYPE ---------------------------- */
  --sb-family-sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sb-family-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --sb-weight-light: 300;
  --sb-weight-regular: 400;
  --sb-weight-medium: 500;

  --sb-width-condensed: 96%;
  --sb-width-narrow: 98%;
  --sb-width-normal: 100%;
  --sb-width-wide: 104%;
  --sb-width-wider: 112%;

  --sb-fs-9: 9px;
  --sb-fs-10: 10px;
  --sb-fs-11: 11px;
  --sb-fs-12: 12px;
  --sb-fs-13: 13px;
  --sb-fs-14: 14px;
  --sb-fs-15: 15px;
  --sb-fs-16: 16px;
  --sb-fs-17: 17px;
  --sb-fs-19: 19px;
  --sb-fs-20: 20px;
  --sb-fs-22: 22px;
  --sb-fs-26: 26px;
  --sb-fs-30: 30px;
  --sb-fs-34: 34px;
  --sb-fs-40: 40px;
  --sb-fs-52: 52px;
  --sb-fs-66: 66px;
  --sb-fs-76: 76px;

  --sb-lh-hero: 0.9;
  --sb-lh-display: 1;
  --sb-lh-tight: 1.05;
  --sb-lh-heading: 1.1;
  --sb-lh-snug: 1.35;
  --sb-lh-normal: 1.5;
  --sb-lh-body: 1.6;
  --sb-lh-relaxed: 1.75;
  --sb-lh-long: 1.85;

  --sb-ls-hero: -0.045em;
  --sb-ls-display: -0.035em;
  --sb-ls-heading: -0.03em;
  --sb-ls-tight: -0.022em;
  --sb-ls-serif: -0.01em;
  --sb-ls-normal: 0;
  --sb-ls-ui: 0.12em;
  --sb-ls-nav: 0.16em;
  --sb-ls-control: 0.2em;
  --sb-ls-eyebrow: 0.24em;
  --sb-ls-label: 0.26em;
  --sb-ls-overline: 0.3em;
  --sb-ls-wordmark: 0.34em;

  /* ---------- CLOSED TYPE SCALE (exact, no ranges) --------- */
  /* Desktop styles are single fluid clamps. Mobile heroes are separately
     authored at 390px and therefore have their own named variants —
     they are not the low end of a desktop clamp. */
  --sb-type-hero: clamp(30px, 4.4vw, 72px);
  --sb-type-hero-mobile-statement: 76px;  /* one-word statement (STAY) */
  --sb-type-hero-mobile-single: 66px;     /* one-word page title (EYEWEAR) */
  --sb-type-hero-mobile-page: 52px;       /* standard mobile page hero */
  --sb-type-display: clamp(30px, 3.6vw, 56px);
  --sb-type-display-mobile: 38px;
  --sb-type-h1: clamp(30px, 3.4vw, 52px);
  --sb-type-h1-mobile: 32px;
  --sb-type-h2: clamp(24px, 2.6vw, 38px);
  --sb-type-h2-mobile: 26px;
  --sb-type-h3: clamp(20px, 2vw, 28px);
  --sb-type-h3-mobile: 21px;
  --sb-type-h4: clamp(17px, 1.5vw, 22px);
  --sb-type-h4-mobile: 17px;
  --sb-type-editorial: clamp(24px, 2.6vw, 38px);
  --sb-type-editorial-mobile: 34px;
  --sb-type-product-name: clamp(15px, 1.2vw, 19px);
  --sb-type-product-name-mobile: 14px;   /* grid card */
  --sb-type-product-name-list: 17px;     /* list row / look card */
  --sb-type-nav: 12px;                   /* desktop header */
  --sb-type-nav-mobile: 10px;            /* mobile header + rails */
  --sb-type-nav-drawer: 11px;            /* drawer + sub-bar rows */

  /* ---------- PRIMITIVE · LINE / RADIUS / LAYER ------------ */
  --sb-border-hairline: 1px;
  --sb-radius-none: 0;
  --sb-focus-ring-width: 2px;
  --sb-focus-ring-offset: 2px;

  --sb-layer-base: 0;
  --sb-layer-raised: 2;
  --sb-layer-sticky-sub: 40;
  --sb-layer-header: 50;
  --sb-layer-sticky-action: 60;
  --sb-layer-scrim: 70;
  --sb-layer-sheet: 80;
  --sb-layer-toast: 90;

  /* ---------- PRIMITIVE · MOTION -------------------------- */
  --sb-ease-standard: ease;
  --sb-ease-entrance: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sb-duration-fast: 0.25s;
  --sb-duration-standard: 0.35s;
  --sb-duration-slow: 0.7s;
  --sb-duration-cinematic: 1.1s;

  /* ---------- PRIMITIVE · BREAKPOINT ---------------------- */
  /* Three behavioural boundaries, derived by content-fit measurement.
     Navigation and layout deliberately switch at different widths. */
  --sb-bp-mobile: 390px;    /* mobile authoring reference (not a query) */
  --sb-bp-grid: 768px;      /* < 768px: 2-up · >= 768px: family column rules */
  --sb-bp-layout: 920px;    /* splits engage; purchase panel viable */
  --sb-bp-nav: 1040px;      /* desktop header fits; below it, drawer */
  --sb-bp-wide: 1500px;     /* page maximum reached */

  /* ============================================================
     SEMANTIC TOKENS — components consume these
     ============================================================ */

  /* Surfaces & ground */
  --sb-color-bg: var(--sb-bone-050);
  --sb-color-bg-inverse: var(--sb-ink-950);
  --sb-color-surface-media: var(--sb-bone-150);
  --sb-color-surface-media-inverse: var(--sb-ink-900);
  --sb-color-surface-inset-inverse: var(--sb-ink-880);

  /* Text on light ground */
  --sb-color-text: var(--sb-ink-800);
  --sb-color-text-body: var(--sb-stone-850);
  --sb-color-text-secondary: var(--sb-stone-800);
  --sb-color-text-muted: var(--sb-stone-750);
  --sb-color-text-label: var(--sb-stone-600);

  /* Text on dark ground */
  --sb-color-text-inverse: var(--sb-bone-050);
  --sb-color-text-inverse-body: var(--sb-stone-300);
  --sb-color-text-inverse-secondary: var(--sb-stone-200);
  --sb-color-text-inverse-muted: var(--sb-stone-400);
  --sb-color-text-inverse-label: var(--sb-stone-600);
  --sb-color-text-disabled-inverse: var(--sb-stone-700);

  /* Accent */
  --sb-color-accent-metal: var(--sb-metal-400);
  --sb-color-accent-metal-over-media: var(--sb-metal-300);

  /* Lines */
  --sb-color-border: var(--sb-bone-300);
  --sb-color-border-subtle: var(--sb-bone-200);
  --sb-color-border-control: var(--sb-bone-400);
  --sb-color-border-strong: var(--sb-ink-800);
  --sb-color-border-inverse: rgba(var(--sb-alpha-line-dark), 0.12);
  --sb-color-border-inverse-strong: rgba(var(--sb-alpha-line-dark), 0.16);
  --sb-color-border-inverse-control: rgba(var(--sb-alpha-line-dark), 0.28);
  --sb-color-border-inverse-cta: rgba(var(--sb-alpha-line-dark), 0.55);

  /* Scrims & overlays (image legibility ladder) */
  --sb-scrim-sheet: rgba(var(--sb-alpha-scrim), 0.72);
  --sb-scrim-header: rgba(var(--sb-alpha-scrim), 0.86);
  --sb-scrim-sticky: rgba(var(--sb-alpha-scrim), 0.95);
  --sb-overlay-hero: linear-gradient(
    180deg,
    rgba(var(--sb-alpha-scrim), 0.36) 0%,
    rgba(var(--sb-alpha-scrim), 0) 24%,
    rgba(var(--sb-alpha-scrim), 0.5) 52%,
    rgba(var(--sb-alpha-scrim), 0.88) 78%,
    rgba(var(--sb-alpha-scrim), 0.97) 100%
  );
  --sb-overlay-band: linear-gradient(
    180deg,
    rgba(var(--sb-alpha-scrim), 0.25) 0%,
    rgba(var(--sb-alpha-scrim), 0.1) 30%,
    rgba(var(--sb-alpha-scrim), 0.86) 72%,
    rgba(var(--sb-alpha-scrim), 0.96) 100%
  );

  /* States */
  --sb-color-error: var(--sb-signal-error);
  --sb-color-error-inverse: var(--sb-signal-error-on-dark);
  --sb-color-focus: var(--sb-color-accent-metal);

  /* Containers & gutters */
  --sb-container-main: 1500px;      /* canonical page maximum */
  --sb-container-full: 1680px;      /* full-bleed editorial maximum */
  --sb-measure-reading: 62ch;       /* long-form editorial */
  --sb-measure-body: 52ch;          /* section body copy */
  --sb-measure-lede: 46ch;          /* hero / intro lede */
  --sb-measure-caption: 22ch;       /* eyebrow / caption */
  --sb-panel-purchase: 560px;       /* PDP purchase panel maximum */

  --sb-page-inline: clamp(16px, 2.4vw, 40px);   /* desktop→wide gutter */
  --sb-page-inline-mobile: 18px;                /* 390px reference gutter */

  /* Grid */
  --sb-grid-gap: clamp(12px, 1.6vw, 34px);
  --sb-grid-gap-tight: clamp(12px, 1.6vw, 24px);
  --sb-grid-gap-mobile: 14px;
  --sb-grid-gap-mobile-row: 26px;
  /* Product grids are CARDINALITY-BOUND, not floor-bound. The column
     count is the approved merchandising density; the floor only decides
     when a grid steps down. Never raise a max to fill a wide viewport. */
  --sb-grid-cols-watch: 3;       /* All Watches, watch collections, search */
  --sb-grid-cols-apparel: 4;     /* Studio T-Shirts, studio search */
  --sb-grid-cols-eyewear: 3;     /* Rockstar collection, eyewear families */
  --sb-grid-cols-looks: 3;       /* Signature Looks */
  --sb-grid-cols-mobile: 2;      /* all product families below 768px */
  --sb-grid-card-min-watch: 220px;   /* step-down floor */
  --sb-grid-card-min-apparel: 200px; /* step-down floor */
  --sb-grid-min-collections: 300px;  /* collection cards, auto-fit */
  --sb-grid-min-facts: 220px;        /* service/fact rows, auto-fit */
  --sb-grid-min-footer: 180px;       /* footer groups, auto-fit */

  /* Section rhythm */
  --sb-section-y-sm: clamp(44px, 5vw, 64px);
  --sb-section-y: clamp(52px, 6vw, 88px);
  --sb-section-y-lg: clamp(64px, 7vw, 104px);
  --sb-block-y: clamp(28px, 3vw, 44px);
  --sb-section-y-mobile-sm: var(--sb-space-18);
  --sb-section-y-mobile: var(--sb-space-22);
  --sb-section-y-mobile-lg: var(--sb-space-28);

  /* Control & chrome geometry */
  --sb-header-height: clamp(56px, 6vw, 84px);
  --sb-header-height-desktop: 78px;
  --sb-header-height-mobile: 60px;
  --sb-control-height-sm: 36px;
  --sb-control-height-md: 44px;   /* minimum interactive target */
  --sb-control-height-lg: 56px;
  --sb-control-inline: var(--sb-space-7);
  --sb-cta-pad-y: var(--sb-space-9);
  --sb-sticky-action-height: 78px;
  --sb-icon-sm: 16px;
  --sb-icon-md: 24px;
  --sb-icon-lg: 44px;
  --sb-monogram: 56px;
  --sb-swatch: 11px;
  --sb-diamond: 4px;

  /* Media ratios */
  --sb-ratio-square: 1 / 1;        /* eyewear objects, watch gallery */
  --sb-ratio-product: 4 / 5;       /* watch + apparel product cards */
  --sb-ratio-portrait: 3 / 4;      /* editorial / look imagery */
  --sb-ratio-landscape: 4 / 3;     /* feature imagery */
  --sb-ratio-banner: 16 / 11;      /* hero-row product banner */

  /* Motion semantics */
  --sb-transition-control: background-color var(--sb-duration-standard) var(--sb-ease-standard),
    color var(--sb-duration-standard) var(--sb-ease-standard),
    border-color var(--sb-duration-standard) var(--sb-ease-standard);
  --sb-transition-link: opacity var(--sb-duration-standard) var(--sb-ease-standard);
  --sb-transition-media: transform var(--sb-duration-cinematic) var(--sb-ease-entrance);
  --sb-media-hover-scale: 1.035;
}