/* ============================================================================
   Design tokens. Single source for colour, type, spacing, radius, elevation, motion.
   Theme: theme.js resolves data-theme (dark | light | auto) to data-scheme (dark | light) on <html>.
   Journey: put data-journey="gym" (etc.) on a screen container to switch --accent.
   Component styles live in components.css; nothing there uses a raw colour or pixel spacing.
   ========================================================================== */
@property --accent { syntax: '<color>'; inherits: true; initial-value: #ff7a3d; }
@property --accent-solid { syntax: '<color>'; inherits: true; initial-value: #ff7a3d; }

:root {
  /* colour: dark is primary */
  --bg: #090807;
  --bg-deep: #040303;
  --surface: #131110;
  --surface-hi: #1d1a18;
  --raised: #24201d;
  --edge: rgb(255 244 230 / .09);
  --grain: .07;
  --line: #2a2623;
  --line-strong: #3d3834;
  --text: #f4f1ec;
  --muted: #a8a199;
  --subtle: #8a837b;
  --good: #5fd38d;
  --bad: #ff7a70;
  --warn: #f2b84b;
  --scrim: rgb(0 0 0 / .62);
  --on-photo: #f4f1ec;
  --on-photo-muted: #c9c3bb;
  --photo-fade: rgb(8 7 6 / .88);
  --photo-base: #171412;
  --shade: #000000;
  --e-inset: inset 0 1px 3px rgb(0 0 0 / .65), inset 0 -1px 0 var(--edge);

  /* accent: text-safe colour, solid fill, and the ink that sits on the fill */
  --accent: #ff7a3d;
  --accent-solid: #ff7a3d;
  --accent-ink: #1c0d05;
  --glow: 30%;

  /* categorical (donut, legends) and block types (builder) */
  --cat-1: #8f8aff; --cat-2: #5fd38d; --cat-3: #f2b84b; --cat-4: #d79bff; --cat-5: #ff8a7a;
  --block-warm: #f2b84b; --block-main: #5fd38d; --block-super: #b79cff; --block-cool: #7cc7f2;

  /* type */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --fs-hero: 4rem;       --lh-hero: 1;
  --fs-display: 2.5rem;  --lh-display: 1.1;
  --fs-title: 1.5rem;    --lh-title: 1.25;
  --fs-heading: 1.125rem; --lh-heading: 1.33;
  --fs-body: 1rem;       --lh-body: 1.5;
  --fs-label: .875rem;   --lh-label: 1.43;
  --fs-caption: .75rem;  --lh-caption: 1.33;

  /* spacing: 4pt grid */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --gutter: var(--space-4);
  --tap: 44px;
  --screen-max: 430px;

  /* radius */
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

  /* elevation: depth comes from surface steps and one light source, shadows only for floating chrome */
  --e-card: inset 0 1px 0 var(--edge), 0 1px 2px rgb(0 0 0 / .5), 0 28px 48px -28px rgb(0 0 0 / .9);
  --e-float: inset 0 1px 0 var(--edge), 0 2px 6px rgb(0 0 0 / .5), 0 22px 44px -10px rgb(0 0 0 / .85);
  --e-glow: 0 14px 34px -12px color-mix(in srgb, var(--accent-solid) 70%, transparent);
  --e-sheet: inset 0 1px 0 var(--edge), 0 -24px 60px rgb(0 0 0 / .7);

  /* motion */
  --dur-press: 160ms;
  --dur-micro: 180ms;
  --dur-card: 320ms;
  --dur-journey: 520ms;
  --dur-draw: 600ms;
  --stagger: 30ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);

  /* legacy aliases used by the v1 screens until they are rebuilt */
  --card: var(--surface);
  --card-2: var(--raised);
  --radius: var(--radius-lg);
  --shadow: none;

  color-scheme: dark;
}

:root[data-scheme="light"] {
  --bg: #f1ece3;
  --bg-deep: #e4dccf;
  --surface: #fbf8f2;
  --surface-hi: #ffffff;
  --edge: rgb(255 255 255 / .95);
  --grain: .05;
  --raised: #efe9df;
  --line: #e3dccf;
  --line-strong: #cfc6b6;
  --text: #1b1815;
  --muted: #5f584f;
  --subtle: #6f675d;
  --good: #13703a;
  --bad: #b82b22;
  --warn: #8a5a0a;
  --scrim: rgb(27 24 21 / .45);
  --e-inset: inset 0 1px 3px rgb(70 50 20 / .16), inset 0 -1px 0 var(--edge);
  --accent: #ad3b0a;
  --accent-solid: #c2460e;
  --accent-ink: #ffffff;
  --glow: 22%;
  --cat-1: #3a33c8; --cat-2: #13703a; --cat-3: #a86a00; --cat-4: #8a35c9; --cat-5: #c43a28;
  --block-warm: #8a5a0a; --block-main: #13703a; --block-super: #6741d9; --block-cool: #0b6a9c;
  --e-card: inset 0 1px 0 var(--edge), 0 1px 2px rgb(70 50 20 / .08), 0 24px 40px -26px rgb(70 50 20 / .38);
  --e-float: inset 0 1px 0 var(--edge), 0 2px 6px rgb(70 50 20 / .1), 0 20px 40px -12px rgb(70 50 20 / .32);
  --e-glow: 0 14px 30px -14px color-mix(in srgb, var(--accent-solid) 60%, transparent);
  --e-sheet: inset 0 1px 0 var(--edge), 0 -20px 50px rgb(70 50 20 / .22);
  color-scheme: light;
}

/* journey characters: one accent each. Goals shares the brand ember. */
[data-journey="hub"], [data-journey="goals"] { --accent: #ff7a3d; --accent-solid: #ff7a3d; --accent-ink: #1c0d05; }
[data-journey="gym"]       { --accent: #ff6b57; --accent-solid: #ff6b57; --accent-ink: #200a06; }
[data-journey="library"]   { --accent: #b6e34b; --accent-solid: #b6e34b; --accent-ink: #152004; }
[data-journey="nutrition"] { --accent: #5fd38d; --accent-solid: #5fd38d; --accent-ink: #05200f; }
[data-journey="body"]      { --accent: #7cc7f2; --accent-solid: #7cc7f2; --accent-ink: #06202e; }
[data-journey="finance"]   { --accent: #a29dff; --accent-solid: #443ee0; --accent-ink: #ffffff; }
[data-journey="journal"]   { --accent: #e8b662; --accent-solid: #e8b662; --accent-ink: #201503; }
[data-journey="vision"]    { --accent: #d79bff; --accent-solid: #d79bff; --accent-ink: #220a33; }
[data-scheme="light"] [data-journey="hub"], [data-scheme="light"] [data-journey="goals"] { --accent: #ad3b0a; --accent-solid: #c2460e; --accent-ink: #ffffff; }
[data-scheme="light"] [data-journey="gym"]       { --accent: #b52f20; --accent-solid: #c43a28; --accent-ink: #ffffff; }
[data-scheme="light"] [data-journey="library"]   { --accent: #3f6b0a; --accent-solid: #47760c; --accent-ink: #ffffff; }
[data-scheme="light"] [data-journey="nutrition"] { --accent: #13703a; --accent-solid: #13703a; --accent-ink: #ffffff; }
[data-scheme="light"] [data-journey="body"]      { --accent: #0b6a9c; --accent-solid: #0b6a9c; --accent-ink: #ffffff; }
[data-scheme="light"] [data-journey="finance"]   { --accent: #3a33c8; --accent-solid: #3a33c8; --accent-ink: #ffffff; }
[data-scheme="light"] [data-journey="journal"]   { --accent: #855608; --accent-solid: #855608; --accent-ink: #ffffff; }
[data-scheme="light"] [data-journey="vision"]    { --accent: #8a35c9; --accent-solid: #8a35c9; --accent-ink: #ffffff; }
/* the accent cross-fades when a screen changes journey */
[data-journey] { transition: --accent var(--dur-journey) var(--ease), --accent-solid var(--dur-journey) var(--ease); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font-sans);
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px 10px; padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.titles { display: flex; flex-direction: column; }
.topbar h1 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.date { color: var(--muted); font-size: 13px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.icon-btn.active { color: var(--accent); border-color: var(--accent); }
main { max-width: 640px; margin: 0 auto; padding: 14px 16px; }

.tabs {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  background: none; border: 0; color: var(--muted); padding: 9px 0 10px; min-height: 56px;
  font: inherit; font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
}
.tabs button.active { color: var(--accent); font-weight: 600; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.005em; }
.card h3 { margin: 12px 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.card .flush, h2.flush { margin: 0; }
.nav-card { padding: 6px 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.grow { flex: 1; }
.err { color: var(--bad); }
.spaced { margin-top: 12px; }
.spaced-sm { margin-top: 8px; }
.day-row { margin-top: 10px; }
.macro-grid { margin-top: 12px; }
.saved { margin-top: 6px; min-height: 1.4em; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats { margin-bottom: 12px; }
.stat { text-align: center; padding: 12px 6px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.stat b { display: block; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }

button.btn, a.btn, label.btn {
  appearance: none; border: 1px solid var(--line); background: var(--card-2); color: var(--text);
  padding: 10px 14px; min-height: 40px; border-radius: var(--radius-sm); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
  transition: transform .08s ease, background .15s ease;
}
button.btn:active { transform: scale(.97); }
button.btn:disabled { opacity: .45; cursor: default; }
button.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.btn.small { padding: 5px 11px; min-height: 32px; font-size: 13px; }
button.btn.ghost { background: transparent; }
button.btn.danger, label.btn.danger { color: var(--bad); }
button.btn.block { width: 100%; }
button.link { background: none; border: 0; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 0; }

input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--card-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 42px;
}
input.num { width: 60px; padding-inline: 6px; text-align: center; }
textarea { min-height: 160px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
summary { cursor: pointer; padding: 6px 0; }

.bar { height: 10px; background: var(--card-2); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s ease; }
.bar.over > span { background: var(--bad); }

ul.list { list-style: none; padding: 0; margin: 0; }
ul.list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
ul.list li:last-child { border-bottom: 0; }
ul.list li.tap { cursor: pointer; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 10px; }
.chip { border: 1px solid var(--line); background: var(--card-2); color: var(--text); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.setrow { display: grid; grid-template-columns: 28px 1fr 1fr 48px; gap: 8px; align-items: center; margin: 6px 0; }
.setrow input { text-align: center; }
.setrow .done { width: 48px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card-2); cursor: pointer; font-size: 18px; color: var(--muted); }
.setrow .done.on { background: var(--good); color: #fff; border-color: var(--good); }

.moods { display: flex; gap: 6px; }
.moods button { flex: 1; font-size: 24px; padding: 8px 0; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card-2); cursor: pointer; }
.moods button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--card-2)); }

dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 0; width: min(560px, calc(100vw - 24px)); background: var(--card); color: var(--text); }
dialog::backdrop { background: rgb(0 0 0 / .55); }
#modal-body { padding: 16px; max-height: 80vh; overflow: auto; }

.empty { text-align: center; padding: 20px 8px; color: var(--muted); }
.pill { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: var(--card-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }

/* rest timer pill, floats above the tab bar */
.rest {
  position: fixed; z-index: 9; inset-inline: 16px; bottom: calc(68px + env(safe-area-inset-bottom));
  max-width: 420px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px; padding-inline: 16px 8px;
  background: var(--accent); color: var(--accent-ink); border-radius: 99px; box-shadow: 0 8px 24px rgb(0 0 0 / .35);
}
.rest[hidden] { display: none; }
.rest b { font-size: 20px; letter-spacing: .02em; }
.rest .btn { background: rgb(0 0 0 / .15); color: inherit; border-color: transparent; }

/* charts: SVG styled through classes so they follow the theme */
.chart { margin: 8px 0 6px; }
.chart svg { width: 100%; height: auto; display: block; }
.c-bar { fill: var(--accent); }
.c-bar.over { fill: var(--bad); }
.c-lbl { fill: var(--muted); font-size: 9px; font-family: inherit; }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-target { stroke: var(--good); stroke-width: 1.5; stroke-dasharray: 4 3; }
.c-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { fill: var(--card); stroke: var(--accent); stroke-width: 2; }

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