/* ============================================================
   DESIGN TOKENS  —  the single place to restyle the whole site
   Palette: "Refined earth"   ·   Type: Inter + Fraunces
   Change values here; everything else references these variables.
   ============================================================ */

:root {
  /* ---------- Type families (swap here to change all typography) ---------- */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;   /* headings */
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;   /* abstracts / long-form */
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  /* ---------- Fluid type scale (major-third-ish, clamps for responsiveness) ---------- */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --text-sm:   clamp(0.86rem, 0.83rem + 0.18vw, 0.94rem);
  --text-base: clamp(1rem,    0.96rem + 0.25vw, 1.125rem);
  --text-md:   clamp(1.15rem, 1.08rem + 0.4vw,  1.35rem);
  --text-lg:   clamp(1.4rem,  1.28rem + 0.7vw,  1.85rem);
  --text-xl:   clamp(1.8rem,  1.55rem + 1.4vw,  2.6rem);
  --text-2xl:  clamp(2.3rem,  1.9rem + 2.3vw,   3.6rem);
  --text-3xl:  clamp(2.8rem,  2.1rem + 3.6vw,   4.6rem);

  --leading-tight: 1.14;
  --leading-snug:  1.32;
  --leading-body:  1.65;
  --tracking-tight: -0.015em;
  --tracking-wide:  0.14em;

  /* ---------- Spacing scale (rem based) ---------- */
  --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:      72rem;   /* ~1152px content max width */
  --container-wide: 84rem;
  --container-prose: 42rem;  /* readable line length */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

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

  /* ---------- Brand hues (theme-independent reference) ---------- */
  --clay:      #A24A28;   /* primary accent — deep sienna */
  --clay-soft: #C2703F;
  --moss:      #4B6B54;   /* secondary accent — living/eco */
  --hematite:  #7A4A3A;

  /* ============================================================
     LIGHT THEME (default)
     ============================================================ */
  --bg:          #F1ECE3;   /* warm paper */
  --bg-2:        #E7E0D2;   /* alternate section band */
  --surface:     #FBF8F2;   /* cards / raised */
  --surface-2:   #F3EEE4;
  --ink:         #2A2621;   /* primary text */
  --ink-muted:   #63594F;   /* secondary text (>=4.5:1 on bg) */
  --ink-faint:   #726657;   /* meta / captions (AA: 4.75:1 on bg) */
  --border:      #DDD5C6;
  --border-strong:#C8BCA8;
  --field-border:#8C7D67;   /* interactive-control outlines — WCAG 1.4.11 (3.4:1 on bg) */

  --accent:        var(--clay);      /* links, emphasis (4.9:1 on bg) */
  --accent-hover:  #863A1E;
  --accent-contrast:#FFFFFF;         /* text on accent fills */
  --accent-2:      var(--moss);
  --accent-tint:   #EFE2D6;          /* soft accent wash */

  --focus:       #1F6FB2;            /* high-contrast focus ring */
  --shadow-1: 0 1px 2px rgba(42,30,20,.06), 0 2px 8px rgba(42,30,20,.06);
  --shadow-2: 0 6px 20px rgba(42,30,20,.10), 0 2px 6px rgba(42,30,20,.06);

  color-scheme: light;
}

/* ============================================================
   DARK THEME  —  applied via [data-theme="dark"] or system pref
   ============================================================ */
:root[data-theme="dark"] {
  --bg:          #1B1815;
  --bg-2:        #201C18;
  --surface:     #232019;
  --surface-2:   #2A251E;
  --ink:         #ECE5D9;
  --ink-muted:   #B4A99A;
  --ink-faint:   #9A9081;   /* AA on all dark surfaces (>=4.8:1) */
  --border:      #38322A;
  --border-strong:#4A4238;
  --field-border:#7A7060;   /* interactive-control outlines — WCAG 1.4.11 (3.6:1 on bg) */

  --accent:        #E39468;          /* lighter terracotta for dark bg */
  --accent-hover:  #F0A87E;
  --accent-contrast:#22190F;
  --accent-2:      #82A98C;
  --accent-tint:   #2E2820;

  --focus:       #86B7FF;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
  --shadow-2: 0 8px 26px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);

  color-scheme: dark;
}

/* Respect system preference when the user hasn't chosen explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:#1B1815; --bg-2:#201C18; --surface:#232019; --surface-2:#2A251E;
    --ink:#ECE5D9; --ink-muted:#B4A99A; --ink-faint:#9A9081;
    --border:#38322A; --border-strong:#4A4238; --field-border:#7A7060;
    --accent:#E39468; --accent-hover:#F0A87E; --accent-contrast:#22190F;
    --accent-2:#82A98C; --accent-tint:#2E2820; --focus:#86B7FF;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
    --shadow-2: 0 8px 26px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}