/* ─────────────────────────────────────────────────────────────
   Design tokens — Dimensional Layering on an accessible base.
   Semantic names only; no raw hex in components.
   ───────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Surfaces — each step is one level "closer" to the viewer */
  --bg:          #F5F4F0;
  --surface-1:   #FFFFFF;
  --surface-2:   #FAF9F5;
  --surface-3:   #EFEDE6;   /* sunken / inset */
  --surface-glass: rgba(255,255,255,.72);

  --border:        #E5E2D8;
  --border-strong: #D2CDBF;

  /* Foreground — all pairs verified ≥ 4.5:1 on --surface-1 and --bg */
  --fg:    #14180F;
  --fg-2:  #414A3D;
  --fg-3:  #61685A;   /* ≥4.5:1 on --surface-3, the lightest place it lands */

  /* Brand + semantic accents */
  --brand:        #14563D;
  --brand-hover:  #0E4230;
  --brand-on:     #FFFFFF;
  --brand-soft:   #E2EFE8;
  --brand-text:   #14563D;
  --brand-ring:   rgba(20,86,61,.22);

  --ochre:      #A87418;
  --ochre-soft: #FAF0D9;
  --ochre-text: #7A5410;

  --clay:       #A6442A;
  --clay-on:    #FFFFFF;
  --clay-soft:  #FBE8E1;
  --clay-text:  #8E3A23;

  --info:       #3C6E9B;
  --info-soft:  #E7EFF7;
  --info-text:  #2E5578;

  --wa:         #12864A;
  --wa-on:      #FFFFFF;
  --wa-soft:    #E3F4EA;
  --wa-text:    #0E6E3D;

  /* Elevation — 4 levels, the core of the layering system */
  --e1: 0 1px 2px rgba(20,24,15,.05), 0 1px 1px rgba(20,24,15,.03);
  --e2: 0 2px 4px -1px rgba(20,24,15,.06), 0 6px 14px -3px rgba(20,24,15,.06);
  --e3: 0 6px 12px -5px rgba(20,24,15,.09), 0 14px 34px -8px rgba(20,24,15,.10);
  --e4: 0 14px 26px -10px rgba(20,24,15,.16), 0 32px 70px -14px rgba(20,24,15,.22);
  --ring: 0 0 0 3px var(--brand-ring);
  --hairline: inset 0 1px 0 rgba(255,255,255,.6);

  --scrim: rgba(14,18,12,.52);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 9px;
  --r:    13px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Spacing — 4pt rhythm */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Type */
  --display: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-xs:  11px;
  --t-sm:  12.5px;
  --t-md:  13.5px;
  --t-lg:  15px;
  --t-xl:  19px;
  --t-2xl: 26px;
  --t-3xl: 34px;

  /* Motion — enter slow + soft, exit fast */
  --d-fast:  120ms;
  --d-base:  190ms;
  --d-slow:  300ms;
  --ease:     cubic-bezier(.16, 1, .3, 1);
  --ease-in:  cubic-bezier(.4, 0, 1, 1);

  /* Layers */
  --z-nav: 20;
  --z-sticky: 30;
  --z-drag: 40;
  --z-modal: 100;
  --z-toast: 200;
}

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

  /* Tonal elevation: surfaces get *lighter* as they rise. Never pure black. */
  --bg:          #0D100D;
  --surface-1:   #161A16;
  --surface-2:   #1C211C;
  --surface-3:   #242A24;
  --surface-glass: rgba(22,26,22,.74);

  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.17);

  --fg:    #ECEFE9;
  --fg-2:  #B6BEB2;
  --fg-3:  #949C90;   /* ≥4.5:1 on --surface-3, the lightest place it lands */

  --brand:       #4FAE82;
  --brand-hover: #63C295;
  --brand-on:    #08130D;
  --brand-soft:  rgba(79,174,130,.15);
  --brand-text:  #78C8A0;
  --brand-ring:  rgba(79,174,130,.30);

  --ochre:      #D7A03C;
  --ochre-soft: rgba(215,160,60,.15);
  --ochre-text: #E0B45F;

  --clay:       #D97354;
  --clay-on:    #180804;   /* bright dark-mode clay needs dark text, not white */
  --clay-soft:  rgba(217,115,84,.15);
  --clay-text:  #E89074;

  --info:       #6BA3D4;
  --info-soft:  rgba(107,163,212,.15);
  --info-text:  #8FBBE2;

  --wa:         #25B366;
  --wa-on:      #04140A;   /* the bright dark-mode green needs dark text, not white */
  --wa-soft:    rgba(37,179,102,.15);
  --wa-text:    #4CCB86;

  --e1: 0 1px 2px rgba(0,0,0,.44);
  --e2: 0 2px 6px rgba(0,0,0,.46), 0 8px 18px -6px rgba(0,0,0,.42);
  --e3: 0 8px 18px -6px rgba(0,0,0,.55), 0 18px 44px -12px rgba(0,0,0,.52);
  --e4: 0 18px 34px -12px rgba(0,0,0,.66), 0 40px 84px -20px rgba(0,0,0,.66);
  --hairline: inset 0 1px 0 rgba(255,255,255,.05);

  --scrim: rgba(0,0,0,.66);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss03" 1;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
a { color: inherit; text-decoration: none; }
svg { flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--brand-soft); color: var(--brand-text); }

/* One focus treatment, everywhere. Never removed. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Scrollbars that match the theme instead of fighting it */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Motion is a preference, not a decision we make for the user. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utilities */
.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; }
.muted { color: var(--fg-3); }
.small { font-size: var(--t-sm); }
.tiny  { font-size: var(--t-xs); }
.num   { font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: var(--s1); }
.row   { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}