/* Fit theme tokens — light = "Fresh Air", dark = "Ember".
   Palettes are CVD-validator-passed (see PLAN.md §UI design); if any hue
   changes, re-run the dataviz palette validator before shipping.
   House rule: nothing is ever red — over-states shift warm amber. */

:root {
  /* Fresh Air (light) */
  --bg: #F4F7F5;
  --card: #FFFFFF;
  --ink: #22302A;
  --muted: #64746C;
  --line: #E8EDE9;
  --primary: #1E8A68;      /* calm green — burn/activity + primary actions */
  --energy: #D1571F;       /* warm orange — intake/energy */
  --violet: #7A6BC4;       /* third macro slot (fat) — shared across modes */
  --chip: #E5EFE9;
  --bar-track: #E8EDE9;
  --shadow: 0 2px 10px rgba(34, 48, 42, .06);
  --radius: 18px;
  --num-font: -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161D;
    --card: #1A232D;
    --ink: #E8EDF2;
    --muted: #8B9AAB;
    --line: #26313D;
    --primary: #2AA88F;    /* teal — burn/activity */
    --energy: #C68223;     /* ember amber — intake/energy */
    --energy-hi: #F2A94E;
    --violet: #8B78E8;
    --chip: #21303C;
    --bar-track: #26313D;
    --shadow: none;
    --radius: 14px;
    --num-font: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif;
  }
}

:root[data-theme="dark"] {
  --bg: #10161D;
  --card: #1A232D;
  --ink: #E8EDF2;
  --muted: #8B9AAB;
  --line: #26313D;
  --primary: #2AA88F;
  --energy: #C68223;
  --energy-hi: #F2A94E;
  --violet: #8B78E8;
  --chip: #21303C;
  --bar-track: #26313D;
  --shadow: none;
  --radius: 14px;
  --num-font: "Avenir Next Condensed", "Arial Narrow", -apple-system, sans-serif;
}

:root[data-theme="light"] {
  --bg: #F4F7F5;
  --card: #FFFFFF;
  --ink: #22302A;
  --muted: #64746C;
  --line: #E8EDE9;
  --primary: #1E8A68;
  --energy: #D1571F;
  --violet: #7A6BC4;
  --chip: #E5EFE9;
  --bar-track: #E8EDE9;
  --shadow: 0 2px 10px rgba(34, 48, 42, .06);
  --radius: 18px;
  --num-font: -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

.tnum { font-variant-numeric: tabular-nums; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.big {
  font-family: var(--num-font);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}
.big small { font-size: .95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.sub { font-size: .8rem; color: var(--muted); }

.bar { height: 9px; border-radius: 5px; background: var(--bar-track); position: relative; overflow: hidden; }
.bar b { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--primary); }

.btn {
  display: block; width: 100%;
  background: var(--primary); color: #fff;
  border: 0; border-radius: 12px;
  font: 600 1rem/1 inherit; font-family: inherit;
  padding: 14px; cursor: pointer;
}
.btn.ghost { background: var(--chip); color: var(--ink); }
.btn:active { opacity: .85; }

label { display: block; font-size: .8rem; color: var(--muted); margin: 12px 0 4px; }
input, select {
  width: 100%; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
  font: 1rem/1.3 inherit;
}

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: var(--chip); color: var(--ink);
  border: 0; border-radius: 99px;
  font: 600 .82rem/1 inherit; font-family: inherit;
  padding: 9px 16px; cursor: pointer;
}
.chip.on { background: var(--primary); color: #fff; }