/* Battle RBM theme: the shared CSS for every page in this repository.
 *
 * Two things live here, because both public/index.html and public/404.html link
 * this file and neither page should repeat them:
 *
 *  - the brand palette tokens, guarded against scripts/brand.py by
 *    scripts/check-brand.py: edit BOTH together, then re-run
 *    `python3 scripts/generate-pwa-assets.py` when the rendered assets
 *    (splash screens / install screenshots / social card) must show the change;
 *  - the shared base: the font faces, the reset, the page frame and the button
 *    shell. Page layout and page-only rules stay inline in each page.
 */
:root {
  --background: 222 47% 4%;
  --foreground: 210 40% 96%;
  --card: 222 47% 7%;
  --card-foreground: 210 40% 96%;
  --primary: 217 91% 60%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;
  --border: 217 33% 25%;
  --ring: 217 91% 60%;
  /* Brand accent: the favicon's amber gradient */
  --accent-from: #f59e0b;
  --accent-to: #d97706;
  /* Shield mark gradient endpoints, used by the shared button shell and the
     favicon / manifest artwork */
  --shield-a: #0f172a;
  --shield-b: #1e293b;
  /* Control boundary: the border of interactive controls (the language
     buttons) must clear 3:1 against the page background (WCAG 2.2 AA
     SC 1.4.11); decorative panel borders keep --border. */
  --control-border: 217 33% 45%;
}

/* Self-hosted faces, the same as the application (Inter UI + JetBrains Mono).
   Declared here so every page paints in the brand fonts, the themed 404
   included; index.html also preloads them. */
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 100 900; src: url('/fonts/inter/inter-v20-latin.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; src: url('/fonts/jetbrains_mono/jetbrains-mono-v24-latin.woff2') format('woff2'); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Dutch and German compounds are longer than the English the layout was
     drawn for. A word that cannot fit breaks inside itself rather than widen
     the page, which is what pushed the 320 px layout sideways. */
  overflow-wrap: break-word;
}

/* Headings hyphenate with the document's own language (en-GB, nl, de, fr, es),
   so a long compound splits at a syllable instead of at an arbitrary letter. */
h1,
h2,
h3 {
  hyphens: auto;
}

/* WCAG 2.2 AA: visible, high-contrast focus indicator on every control. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* Skip link: the first tab stop, off screen until it takes focus (WCAG 2.4.1).
   The staged pages carry the same control from /next/shared.css; the coming-soon
   page has no header bar to skip past, so the rule lives here for it alone. */
.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 30;
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--control-border));
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip:focus { top: 0.75rem; }

/* Button shell shared by the hero CTA and the 404 action. Each page sets its
   own display and hover behaviour on top of it. */
.btn {
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 0.5rem;
  padding: 0.72rem 1.4rem;
  text-decoration: none;
  color: var(--shield-a);
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
}