/* ============ TOKENS ============ */
:root{
  /* Native controls — checkboxes, date pickers — follow the theme too, or they
     sit white on the dark background. */
  color-scheme:light dark;
  --bg:#F6F5F1;
  --surface:#FFFFFF;
  --surface2:#EFEEE8;
  --ink:#212722;
  --muted:#69736C;
  --faint:#9AA39C;
  --line:#E2E3DB;
  --line-strong:#CACDC2;
  --brand:#17594A;
  --brand-hover:#0F4438;
  --brand-soft:#E3EEE9;
  --brand-ink:#F2F8F4;
  --accent:#C97B12;
  --accent-soft:#F7EBD7;
  --good:#2E7D4F;
  --good-soft:#E1F0E6;
  --warn:#A96F0B;
  --warn-soft:#F6ECD4;
  --bad:#B3402E;
  --bad-soft:#F6E3DF;
  --shadow:0 1px 2px rgba(33,39,34,.05),0 8px 24px rgba(33,39,34,.06);
  --shadow-lg:0 4px 12px rgba(33,39,34,.08),0 24px 64px rgba(33,39,34,.14);
  --radius:10px;
  /* Motion & depth. One easing vocabulary so nothing moves in its own accent:
     --ease-spring overshoots slightly and is for things appearing or succeeding;
     --ease-out is for everything that simply moves. */
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --lift:0 4px 10px rgba(33,39,34,.07),0 18px 40px rgba(33,39,34,.11);
  --glow-brand:0 6px 18px rgba(23,89,74,.28);
  --grad-brand:linear-gradient(135deg,#1C6A57 0%,#17594A 55%,#134C3F 100%);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121714;
    --surface:#1A211D;
    --surface2:#151B17;
    --ink:#E7ECE7;
    --muted:#9BA69E;
    --faint:#6E7A71;
    --line:#28322B;
    --line-strong:#3A463E;
    --brand:#2E8C71;
    --brand-hover:#37A283;
    --brand-soft:#1D2F28;
    --brand-ink:#EAF6EF;
    --accent:#E0A13C;
    --accent-soft:#33290F;
    --good:#4CAF7A;
    --good-soft:#1C2F24;
    --warn:#D6A943;
    --warn-soft:#332A12;
    --bad:#D96C57;
    --bad-soft:#341D18;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 4px 12px rgba(0,0,0,.4),0 24px 64px rgba(0,0,0,.5);
    --lift:0 4px 10px rgba(0,0,0,.45),0 18px 44px rgba(0,0,0,.55);
    --glow-brand:0 6px 20px rgba(46,140,113,.30);
    --grad-brand:linear-gradient(135deg,#35A084 0%,#2E8C71 55%,#24725C 100%);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F6F5F1;--surface:#FFFFFF;--surface2:#EFEEE8;--ink:#212722;--muted:#69736C;--faint:#9AA39C;
  --line:#E2E3DB;--line-strong:#CACDC2;--brand:#17594A;--brand-hover:#0F4438;--brand-soft:#E3EEE9;
  --brand-ink:#F2F8F4;--accent:#C97B12;--accent-soft:#F7EBD7;--good:#2E7D4F;--good-soft:#E1F0E6;
  --warn:#A96F0B;--warn-soft:#F6ECD4;--bad:#B3402E;--bad-soft:#F6E3DF;
  --shadow:0 1px 2px rgba(33,39,34,.05),0 8px 24px rgba(33,39,34,.06);
  --shadow-lg:0 4px 12px rgba(33,39,34,.08),0 24px 64px rgba(33,39,34,.14);
  --lift:0 4px 10px rgba(33,39,34,.07),0 18px 40px rgba(33,39,34,.11);
  --glow-brand:0 6px 18px rgba(23,89,74,.28);
  --grad-brand:linear-gradient(135deg,#1C6A57 0%,#17594A 55%,#134C3F 100%);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121714;--surface:#1A211D;--surface2:#151B17;--ink:#E7ECE7;--muted:#9BA69E;--faint:#6E7A71;
  --line:#28322B;--line-strong:#3A463E;--brand:#2E8C71;--brand-hover:#37A283;--brand-soft:#1D2F28;
  --brand-ink:#EAF6EF;--accent:#E0A13C;--accent-soft:#33290F;--good:#4CAF7A;--good-soft:#1C2F24;
  --warn:#D6A943;--warn-soft:#332A12;--bad:#D96C57;--bad-soft:#341D18;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 4px 12px rgba(0,0,0,.4),0 24px 64px rgba(0,0,0,.5);
  --lift:0 4px 10px rgba(0,0,0,.45),0 18px 44px rgba(0,0,0,.55);
  --glow-brand:0 6px 20px rgba(46,140,113,.30);
  --grad-brand:linear-gradient(135deg,#35A084 0%,#2E8C71 55%,#24725C 100%);
}