/* ============================================================
   YET TO LIVE — DESIGN TOKENS
   Single source of truth. Imported by every page.
   ============================================================ */

:root {
  /* Color (light) */
  --bg:           #f6efe0;
  --bg-soft:      #fff8ec;
  --card:         #ffffff;
  --ink:          #2e2418;
  --ink-soft:     #6b5d4b;
  --ink-mute:     #a39685;
  --rule:         #e0d5be;
  --rule-soft:    #ede4cf;
  --accent:       #b85838;
  --accent-soft:  #e4c8b8;
  --accent-mute:  #f1dccc;
  --success:      #4a7c4e;
  --warn:         #c08a2e;
  --error:        #a23b2b;
  --overlay:      rgba(46, 36, 24, 0.45);

  /* Type families */
  --font-head:    "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif;

  /* Type scale — mobile-first */
  --fs-display:   clamp(44px, 11vw, 96px);
  --fs-h1:        clamp(32px, 7vw, 56px);
  --fs-h2:        clamp(26px, 5.5vw, 40px);
  --fs-h3:        clamp(20px, 4vw, 24px);
  --fs-h4:        18px;
  --fs-lead:      clamp(17px, 2.4vw, 20px);
  --fs-body:      17px;
  --fs-small:     15px;
  --fs-tiny:      13px;
  --fs-stat:      clamp(64px, 16vw, 140px);

  --lh-display:   1.02;
  --lh-head:      1.12;
  --lh-body:      1.6;
  --lh-prose:     1.72;

  /* Spacing — 4px base */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radius */
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    18px;
  --r-xl:    24px;
  --r-2xl:   32px;
  --r-pill:  999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(58, 40, 24, 0.06);
  --shadow-md: 0 1px 2px rgba(58, 40, 24, 0.05), 0 8px 24px rgba(58, 40, 24, 0.06);
  --shadow-lg: 0 4px 12px rgba(58, 40, 24, 0.08), 0 20px 56px rgba(58, 40, 24, 0.1);

  /* Motion */
  --t-fast: 0.12s ease;
  --t-base: 0.2s ease;
  --t-slow: 0.32s ease;

  /* Layout */
  --container:        1120px;
  --container-prose:  720px;
  --tap-min:          48px;
  --nav-h:            64px;
}

[data-theme="dark"] {
  --bg:           #1a160f;
  --bg-soft:      #221c14;
  --card:         #2a2319;
  --ink:          #f0e6d2;
  --ink-soft:     #c0b294;
  --ink-mute:     #7a6e58;
  --rule:         #3d3527;
  --rule-soft:    #2f2820;
  --accent:       #e89472;
  --accent-soft:  #5a3a2a;
  --accent-mute:  #3d281c;
  --success:      #7fb083;
  --warn:         #e0b262;
  --error:        #d97768;
  --overlay:      rgba(0, 0, 0, 0.65);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 20px 56px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}