/* Design tokens of Signal Desk.
   One neutral scale, one accent, three meaning colours (good / bad / warn).
   Dark is the default; light is a full second theme. Colour always carries meaning, never decoration. */
:root {
  /* type scale: 6 sizes, 3 weights */
  --fs-xs: 10px; --fs-sm: 11px; --fs-md: 12.5px; --fs-lg: 14px; --fs-xl: 17px; --fs-2xl: 24px;
  --fw: 400; --fw-m: 500; --fw-b: 650;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* radius, spacing (4 px grid) */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* layout */
  --nav-w: 232px; --rail-w: 68px; --top-h: 56px; --tabbar-h: 62px; --tap: 44px;
  --page-pad: var(--sp-4);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 720px) { :root { --page-pad: var(--sp-5); } }
/* breakpoints used everywhere: 720 (rail), 1000 (tables), 1100 (split layouts, one-row top bar), 1280 (full sidebar) */
@media (min-width: 1100px) { :root { --page-pad: var(--sp-6); } }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0c10; --surface: #11141a; --surface-2: #161a21; --surface-3: #1d222b;
  --line: #222833; --line-2: #2e3643;
  --tx: #e6e9ee; --tx-2: #a2acb9; --tx-3: #8995a3;
  --accent: #7aa7ff; --accent-strong: #3b6fe0; --on-accent: #ffffff; --accent-soft: rgba(122, 167, 255, .13);
  --good: #3fcf9b; --bad: #f4707b; --warn: #e3b04b;
  --good-soft: rgba(63, 207, 155, .12); --bad-soft: rgba(244, 112, 123, .12); --warn-soft: rgba(227, 176, 75, .13);
  --good-fill: #2fb583; --on-good: #031a10; --bad-fill: #c8323f; --on-bad: #ffffff;
  /* hover and pressed fills are explicit colours, never a filter, so the text contrast is known in every state */
  --good-fill-h: color-mix(in srgb, var(--good-fill) 86%, white); --good-fill-a: color-mix(in srgb, var(--good-fill) 72%, white);
  --bad-fill-h: color-mix(in srgb, var(--bad-fill) 86%, black); --bad-fill-a: color-mix(in srgb, var(--bad-fill) 74%, black);
  --accent-h: color-mix(in srgb, var(--accent-strong) 86%, black); --accent-a: color-mix(in srgb, var(--accent-strong) 74%, black);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --scrim: rgba(3, 5, 8, .62);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f3f6; --surface: #ffffff; --surface-2: #f6f7f9; --surface-3: #eceff3;
  --line: #e1e5ea; --line-2: #ccd2da;
  --tx: #151a20; --tx-2: #4f5a67; --tx-3: #5b6776;
  --accent: #1f55c4; --accent-strong: #1f55c4; --on-accent: #ffffff; --accent-soft: rgba(31, 85, 196, .09);
  --good: #08694a; --bad: #b42a38; --warn: #7f5506;
  --good-soft: rgba(11, 122, 82, .09); --bad-soft: rgba(192, 48, 62, .08); --warn-soft: rgba(127, 85, 6, .10);
  --good-fill: #0a7a52; --on-good: #ffffff; --bad-fill: #b42a38; --on-bad: #ffffff;
  --good-fill-h: color-mix(in srgb, var(--good-fill) 86%, black); --good-fill-a: color-mix(in srgb, var(--good-fill) 74%, black);
  --bad-fill-h: color-mix(in srgb, var(--bad-fill) 86%, black); --bad-fill-a: color-mix(in srgb, var(--bad-fill) 74%, black);
  --accent-h: color-mix(in srgb, var(--accent-strong) 88%, black); --accent-a: color-mix(in srgb, var(--accent-strong) 76%, black);
  --shadow: 0 10px 30px rgba(20, 30, 50, .16);
  --scrim: rgba(20, 28, 40, .42);
}

/* Names used by the older views and by the chart theme (web/js/chart/kline-theme.js); they follow the new tokens. */
:root {
  --fs-1: var(--fs-xs); --fs-2: var(--fs-sm); --fs-3: var(--fs-md); --fs-4: var(--fs-lg); --r-1: 4px; --r-2: 6px;
  --panel: var(--surface); --raised: var(--surface-2); --hover: var(--surface-3);
}

/* a touch screen keeps the larger sizes: small text is hard to hit and to read there */
@media (pointer: coarse) { :root { --fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 26px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 8px); }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--tx);
  font: var(--fw) var(--fs-md)/1.45 var(--font); font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* text helpers */
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mute { color: var(--tx-2); }
.faint { color: var(--tx-3); }
.up { color: var(--good); }
.down { color: var(--bad); }
.warn { color: var(--warn); }
.b { font-weight: var(--fw-b); }
.sm { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.grow { flex: 1; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}