/* Design tokens + base. Board grey, navy ink, triple-letter blue, ivory tiles. */
:root {
  color-scheme: light dark;

  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f5f7f9;
  --ink: #13202b;
  --ink-2: #44525f;
  --ink-3: #5f6c78;
  --line: #d6dde3;
  --line-strong: #b9c3cc;

  --accent: #1d5c8a;
  --accent-ink: #ffffff;
  --accent-soft: #e2edf6;

  --up: #1a6e44;
  --up-soft: #e1f2e8;
  --down: #a9372a;
  --down-soft: #fbe7e3;

  --warn-ink: #6e4600;
  --warn-soft: #fff0d2;
  --warn-line: #ecc77f;

  --tile: #f3e1b8;
  --tile-edge: #c9a96a;
  --tile-ink: #2a1e0a;

  --series-1: #1662a8;
  --series-2: #b85514;

  --font-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgb(19 32 43 / 0.06), 0 4px 16px rgb(19 32 43 / 0.06);
  --gutter: clamp(16px, 3vw, 32px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d141b;
    --surface: #141e27;
    --surface-2: #192530;
    --ink: #e3eaf0;
    --ink-2: #b0bcc7;
    --ink-3: #8f9dab;
    --line: #253240;
    --line-strong: #364656;

    --accent: #79b6e6;
    --accent-ink: #0d141b;
    --accent-soft: #19324a;

    --up: #63cc93;
    --up-soft: #143021;
    --down: #f2907f;
    --down-soft: #3b1f1a;

    --warn-ink: #f1c76f;
    --warn-soft: #2c2210;
    --warn-line: #5d4818;

    --tile: #ead6a8;
    --tile-edge: #a88a4f;
    --tile-ink: #24190a;

    --series-1: #4a98dc;
    --series-2: #cf7a35;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 20px rgb(0 0 0 / 0.25);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--font-body);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 650; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 0.95rem; }
p { margin: 0; }
a { color: var(--accent); }
button, input { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 10;
  background: var(--accent); color: var(--accent-ink); padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
}
.skip:focus { top: var(--s2); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 36px; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-weight: 500; font-size: 0.875rem; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-link { border: 0; background: none; padding: 0; min-height: 0; color: var(--accent); text-decoration: underline; font-weight: 500; cursor: pointer; }
.btn-icon { width: 36px; padding: 0; }
.icon { width: 16px; height: 16px; flex: none; }

/* Direction marks: sign + arrow + text; colour only reinforces */
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; white-space: nowrap; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta.flat, .delta.none { color: var(--ink-3); font-weight: 500; }

/* Skeletons: appear after 200 ms so fast loads never flash */
.skel {
  display: block; height: 0.9em; border-radius: 4px; background: var(--line);
  opacity: 0; animation: skel-in 0s 200ms forwards, skel-pulse 1.4s 200ms ease-in-out infinite;
}
@keyframes skel-in { to { opacity: 1; } }
@keyframes skel-pulse { 50% { opacity: 0.5; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  .skel { animation: skel-in 0s 200ms forwards; }
}

/* Notices: whole-element tint + icon + text, never a side stripe */
.notice {
  display: flex; gap: var(--s2); align-items: flex-start;
  padding: var(--s3); border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); font-size: 0.875rem;
}
.notice .icon { margin-top: 2px; }
.notice-error { background: var(--down-soft); border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.notice-ok { background: var(--up-soft); border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.notice-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.notice strong { font-weight: 600; }