/* ==========================================================================
   STORE DESIGN TOKENS
   Every dimension in this system comes from the Fibonacci sequence:
   1 · 2 · 3 · 5 · 8 · 13 · 21 · 34 · 55 · 89 · 144 · 233 · 377 · 610 · 987 · 1597
   Ratios between adjacent steps approach φ (1.618), which is what makes the
   layout feel "settled". If you need a size that isn't here, use the nearest
   step — don't invent one.
   ========================================================================== */

:root {
  /* ── Fibonacci scale (raw) ───────────────────────────────────────────── */
  --f1: 1px;   --f2: 2px;   --f3: 3px;   --f5: 5px;   --f8: 8px;
  --f13: 13px; --f21: 21px; --f34: 34px; --f55: 55px; --f89: 89px;
  --f144: 144px; --f233: 233px; --f377: 377px; --f610: 610px;
  --f987: 987px; --f1597: 1597px;

  /* ── Spacing (semantic aliases) ──────────────────────────────────────── */
  --space-3xs: var(--f3);
  --space-2xs: var(--f5);
  --space-xs:  var(--f8);
  --space-sm:  var(--f13);
  --space-md:  var(--f21);
  --space-lg:  var(--f34);
  --space-xl:  var(--f55);
  --space-2xl: var(--f89);
  --space-3xl: var(--f144);

  /* ── Color: core ─────────────────────────────────────────────────────
     High-contrast, fully opaque. No transparency on brand surfaces.
     Each swatch lists the ONLY text color allowed on top of it (WCAG AA+). */
  --ink:      #111014;  /* text, borders, hard shadows      | on: paper 17.9:1 */
  --paper:    #FFF8EC;  /* page background (warm off-white) | on: ink   17.9:1 */
  --concrete: #E9E2D4;  /* secondary surface, wells, inputs | on: ink   14.7:1 */
  --ash:      #5E5A66;  /* muted text on paper only         | on: paper  6.3:1 */

  /* ── Color: brand ──────────────────────────────────────────────────── */
  --volt:   #D4FF3A;    /* PRIMARY brand / highlight        | on: ink 16.4:1 */
  --heat:   #FF4F1F;    /* buy buttons, sale, urgency       | on: ink  5.8:1 */
  --cobalt: #2B3DFF;    /* links, focus, info               | on: paper 6.2:1 */

  /* ── Color: accents (categories + states) ──────────────────────────── */
  --mint:   #3DFFB8;    /* Men category, in stock           | on: ink 14.6:1 */
  --grape:  #7A2BFF;    /* Women category, featured         | on: paper 5.5:1 */
  --sun:    #FFC21A;    /* Kids category                    | on: ink 11.7:1 */
  --bubble: #FF8AD8;    /* deals, savings                   | on: ink 8.9:1 */

  /* Category mapping — deliberately non-traditional (no blue/pink split).
     Change here, every page follows. Text color for each lives beside it. */
  --cat-men:    var(--mint);   --cat-men-text:    var(--ink);
  --cat-women:  var(--grape);  --cat-women-text:  var(--paper);
  --cat-kids:   var(--sun);    --cat-kids-text:   var(--ink);
  --cat-unisex: var(--volt);   --cat-unisex-text: var(--ink);

  /* ── Semantic color roles ──────────────────────────────────────────── */
  --bg:            var(--paper);
  --surface:       #FFFFFF;
  --surface-alt:   var(--concrete);
  --text:          var(--ink);
  --text-muted:    var(--ash);
  --border:        var(--ink);
  --link:          var(--cobalt);
  --focus:         var(--cobalt);
  --cta-bg:        var(--heat);
  --cta-text:      var(--ink);
  --brand-bg:      var(--volt);
  --brand-text:    var(--ink);

  /* ── Typography ──────────────────────────────────────────────────────
     Heading sizes are Fibonacci steps. Body is 16px — the one deliberate
     exception (it sits at φ between 13 and 21, and anything smaller makes
     iOS zoom into form inputs). */
  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --fs-micro: 13px;     /* badges, labels, SKU/size tags */
  --fs-body:  16px;     /* paragraph text, inputs */
  --fs-lead:  21px;     /* product titles in cards, lead paragraphs */
  --fs-h3:    34px;     /* section headings */
  --fs-h2:    55px;     /* page headings */
  --fs-h1:    89px;     /* hero display */
  --fs-mega:  144px;    /* landing hero word, desktop only */

  --lh-tight: 1.0;
  --lh-snug:  1.2;
  --lh-body:  1.618;    /* φ */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --border-thin:  var(--f2);
  --border-thick: var(--f3);

  --radius-xs:   var(--f3);
  --radius-sm:   var(--f5);
  --radius-md:   var(--f8);
  --radius-lg:   var(--f13);
  --radius-xl:   var(--f21);
  --radius-pill: 987px;

  /* Hard offset shadows: opaque ink, zero blur. The "sticker" look. */
  --shadow-sm: var(--f3) var(--f3) 0 0 var(--ink);
  --shadow-md: var(--f5) var(--f5) 0 0 var(--ink);
  --shadow-lg: var(--f8) var(--f8) 0 0 var(--ink);
  --shadow-xl: var(--f13) var(--f13) 0 0 var(--ink);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --header-h:      var(--f89);
  --flyout-w:      var(--f377);
  --container-max: var(--f1597);
  --reading-max:   var(--f610);
  --card-min:      var(--f233);   /* product grid min column width */
  --golden-major:  61.8%;         /* product page: gallery */
  --golden-minor:  38.2%;         /* product page: buy box */

  /* Breakpoints (reference only — CSS vars can't be used in @media):
     xs 377 · sm 610 · md 987 · lg 1597 */

  /* ── Motion (durations in Fibonacci ms) ─────────────────────────────── */
  --dur-fast:  144ms;
  --dur-base:  233ms;
  --dur-slow:  377ms;
  --dur-slower: 610ms;
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* overshoot — flyout, hover pops */

  /* ── Z-index ─────────────────────────────────────────────────────────── */
  --z-header:  34;
  --z-scrim:   55;
  --z-flyout:  89;
  --z-toast:   144;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms;
  }
}