/* Design tokens. Everything visual derives from these; components never hold a raw colour or size.
   Palette: a deep navy for structure (side navigation, text), a steel blue for action and focus,
   cool greys for surfaces, and a restrained green and red kept only for gains and losses. The
   colours are the brand's placeholder until the real brand is decided (ADR 0055 D5): changing them
   means changing this file only.
   Dark values are written twice on purpose: once for "automatic" (the system setting) and once for
   an explicit choice, because CSS cannot share one block between a media query and an attribute. */
:root {
  color-scheme: light dark;

  /* colour: light */
  --bg: #f4f5fb; --surface: #ffffff; --surface-2: #eff1f9; --ink: #0b1020; --muted: #5a6680; --line: #e3e6f1; --line-strong: #ccd2e4;
  --accent: #4f46e5; --accent-hover: #4338ca; --accent-ink: #ffffff;
  --accent-soft: rgba(79, 70, 229, .24); --accent-fade: rgba(79, 70, 229, 0);
  --up: #0a8f62; --down: #d02f43;
  --info-bg: #eceefe; --info-ink: #2a2d7a;
  --warn-bg: #fff4d6; --warn-ink: #6b4a00;
  --danger-bg: #fde8eb; --danger-ink: #7d1f2c;
  --focus: #4f46e5;
  --brand-from: #4f46e5; --brand-to: #06b6d4;
  --nav-bg: rgba(255, 255, 255, .72); --nav-ink: #0b1020; --nav-muted: #5a6680; --nav-hover: rgba(79, 70, 229, .06); --nav-active: rgba(79, 70, 229, .11); --nav-line: rgba(11, 16, 32, .07);
  --glow-1: rgba(79, 70, 229, .13); --glow-2: rgba(6, 182, 212, .10); --glass: rgba(255, 255, 255, .78); --rim: rgba(255, 255, 255, .9);
  --shadow: 0 1px 2px rgba(11, 16, 32, .04), 0 12px 32px rgba(40, 50, 110, .08);

  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .75rem; --text-sm: .84rem; --text-md: .94rem; --text-lg: 1.1rem; --text-xl: 1.55rem; --text-2xl: 2rem;

  /* space (4 px grid), radius, motion */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 8px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px;
  --t-fast: 120ms; --t-med: 200ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --tap: 40px; /* smallest comfortable touch target */
  --top-h: 56px; --side-w: 232px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #05070d; --surface: #0c1019; --surface-2: #131929; --ink: #eef2fb; --muted: #8e9ab4; --line: #1a2236; --line-strong: #2b3652;
    --accent: #8b9bff; --accent-hover: #a5b1ff; --accent-ink: #0a0f24;
    --accent-soft: rgba(139, 155, 255, .30); --accent-fade: rgba(139, 155, 255, 0);
    --up: #35e0a1; --down: #ff6b7a;
    --info-bg: #121a33; --info-ink: #cfd8ff;
    --warn-bg: #2f2710; --warn-ink: #f4dc92;
    --danger-bg: #36161c; --danger-ink: #ffc2c9;
    --focus: #a5b1ff;
    --brand-from: #6d5dfc; --brand-to: #22d3ee;
    --nav-bg: rgba(8, 11, 19, .72); --nav-ink: #eef2fb; --nav-muted: #7f8ba6; --nav-hover: rgba(255, 255, 255, .05); --nav-active: rgba(139, 155, 255, .14); --nav-line: rgba(255, 255, 255, .06);
    --glow-1: rgba(109, 93, 252, .20); --glow-2: rgba(34, 211, 238, .11); --glass: rgba(18, 24, 40, .62); --rim: rgba(255, 255, 255, .06);
    --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #05070d; --surface: #0c1019; --surface-2: #131929; --ink: #eef2fb; --muted: #8e9ab4; --line: #1a2236; --line-strong: #2b3652;
  --accent: #8b9bff; --accent-hover: #a5b1ff; --accent-ink: #0a0f24;
  --accent-soft: rgba(139, 155, 255, .30); --accent-fade: rgba(139, 155, 255, 0);
  --up: #35e0a1; --down: #ff6b7a;
  --info-bg: #121a33; --info-ink: #cfd8ff;
  --warn-bg: #2f2710; --warn-ink: #f4dc92;
  --danger-bg: #36161c; --danger-ink: #ffc2c9;
  --focus: #a5b1ff;
  --brand-from: #6d5dfc; --brand-to: #22d3ee;
  --nav-bg: rgba(8, 11, 19, .72); --nav-ink: #eef2fb; --nav-muted: #7f8ba6; --nav-hover: rgba(255, 255, 255, .05); --nav-active: rgba(139, 155, 255, .14); --nav-line: rgba(255, 255, 255, .06);
  --glow-1: rgba(109, 93, 252, .20); --glow-2: rgba(34, 211, 238, .11); --glass: rgba(18, 24, 40, .62); --rim: rgba(255, 255, 255, .06);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35);
}

:root[data-theme="light"] { color-scheme: light; }