/* Design tokens. Light is the default; dark is opt-in via the theme button. */
:root {
  --bg: #F4F6F5;
  --surface: #FFFFFF;
  --ink: #17211C;
  --ink-2: #52605A;
  --muted: #7A8781;
  --line: #E3E9E6;
  --hero: #17211C;
  --hero-ink: #F4F6F5;
  --hero-2: #B7C4BD;
  --hero-track: #34443B;
  --accent: #2E7D5B;
  --accent-hover: #276A4D;
  --accent-soft: #E7F2EC;
  --crit: #B93A3A;
  --grid: #E1E0D9;
  /* data series: validated palette slots 1-3, same entity = same colour everywhere */
  --s-saved: #1BAF7A;
  --s-saved-soft: #BFE8D6;
  --s-spent: #EB6834;
  --s-free: #2A78D6;
  --s-pace: #898781;
  --track: #E6ECE9;
  --radius: 16px;
}
.dark {
  --bg: #0F1512;
  --surface: #18211C;
  --ink: #EEF3F0;
  --ink-2: #B3C0B9;
  --muted: #8A9A92;
  --line: #26332C;
  --hero: #203027;
  --hero-ink: #F4F6F5;
  --hero-2: #B7C4BD;
  --hero-track: #34443B;
  --accent: #3FA57C;
  --accent-hover: #4BB98D;
  --accent-soft: #1D3A2D;
  --crit: #E66767;
  --grid: #2C2C2A;
  --s-saved: #199E70;
  --s-saved-soft: #1F5A45;
  --s-spent: #D95926;
  --s-free: #3987E5;
  --s-pace: #898781;
  --track: #26332C;
}

body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
.num { font-variant-numeric: tabular-nums; }

/* Surfaces: hairline border, no shadow */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.hero { background: var(--hero); color: var(--hero-ink); border-color: transparent; padding: 22px; }
.eyebrow { font-size: 12px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.01em; }
.hero .eyebrow { color: var(--hero-2); }
.big { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.stat { font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.sub { font-size: 12px; color: var(--ink-2); }

/* Forms */
.lbl { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.field { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 16px; transition: border-color 150ms ease, background-color 150ms ease; }
.field:hover { border-color: var(--muted); }
.field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.btn-primary { min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; transition: background-color 150ms ease, transform 150ms ease; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.55; }
.btn-ghost { min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-weight: 500; font-size: 13px; transition: background-color 150ms ease, border-color 150ms ease; }
.btn-ghost:hover { border-color: var(--muted); }
.icon-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--ink-2); transition: background-color 150ms ease; }
.icon-btn:hover { background: var(--track); }
button:focus-visible, a:focus-visible, .peer:focus-visible + div { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Navigation: bottom bar on phones, pill bar on desktop */
.nav { background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--ink-2); font-weight: 500; font-size: 11px; transition: color 150ms ease; }
.tab i { font-size: 18px; }
.tab.active { color: var(--accent); font-weight: 600; }
@media (min-width: 768px) {
  .nav { border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 4px; }
  .tab { flex-direction: row; gap: 8px; min-height: 40px; font-size: 13px; border-radius: 10px; }
  .tab.active { background: var(--accent-soft); }
}

/* Bars */
.track { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.hero .track { background: var(--hero-track); height: 10px; border-radius: 5px; }
.fill { display: block; height: 100%; border-radius: 4px; background: var(--s-free); }
.fill.saved { background: var(--s-saved); }
.fill.spent { background: var(--s-spent); }
.fill.over { background: var(--crit); }
.plan-row { padding: 10px 0; border-top: 1px solid var(--line); }
.plan-row:first-of-type { border-top: 0; }

/* Allocation bar: segments separated by a 2px surface gap */
.alloc { display: flex; gap: 2px; height: 30px; border-radius: 8px; overflow: hidden; background: var(--surface); }
.alloc > span { min-width: 2px; border-radius: 3px; }
.alloc .saved { background: var(--s-saved); }
.alloc .toSave { background: repeating-linear-gradient(45deg, var(--s-saved-soft), var(--s-saved-soft) 5px, transparent 5px, transparent 9px); border: 1px solid var(--s-saved); }
.alloc .spent { background: var(--s-spent); }
.alloc .free { background: var(--s-free); }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.dot.saved { background: var(--s-saved); }
.dot.toSave { background: var(--s-saved-soft); border: 1px solid var(--s-saved); }
.dot.spent { background: var(--s-spent); }
.dot.free { background: var(--s-free); }

/* Legacy utility remap so older markup follows the tokens */
.text-slate-500, .text-slate-400 { color: var(--ink-2) !important; }
.border-slate-100, .border-slate-200, .dark .dark\:border-slate-700 { border-color: var(--line) !important; }
.bg-slate-100, .dark .dark\:bg-slate-700 { background: var(--track) !important; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }