/* ===========================================================================
   tokens.css — the single source of visual truth for DSTNC.
   Change a value here and it ripples through the whole site.
   Default theme: dark cosmic. A light/warm theme is stubbed at the bottom.
   =========================================================================== */

:root {
  /* ---- Palette: dark cosmic ------------------------------------------- */
  --color-bg:          #0B0B0D;  /* near-black base            */
  --color-surface:     #141417;  /* cards, raised surfaces     */
  --color-surface-2:   #1B1B20;  /* inputs, hover surfaces     */
  --color-surface-3:   #232329;  /* pressed / active           */

  --color-ink:         #F5F5F2;  /* off-white primary text     */
  --color-muted:       #A2A29B;  /* secondary text             */
  --color-faint:       #6E6E69;  /* tertiary / hints           */

  --color-line:        rgba(245, 245, 242, 0.10); /* hairline rules     */
  --color-line-strong: rgba(245, 245, 242, 0.20);

  --color-accent:      #B9A47A;  /* olive/khaki-gold from the DSTNC logo */
  --color-accent-soft: #cbb893;
  --color-accent-ink:  #0B0B0D;  /* text on the accent         */

  --color-cosmic:      #2E4A8A;  /* deep cosmic blue — sparingly */
  --color-cosmic-deep: #16223F;
  --color-cosmic-glow: rgba(46, 74, 138, 0.35);

  --color-success:     #6FCB97;
  --color-danger:      #E0857A;

  /* Semantic aliases */
  --bg: var(--color-bg);
  --ink: var(--color-ink);
  --accent: var(--color-accent);

  /* ---- Typography ----------------------------------------------------- */
  --font-sans:   'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-script: 'Sacramento', 'Space Grotesk', cursive; /* chapter theme words only */

  /* Fluid type scale (mobile → desktop via clamp) */
  --fs-2xs: 0.6875rem;                         /* 11px — overline labels   */
  --fs-xs:  0.75rem;                           /* 12px                     */
  --fs-sm:  0.8125rem;                         /* 13px                     */
  --fs-base: 0.9375rem;                        /* 15px — body              */
  --fs-md:  1.0625rem;                         /* 17px                     */
  --fs-lg:  clamp(1.25rem, 1rem + 1.1vw, 1.6rem);
  --fs-xl:  clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
  --fs-2xl: clamp(2.4rem, 1.4rem + 4.6vw, 4.4rem);
  --fs-3xl: clamp(3rem, 1.4rem + 7vw, 6.5rem);
  --fs-script: clamp(2.6rem, 1.4rem + 6vw, 6rem);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  --tracking-wide:  0.14em;   /* nav / overline labels */
  --tracking-wider: 0.22em;
  --tracking-tight: -0.02em;  /* large display         */

  --weight-light: 300;
  --weight-reg:   400;
  --weight-med:   500;
  --weight-bold:  700;

  /* ---- Spacing scale (8pt-ish) --------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout --------------------------------------------------------- */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);

  /* ---- Radius / borders ---------------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);

  /* ---- Shadows / elevation ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 12px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.85);

  /* ---- Motion (subtle only) ------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* ---- Product image aspect (consistent 4:5 portrait) ----------------- */
  --ratio-product: 4 / 5;

  /* ---- z-index ladder ------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 210;
  --z-toast: 300;
}

/* Optional light / warm direction — set <html data-theme="light"> to use it.
   Bone background per the brief; the rest of the system inherits these tokens. */
:root[data-theme='light'] {
  --color-bg:        #F3EFE7;
  --color-surface:   #FBF8F2;
  --color-surface-2: #EFE9DD;
  --color-surface-3: #E5DCCB;
  --color-ink:       #1B1A17;
  --color-muted:     #5C584F;
  --color-faint:     #8A8579;
  --color-line:        rgba(27, 26, 23, 0.12);
  --color-line-strong: rgba(27, 26, 23, 0.22);
  --color-accent:      #8A744A;
  --color-accent-ink:  #FBF8F2;
  --shadow:    0 12px 30px -16px rgba(40, 34, 22, 0.35);
  --shadow-lg: 0 30px 70px -28px rgba(40, 34, 22, 0.4);
}

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