/* Design tokens: ROLE names, loaded first on every page (DESIGN_ROADMAP 2.1).
   Use the role, never a hex: a fill + its label = --accent + --on-accent.
   Values = the 10-10 palette (impeccable-preview/app/DESIGN_TOKENS.md): landing
   aubergine brand, landing dark-theme neutrals. Contrast pairs are listed there
   and re-checked on every page by scripts/verify_contrast.py.
   Legacy names (left side of a var() alias) kept the old distinct shades apart
   in 2.1a; they now collapse onto the roles. New code uses the roles only. */
:root {
  color-scheme: dark;
  /* brand */
  --accent: #b9a9e0;         /* links, rings, selected outlines, accent text, primary fill */
  --accent-strong: #cdc0ec;  /* hover/pressed of --accent */
  --on-accent: #1b1626;      /* label on an --accent / --accent-strong fill: 8.25 / 10.4:1 */
  --accent-wash: rgba(185, 169, 224, .12);
  --brand: #5f4f80;          /* large brand surfaces, white label 7.2:1 */
  --brand-deep: #4b3d68;     /* beta banner, white label 9.7:1 */
  /* status */
  --ok: #4ade80; --warn: #f5a524; --credit: #f0c040;
  --danger: #ff8a8a;         /* destructive text + outline */
  --danger-solid: #b9373a;   /* the filled destructive / failed state, white label 5.7:1 */
  --twitch: #9146ff; --youtube: #ff3b3b; --tiktok: #25f4ee;  /* logos only, never fills */
  /* neutrals */
  --bg: #0f0d14;
  --surface: #181520;
  --surface-2: #1e1a2b;
  --surface-3: #262136;
  --surface-hover: #2f2942;  /* hover of a --surface-3 control */
  --field: #120f19;
  --border: #2a2536;
  --border-strong: #3b3450;
  --scrim: rgba(8, 6, 12, .72);
  --fg: #ece8f4;
  --fg-2: #cfc8de;
  --muted: #a59cbb;
  --faint: #968fa8;
  /* legacy names -> roles */
  --accent-text: var(--accent); --link: var(--accent);
  --go: var(--accent); --go-hover: var(--accent-strong);
  --danger-soft: var(--danger); --danger-pale: var(--danger); --danger-text: var(--danger);
  --bg-sunk: var(--bg); --bg-pane: var(--bg);
  --surface-bar: var(--surface); --surface-nav: var(--surface);
  --border-alt: var(--border-strong); --border-dim: var(--border);
  --fg-cool: var(--fg); --fg-hi: var(--fg);
  --muted-cool: var(--muted); --muted-blue: var(--muted);
  /* type: meta 12 / label 13 / ui 14 / body 15 / h2 17 / page title 22 */
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-meta: 12px; --fs-label: 13px; --fs-ui: 14px; --fs-body: 15px; --fs-h2: 17px; --fs-title: 22px;
  /* shape + space */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --gutter: 24px;
  --btn-h-sm: 32px; --btn-h: 36px; --btn-h-lg: 44px;
  --header-h: 56px; --tabs-h: 44px;
}
@media (max-width: 767px) {
  :root { --gutter: 16px; --btn-h-sm: 36px; --btn-h: 40px; }
}
::selection { background: rgba(185, 169, 224, .38); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* One 2px-stroke icon set: <svg class="i"><use href="/img/icons.svg#check"/></svg> */
.i { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.i-lg { width: 20px; height: 20px; }