/*
  Design tokens. Every color, size and timing in the product comes from here.

  Direction: neutral paper and slate, muted blue for forecasts,
  a separate comparison accent for market lines, and one yellow
  "flag" used only to mark a projected value on the margin ruler.

  Fonts: system stacks only for now (no network font fetch in the prototype).
  To self-host a face later, add an @font-face in base.css and put it first in --font-*.
*/
:root {
  color-scheme: light;

  --bg: #f2f4f7;
  --surface: #ffffff;
  --surface-2: #e9edf3;
  --surface-sunk: #f7f8fb;
  --ink: #172131;
  --ink-2: #445166;
  --ink-3: #5e6b80;
  --line: #d7dde6;
  --line-strong: #b5c0d0;

  --turf: #325d91;
  --turf-ink: #ffffff;
  --turf-soft: #e4edf8;
  --turf-mid: #9db8da;
  --neutral-bar: #cbd3df;

  --flag: #f2b71b;
  --flag-ink: #3b2a00;

  --market: #66518f;
  --market-soft: #eee8f7;

  --warn-ink: #7a4200;
  --warn-bg: #fff1d4;
  --warn-line: #e6c27a;
  --bad-ink: #9b1c12;
  --bad-bg: #fde8e5;
  --bad-line: #eba39b;
  --info-ink: #1d4a7a;
  --info-bg: #e3eefb;
  --info-line: #a9c4e6;

  --focus: #325d91;
  --shadow-sheet: 0 -8px 40px rgb(23 33 49 / 0.18);
  --shadow-pop: 0 10px 30px rgb(23 33 49 / 0.16);
  --scrim: rgb(23 33 49 / 0.42);

  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Inter, sans-serif;
  --font-display: 'Avenir Next Condensed', 'Roboto Condensed', 'Barlow Condensed', 'Arial Narrow',
    'Liberation Sans Narrow', 'DejaVu Sans Condensed', system-ui, sans-serif;

  --step--1: 0.8125rem;   /* 13 */
  --step-0: 0.9375rem;    /* 15 */
  --step-1: 1.0625rem;    /* 17 */
  --step-2: 1.3125rem;    /* 21 */
  --step-3: 1.75rem;      /* 28 */
  --step-4: 2.5rem;       /* 40 */
  --step-5: 3.5rem;       /* 56 */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;

  --gutter: 16px;
  --content-max: 1180px;
  --header-h: 56px;
  --tabbar-h: 60px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 240ms;
}

@media (min-width: 720px) {
  :root { --gutter: 28px; }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #101722;
  --surface: #182230;
  --surface-2: #202e40;
  --surface-sunk: #141e2c;
  --ink: #e8edf5;
  --ink-2: #bdc9db;
  --ink-3: #98a9bf;
  --line: #2d3c50;
  --line-strong: #455b77;

  --turf: #9bbcf0;
  --turf-ink: #10243e;
  --turf-soft: #233b5d;
  --turf-mid: #557caa;
  --neutral-bar: #3c4d64;

  --flag: #f4c542;
  --flag-ink: #2b1f00;

  --market: #c0afe8;
  --market-soft: #302745;

  --warn-ink: #f2c176;
  --warn-bg: #36270c;
  --warn-line: #6b4d17;
  --bad-ink: #ffa49b;
  --bad-bg: #3b1713;
  --bad-line: #7a3029;
  --info-ink: #a9ccf3;
  --info-bg: #14283f;
  --info-line: #2f5079;

  --focus: #9bbcf0;
  --shadow-sheet: 0 -8px 40px rgb(0 0 0 / 0.5);
  --shadow-pop: 0 10px 30px rgb(0 0 0 / 0.45);
  --scrim: rgb(0 0 0 / 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #101722;
    --surface: #182230;
    --surface-2: #202e40;
    --surface-sunk: #141e2c;
    --ink: #e8edf5;
    --ink-2: #bdc9db;
    --ink-3: #98a9bf;
    --line: #2d3c50;
    --line-strong: #455b77;
    --turf: #9bbcf0;
    --turf-ink: #10243e;
    --turf-soft: #233b5d;
    --turf-mid: #557caa;
    --neutral-bar: #3c4d64;
    --flag: #f4c542;
    --flag-ink: #2b1f00;
    --market: #c0afe8;
    --market-soft: #302745;
    --warn-ink: #f2c176;
    --warn-bg: #36270c;
    --warn-line: #6b4d17;
    --bad-ink: #ffa49b;
    --bad-bg: #3b1713;
    --bad-line: #7a3029;
    --info-ink: #a9ccf3;
    --info-bg: #14283f;
    --info-line: #2f5079;
    --focus: #9bbcf0;
    --shadow-sheet: 0 -8px 40px rgb(0 0 0 / 0.5);
    --shadow-pop: 0 10px 30px rgb(0 0 0 / 0.45);
    --scrim: rgb(0 0 0 / 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}