/* ==========================================================================
   Thirty & Five — design tokens
   Light only by default. A dark set is kept as an opt-in: put
   data-theme="dark" on <html> to use it. Every text/ground pair is ≥ 4.5:1
   (large display text ≥ 3:1).
   ========================================================================== */

/* Self-hosted display face: one weight, latin, 14 KB (SIL OFL, see fonts/OFL.txt). */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
/* Condensed-width stand-in shown while the font loads, so lines don't reflow wildly. */
@font-face {
  font-family: "T5 Fallback";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Roboto Condensed Bold"), local("Arial Bold"), local("Arial");
  size-adjust: 78%; ascent-override: 95%;
}

:root {
  /* Raw palette ---------------------------------------------------------- */
  --t5-ink-900: #111316;   /* board black: text, buttons, the scoreboard panel */
  --t5-ink-800: #171a1f;
  --t5-ink-700: #2a2e35;   /* phone body in the hero */
  --t5-ink-500: #5a5e66;   /* muted text on white: 6.5:1 */
  --t5-ink-400: #8a8d94;   /* second headline line only (display size): 3.3:1 */
  --t5-ink-300: #a3a7af;   /* muted text on ink-900: 7.7:1 */
  --t5-paper-0: #ffffff;
  --t5-paper-50: #f6f5f0;  /* tinted surface: selected rows, skeletons */
  --t5-paper-200: #e6e5df; /* section hairlines */
  --t5-paper-300: #c9c8c0; /* input borders */
  --t5-lamp-500: #ffb81c;  /* scoreboard lamp: fills and the board only (ink on it: 10.7:1) */
  --t5-lamp-800: #7a4f00;  /* lamp as text on white: 7.1:1 */
  --t5-red-700: #b3261e;   /* error text on white: 6.5:1 */

  /* Semantic ------------------------------------------------------------- */
  --bg: var(--t5-paper-0);
  --surface: var(--t5-paper-0);
  --surface-2: var(--t5-paper-50);
  --line: var(--t5-paper-200);
  --line-input: var(--t5-paper-300);
  --line-strong: var(--t5-ink-900);
  --text: var(--t5-ink-900);
  --text-muted: var(--t5-ink-500);
  --text-soft: var(--t5-ink-400);
  --accent: var(--t5-lamp-500);
  --accent-text: var(--t5-lamp-800);
  --on-accent: var(--t5-ink-900);
  --btn-bg: var(--t5-ink-900);
  --btn-text: #ffffff;
  --board: var(--t5-ink-900);
  --board-text: #f2f1ec;
  --board-muted: var(--t5-ink-300);
  --chip-bg: var(--t5-ink-900);
  --chip-text: #f2f1ec;
  --danger: var(--t5-red-700);
  --focus: var(--t5-ink-900);

  /* Type ----------------------------------------------------------------- */
  --font-display: "Big Shoulders Display", "T5 Fallback", "Arial Narrow", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-score: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-hero: clamp(3.5rem, 2.2rem + 5.4vw, 6.5rem);   /* 56px at 375 → 104px at 1280+ */
  --fs-h1: clamp(2.75rem, 2rem + 3vw, 4rem);
  --fs-h2: clamp(2.25rem, 1.8rem + 1.6vw, 2.75rem);
  --fs-lede: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --lh-tight: 0.9;
  --lh-body: 1.5;

  /* Space, radius, motion ------------------------------------------------ */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 96px;
  --gutter: clamp(20px, 6vw, 96px);
  --r-1: 4px; --r-2: 8px; --r-3: 14px;
  --tap: 44px;
  --field-h: 56px;
  --dur: 160ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --page-max: 1120px;

  color-scheme: light;
}

/* Optional dark set (not applied automatically). */
:root[data-theme="dark"] {
  --bg: var(--t5-ink-900);
  --surface: var(--t5-ink-800);
  --surface-2: #23272e;
  --line: #2c3139;
  --line-input: #3a3f48;
  --line-strong: #f2f1ec;
  --text: #f2f1ec;
  --text-muted: var(--t5-ink-300);
  --text-soft: #7d818a;
  --accent: #ffc23d;
  --accent-text: #ffc23d;
  --btn-bg: #f2f1ec;
  --btn-text: var(--t5-ink-900);
  --board: #000000;
  --chip-bg: #ffc23d;
  --chip-text: var(--t5-ink-900);
  --danger: #ff8a80;
  --focus: #ffc23d;
  color-scheme: dark;
}