/* ─────────────────────────────────────────────
   DESIGN TOKENS — extracted from quiet-plinth
   ───────────────────────────────────────────── */
:root {
  color-scheme: light dark;
  /* ── Palette ── */
  --color-wall:       #FFFFFF;
  --color-ink:        #1A1714;
  --color-ink-soft:   #4A453F;
  --color-concrete:   #A39E95;
  --color-concrete-2: #D8D2C6;
  --color-patina:     #E8B84B;
  --color-patina-dk:  #B08518;

  /* ── Semantic ── */
  --bg:        var(--color-wall);
  --bg-raised: #FFFFFF;
  --bg-muted:  #F7F4EF;
  --fg:        var(--color-ink);
  --fg-2:      var(--color-ink-soft);
  --fg-3:      var(--color-concrete);
  --line:      rgba(26,23,20,0.14);
  --line-soft: rgba(26,23,20,0.08);
  --scrim:     rgba(26,23,20,0.42);

  /* ── Accent (rebindable) ── */
  --accent:          #FF7FA8;
  --accent-bubblegum:#FF7FA8;
  --accent-coral:    #FF6F5E;
  --accent-butter:   #FFC23D;
  --accent-mint:     #58C9A3;
  --accent-sky:      #5FB7E8;
  --accent-lavender: #B197E0;

  /* ── Foil ── */
  --foil: linear-gradient(110deg,
    #B08518 0%, #F4D77E 22%, #E8B84B 40%,
    #FFF4D0 52%, #E8B84B 64%, #B08518 86%, #F4D77E 100%);

  /* ── Glass ── */
  --glass-bg:     rgba(251,248,242,0.55);
  --glass-stroke: rgba(255,255,255,0.45);
  --glass-blur:   18px;

  /* ── Typography ── */
  --font-display:   'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --font-ui:        'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --font-mono:      'Be Vietnam Pro', monospace;

  --t-hero:    clamp(3.5rem,  8vw,  8rem);
  --t-display: clamp(2.75rem, 5vw,  4.5rem);
  --t-h1:      clamp(2rem,    3.4vw, 3rem);
  --t-h2:      clamp(1.5rem,  2.4vw, 2rem);
  --t-h3:      1.375rem;
  --t-body:    1.0625rem;
  --t-body-sm: 0.9375rem;
  --t-label:   0.8125rem;
  --t-meta:    0.6875rem;

  --leading-tight: 1.04;
  --leading-snug:  1.18;
  --leading-body:  1.6;

  --track-wide:  0.10em;
  --track-mega:  0.14em;
  --track-tight: -0.02em;

  /* ── Spacing (φ ≈ 1.618) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 13px;
  --space-4: 21px;
  --space-5: 34px;
  --space-6: 55px;
  --space-7: 89px;
  --space-8: 144px;

  /* ── Layout ── */
  --page-max: 1440px;
  --page-pad: clamp(20px, 4vw, 72px);
  --gutter:   clamp(16px, 2vw, 40px);

  /* ── Shadows ── */
  --shadow-plinth:    0 24px 48px -12px rgba(15,15,15,0.15);
  --shadow-plinth-lg: 0 40px 80px -20px rgba(15,15,15,0.22);
  --shadow-lift:      0 2px 8px rgba(15,15,15,0.06);

  /* ── Radius ── */
  --radius-frame: 0px;
  --radius-card:  2px;
  --radius-pill:  999px;

  /* ── Motion ── */
  --motion-unveil: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    640ms;
  --dur-curtain: 1100ms;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* ── Palette overrides ── */
  --color-wall:       #0E0D0C;
  --color-ink:        #F2EFE9;
  --color-ink-soft:   #C0BAB1;
  --color-concrete:   #756E66;
  --color-concrete-2: #2E2B28;

  /* ── Semantic overrides ── */
  --bg:        #0E0D0C;
  --bg-raised: #1C1A18;
  --bg-muted:  #272421;
  --fg:        #F2EFE9;
  --fg-2:      #C0BAB1;
  --fg-3:      #756E66;
  --line:      rgba(242,239,233,0.13);
  --line-soft: rgba(242,239,233,0.07);
  --scrim:     rgba(0,0,0,0.65);

  /* ── Accent — brighter in dark ── */
  --color-patina:    #F0C355;
  --color-patina-dk: #D4A82A;

  /* ── Glass ── */
  --glass-bg:     rgba(28,26,24,0.70);
  --glass-stroke: rgba(255,255,255,0.09);

  /* ── Shadows ── */
  --shadow-plinth:    0 24px 48px -12px rgba(0,0,0,0.55);
  --shadow-plinth-lg: 0 40px 80px -20px rgba(0,0,0,0.70);
  --shadow-lift:      0 2px 8px rgba(0,0,0,0.35);
}