/* base.css — reset, design tokens, themes, typography. */

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body.is-locked { overflow: hidden; }

button { font: inherit; color: inherit; margin: 0; }
h1, h2, h3, p { margin: 0; }
svg { display: block; }

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

/* ---- tokens ------------------------------------------------------------ */

:root {
  color-scheme: dark;

  --ground: #0b1519;
  --ground-2: #0e1c21;
  --panel: #101f25;
  --plate: #16272e;
  --plate-2: #1d343c;
  --plate-3: #24404a;
  --line: #213d46;
  /* Colour of the gap between boxes. On dark it is simply the page ground
     showing through; on light the ground is too close to the plates, so it
     needs its own darker value or the box structure stops reading. */
  --sep: #0b1519;

  --chalk: #e6eff1;
  --chalk-dim: #93a9b0;
  --chalk-faint: #627c85;

  --brass: #e3a857;
  --brass-bright: #f2bd73;
  --brass-soft: rgba(227, 168, 87, 0.14);
  --brass-line: rgba(227, 168, 87, 0.38);

  --jade: #4fd1a5;
  --coral: #ff6f6f;
  --coral-soft: rgba(255, 111, 111, 0.16);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 18px 46px -18px rgba(0, 0, 0, 0.75);

  --radius-sm: 8px;
  --radius: 13px;
  --radius-lg: 20px;

  /* Bahnschrift ships with Windows and reads like drafting signage; the
     condensed Avenir cut is the closest thing on macOS. */
  --font-ui: "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --font-num: "Segoe UI Variable Display", "SF Pro Display", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;

  --cell-px: 48px;
}

[data-theme="light"] {
  color-scheme: light;

  --ground: #d9e3e0;
  --ground-2: #e4ecea;
  --panel: #f4f8f7;
  --plate: #ffffff;
  --plate-2: #eaf2f0;
  --plate-3: #dbe8e5;
  --line: #cfdcd9;
  --sep: #a8bcb7;

  --chalk: #0f2129;
  --chalk-dim: #55686e;
  --chalk-faint: #8ba0a4;

  --brass: #a2640f;
  --brass-bright: #8a5409;
  --brass-soft: rgba(162, 100, 15, 0.12);
  --brass-line: rgba(162, 100, 15, 0.4);

  --jade: #16815e;
  --coral: #c2382f;
  --coral-soft: rgba(194, 56, 47, 0.13);

  --shadow-1: 0 1px 2px rgba(20, 45, 55, 0.12);
  --shadow-2: 0 18px 46px -20px rgba(20, 45, 55, 0.35);
}

/* ---- type roles -------------------------------------------------------- */

.eyebrow,
.section-label,
.meter-label,
.chip,
.tool-label,
.tile-label,
.card-eyebrow {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--chalk-faint);
}

.mono, .timer, .meter-value, .cage-sum, kbd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

h2, h3 { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.005em; }

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

.no-motion *, .no-motion *::before, .no-motion *::after {
  animation: none !important;
  transition: none !important;
}