/* QB BrandOS — Design tokens (v3.2 canonical)
   Last updated: 2026-05-14
   Spec reference: CHAPTER_01_SPEC.md §12 (design system rules)

   This file is the single source of truth for v3.2 design tokens.
   It is imported by every Chapter 1 page built in steps 9 onward.

   The :root block below is extracted verbatim from the canonical
   inline :root block in ecosystem.html (lines 343–415). Existing
   locked pages (index.html, ecosystem.html, signal-scan.html) keep
   their inline :root and are NOT changed in step 8. Future
   migration to importing this file is lazy.

   A small group of derived tokens at the bottom (shadow-hard-*,
   radius-*, duration-pill, ease-pill alias) does not exist in the
   inline :root but is needed by spec section 12. Each derived token
   is annotated with the inline rule it summarizes.
*/

:root {
  /* ── Surface ─────────────────────────────────────────────── */
  --cream:       #FBF5E6;
  --cream-card:  #F2EBD3;
  --cream-warm:  #ECDDB8;
  --cream-edge:  #DBD4C0;
  --cream-rose:  #F4D9DD;
  --white:       #FFFEF8;

  /* ── Ink ─────────────────────────────────────────────────── */
  --ink:         #2D1521;
  --ink-75:      rgba(45, 21, 33, 0.75);
  --ink-50:      rgba(45, 21, 33, 0.50);
  --ink-33:      rgba(45, 21, 33, 0.33);
  --ink-25:      rgba(45, 21, 33, 0.25);

  /* ── Brand triad ─────────────────────────────────────────── */
  --gold:        #E0B069;
  --rose:        #CA6180;
  --teal:        #9ED3DC;

  /* ── Depth ───────────────────────────────────────────────── */
  --rose-deep:   #8E3F58;
  --teal-deep:   #5BA8B5;
  --gold-deep:   #B58840;
  --aubergine:   #4A2B3A;

  /* ── Decoration ──────────────────────────────────────────── */
  --pink:        #FCB7C7;
  --butter:      #FEFD99;
  --teal-soft:   #C5E5E9;
  --rose-soft:   #ECC4D0;

  /* ── Phase colors (six) ──────────────────────────────────── */
  --phase-acquisition:  #C5E5E9;
  --phase-discovery:    #9CC4A2;
  --phase-creation:     #B5C8E5;
  --phase-content:      #FCB7C7;
  --phase-execution:    #E89380;
  --phase-intelligence: #B080A0;

  /* ── Illustration palette ────────────────────────────────── */
  --illus-forest:     #5B7E6A;
  --illus-peach:      #E89380;
  --illus-coral:      #DC6B52;
  --illus-mustard:    #D4B85A;
  --illus-rust:       #B8704D;
  --illus-lavender:   #B8A0C7;
  --illus-pink-soft:  #F4C4D0;

  /* ── System ──────────────────────────────────────────────── */
  --scrim:     rgba(251, 245, 230, 0.90);
  --skeleton:  rgba(224, 176, 105, 0.33);

  /* ── Type scale (fluid clamp, Utopia.fyi-style) ──────────── */
  --step--2: clamp(0.7813rem, 0.7546rem + 0.1254vw, 0.88rem);
  --step--1: clamp(0.9375rem, 0.8937rem + 0.2063vw, 1.1rem);
  --step-0:  clamp(1.125rem,  1.0575rem + 0.3175vw, 1.375rem);
  --step-1:  clamp(1.35rem,   1.2505rem + 0.4683vw, 1.7188rem);
  --step-2:  clamp(1.62rem,   1.4773rem + 0.6714vw, 2.1488rem);
  --step-3:  clamp(1.9438rem, 1.7436rem + 0.9421vw, 2.6856rem);
  --step-4:  clamp(2.3325rem, 2.0561rem + 1.3008vw, 3.3569rem);
  --step-5:  clamp(2.7994rem, 2.4224rem + 1.7738vw, 4.1963rem);
  --step-6:  clamp(3.3594rem, 2.8506rem + 2.3944vw, 5.245rem);
  --step-7:  clamp(4.0313rem, 3.3499rem + 3.2063vw, 6.5563rem);

  /* ── Space scale (fluid clamp) ───────────────────────────── */
  --space-3xs:    clamp(0.5625rem, 0.5288rem + 0.1587vw, 0.6875rem);
  --space-2xs:    clamp(0.5625rem, 0.5288rem + 0.1587vw, 0.6875rem);
  --space-xs:     clamp(0.875rem,  0.8244rem + 0.2381vw, 1.0625rem);
  --space-s:      clamp(1.125rem,  1.0575rem + 0.3175vw, 1.375rem);
  --space-m:      clamp(1.6875rem, 1.5863rem + 0.4762vw, 2.0625rem);
  --space-l:      clamp(2.25rem,   2.1151rem + 0.6349vw, 2.75rem);
  --space-xl:     clamp(3.375rem,  3.1726rem + 0.9524vw, 4.125rem);
  --space-2xl:    clamp(4.5rem,    4.2302rem + 1.2698vw, 5.5rem);
  --space-3xl:    clamp(6.75rem,   6.3452rem + 1.9048vw, 8.25rem);

  /* Pair spacings (small→larger steps) */
  --space-3xs-2xs:clamp(0.5625rem, 0.5288rem + 0.1587vw, 0.6875rem);
  --space-xs-s:   clamp(0.875rem,  0.7401rem + 0.6349vw, 1.375rem);
  --space-s-m:    clamp(1.125rem,  0.872rem  + 1.1905vw, 2.0625rem);
  --space-m-l:    clamp(1.6875rem, 1.4008rem + 1.3492vw, 2.75rem);
  --space-l-xl:   clamp(2.25rem,   1.744rem  + 2.381vw,  4.125rem);
  --space-xl-2xl: clamp(3.375rem,  2.8016rem + 2.6984vw, 5.5rem);
  --space-2xl-3xl:clamp(4.5rem,    3.4881rem + 4.7619vw, 8.25rem);

  /* ── Easing ──────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4,   0,     0.2,   1);
  --ease-qb:       cubic-bezier(0.19,  1,     0.22,  1);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32,  1.275);
  --ease-sharp:    cubic-bezier(0.55,  0.085, 0.68,  0.53);
  --ease-glow:     cubic-bezier(0.455, 0.03,  0.515, 0.955);

  /* Scrollbar */
  --qb-scrollbar-w: 10px;
  --qb-scrollbar-r: 20px;

  /* ── Derived tokens ──────────────────────────────────────────
     The names below are added by Chapter 1 to give spec section 12
     a vocabulary. Values mirror the inline rules in ecosystem.html.
  */

  /* Hard offset shadow signature. Inline form: `box-shadow: 0 9px var(--ink)`
     on mobile, `0 16px var(--ink)` ≥640px. New code can use the named
     tokens; viewport rule lives in qb-components.css. */
  --shadow-hard-mobile:  0 9px  var(--ink);
  --shadow-hard-desktop: 0 16px var(--ink);
  --shadow-hard:         var(--shadow-hard-mobile);

  /* Geometry. Inline forms: cards use `border-radius:32px`, illus cards
     use 32px, secondary cards use 24px, pills use 9999px, boxes use 8px,
     borders use 2px. */
  --radius-card:    32px;
  --radius-raised:  24px;
  --radius-pill:    9999px;
  --radius-box:     8px;
  --radius-circle:  50%;
  --border-default: 2px;
  --border-bubble:  1.5px;

  /* Motion. Inline form: `transition: ... 0.4s var(--ease-qb)`.
     `--ease-pill` is an alias to `--ease-qb` so spec section 12 reads
     cleanly. */
  --duration-pill: 0.4s;
  --ease-pill:     var(--ease-qb);

  /* Typography stack. Inline forms in locked files set families
     directly; named here so step-9+ pages can reference. */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

@media (min-width: 640px) {
  :root {
    --shadow-hard: var(--shadow-hard-desktop);
  }
}

/* prefers-reduced-motion: collapse the pill duration. Components that
   use `--duration-pill` will naturally drop to instant. Components
   that rely on transform animations should also include a media query
   in qb-components.css to swap to opacity-only. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-pill: 0s;
  }
}

/* Manual reduced-motion class for the gallery harness toggle. */
.qb-reduced-motion :root,
.qb-reduced-motion {
  --duration-pill: 0s;
}