/* Mirror design tokens: light only.
   Source of truth for colour, surface, shadow, radius and motion. See DESIGN.md and components.html. */
@property --glow { syntax: '<color>'; inherits: true; initial-value: transparent; }
:root {
  /* shape + motion (shared) */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-pill: 999px;
  --r-xs: 4px;
  --r-sheet: 22px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --on-count: oklch(0.99 0 0);

  --bg: oklch(0.975 0.008 282);
  --tint-calm: oklch(0.95 0.024 282);
  --tint-caution: oklch(0.962 0.04 88);
  --tint-stop: oklch(0.955 0.028 22);
  --glow-calm: oklch(0.78 0.12 278 / 0.55);
  --glow-caution: oklch(0.88 0.12 88 / 0.85);
  --glow-stop: oklch(0.8 0.12 22 / 0.6);
  --glow-2: oklch(0.86 0.08 300 / 0.5);
  --band-dot: oklch(0.3 0.05 280 / 0.16);
  /* Paper: everything the trader wrote. Indigo is what Mirror observed. */
  --paper: oklch(0.975 0.012 78);
  --paper-2: oklch(0.955 0.022 78);
  --paper-line: oklch(0.9 0.02 76);
  --paper-ink: oklch(0.4 0.05 62);
  --note: var(--paper);
  --note-rule: var(--paper-line);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.972 0.01 282);
  --surface-3: oklch(0.935 0.016 282);
  --line: oklch(0.905 0.014 282);
  --line-strong: oklch(0.84 0.018 282);
  --ink: oklch(0.21 0.025 280);
  --ink-2: oklch(0.42 0.025 280);
  --ink-3: oklch(0.5 0.022 280);
  --accent: oklch(0.49 0.2 278);
  --accent-hover: oklch(0.43 0.2 278);
  --accent-weak: oklch(0.94 0.04 278);
  --on-accent: oklch(0.99 0 0);
  --profit: oklch(0.5 0.13 155);
  --profit-weak: oklch(0.95 0.04 155);
  --loss: oklch(0.52 0.19 25);
  --loss-weak: oklch(0.955 0.03 25);
  --warn: oklch(0.72 0.15 70);
  --warn-ink: oklch(0.48 0.11 60);
  --warn-weak: oklch(0.965 0.045 85);
  --info: oklch(0.5 0.12 245);
  --info-weak: oklch(0.955 0.025 245);
  --focus: oklch(0.6 0.2 278 / 0.45);
  --shadow-raise: 0 24px 48px -20px oklch(0.3 0.08 280 / 0.35), 0 4px 12px -4px oklch(0.3 0.05 280 / 0.12);
  --shadow-key: 0 1px 2px oklch(0.2 0.02 280 / 0.14);
  --shadow-sheet: 0 -14px 30px -16px oklch(0.3 0.08 280 / 0.3);
  --shadow-float: 0 18px 40px -12px oklch(0.25 0.04 280 / 0.28), 0 3px 8px oklch(0.25 0.03 280 / 0.08);
  --scrim: oklch(0.2 0.02 280 / 0.42);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-body); line-height: 1.45; font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.up { color: var(--profit); }
.down { color: var(--loss); }
.muted { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
/* ---------- App shell: sidebar (≥768), bottom tab bar (phone) ---------- */
:root { --side-w: 0px; --side: oklch(0.962 0.013 282); }
@media (min-width: 768px) {
  :root { --side-w: 76px; }
  :root.sb-pinned { --side-w: 248px; }
}
@media (max-width: 767px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* ---------- Type scale (responsive) ----------
   One scale, three steps: phone (default), tablet (640px+), desktop (1024px+).
   Body stays close across devices; headings and hero figures scale more. Hanken Grotesk, tabular numerals. */
:root {
  --fs-2xs: 11px;   /* badges, tab-bar labels */
  --fs-xs: 12px;    /* captions, eyebrows, legends, chip counts */
  --fs-sm: 13px;    /* secondary meta lines, helper text */
  --fs-body: 14px;  /* body copy, rows, buttons, list text */
  --fs-md: 15px;    /* primary row text, names, key figures in rows */
  --fs-lg: 16px;    /* card and section titles, rule sentences, quotes */
  --fs-xl: 18px;    /* large section titles, small hero lines */
  --fs-2xl: 22px;   /* page titles (h1), verdict headlines */
  --fs-3xl: 28px;   /* key figures, large verdicts */
}
@media (min-width: 640px) {
  :root { --fs-2xs: 11.5px; --fs-xs: 12px; --fs-sm: 13px; --fs-body: 14px; --fs-md: 15px; --fs-lg: 16.5px; --fs-xl: 18.5px; --fs-2xl: 24px; --fs-3xl: 32px; }
}
@media (min-width: 1024px) {
  :root { --fs-2xs: 11.5px; --fs-xs: 12.5px; --fs-sm: 13.5px; --fs-body: 14.5px; --fs-md: 15.5px; --fs-lg: 17px; --fs-xl: 19px; --fs-2xl: 26px; --fs-3xl: 34px; }
}
/* Text inputs stay at 16px on phones and tablets: smaller makes iOS Safari zoom the page on focus. */
@media (max-width: 1023px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px !important; }
}