/* Design tokens. Light by default; dark when <html data-theme="dark"> (theme.js
   resolves "auto" from the system before the first paint). Components use only
   these variables, never raw colours. */
:root {
  color-scheme: light;
  --bg: #f6f6f7;
  --surface: #ffffff;
  --surface-2: #f1f1f3;
  --surface-3: #e8e8ec;
  --line: #e3e3e8;
  --line-strong: #cbcbd3;
  --ink: #17171c;
  --ink-2: #4f4f5a;
  --ink-3: #85858f;
  --accent: #c8102e;
  --accent-hover: #a80d26;
  --accent-soft: #fdecef;
  --accent-ink: #ffffff;
  --ring: rgba(200, 16, 46, .28);
  --ok: #157f3c;
  --ok-soft: #e4f5ea;
  --warn: #8a5a00;
  --warn-soft: #fdf1d6;
  --bad: #b4162c;
  --bad-soft: #fde7ea;
  --info: #1d5fb4;
  --info-soft: #e5eefb;
  --shadow-1: 0 1px 2px rgba(20, 20, 30, .05);
  --shadow-2: 0 8px 28px rgba(20, 20, 30, .14);
  --scrim: rgba(15, 15, 20, .45);
  --preview-bg: #ffffff;
  --radius: 12px;
  --radius-sm: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e11;
  --surface: #17171b;
  --surface-2: #1f1f24;
  --surface-3: #2a2a31;
  --line: #2a2a31;
  --line-strong: #3b3b44;
  --ink: #ececf0;
  --ink-2: #b0b0ba;
  --ink-3: #7c7c87;
  --accent: #ef4561;
  --accent-hover: #f6687f;
  --accent-soft: #3a141c;
  --accent-ink: #ffffff;
  --ring: rgba(239, 69, 97, .35);
  --ok: #4cc777;
  --ok-soft: #132a1c;
  --warn: #e9b54a;
  --warn-soft: #2e2510;
  --bad: #f2667b;
  --bad-soft: #36151b;
  --info: #6aa5f5;
  --info-soft: #132238;
  --shadow-1: none;
  --shadow-2: 0 10px 34px rgba(0, 0, 0, .55);
  --scrim: rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1 { font-size: 1.45rem; line-height: 1.25; margin: 0; letter-spacing: -.01em; font-weight: 650; }
h2 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 .75rem; font-weight: 620; }
h3 { font-size: .95rem; margin: 0 0 .4rem; font-weight: 600; }
p { margin: 0 0 .75rem; }
small, .mute { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }
code, .mono { font-family: var(--mono); font-size: .88em; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--ring); }