@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/site/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/site/fonts/archivo-latin.woff2") format("woff2");
}

/* ============================================================================
   MatchSquads · design tokens
   --------------------------------------------------------------------------
   Three layers, in one direction only:

     primitive (a raw value)  →  semantic (what it is for)  →  component

   Nothing outside this file may write a raw hex. Components reference the
   semantic layer; the semantic layer is the only place a rebrand has to touch.

   The primitive layer the app also owns — palette ramps, brand colours, radii
   and curves — is NOT here: it is generated from lib/theme/tokens.dart into
   tokens.generated.css, which loads immediately before this file, and
   `flutter test` fails if the two drift apart. Changing a brand colour means
   changing the Dart and regenerating, not editing CSS.

   What stays here is what only the site has: type scale, spacing, shadows,
   durations, and every semantic and component token below.
   ========================================================================== */

:root {
  /* --- primitive · colour (site-only) ------------------------------------ */
  color-scheme: dark;

  /* The deep blue the light theme uses for accented text. It is the dark
     theme's border tone reused as ink on a pale ground — a site decision, so
     it has no counterpart in the app and is not generated. */
  --blue-700: #1e4266;

  /* The phone frame (phone3d.js, read via getComputedStyle) is a device
     shell, not another surface in the brand's blue — it is finished in
     black like the hardware it is standing in for. */
  --frame-950: #050505;
  --frame-glass-highlight: #405e7d;
  --frame-glass-mid: #0e2135;

  /* --- primitive · type -------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;
  --font-reading: "Archivo", var(--font-sans);

  --size-100: 0.75rem;   /* 12 */
  --size-200: 0.875rem;  /* 14 */
  --size-300: 1rem;      /* 16 */
  --size-400: 1.125rem;  /* 18 */
  --size-500: 1.375rem;  /* 22 */
  --size-600: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  --size-700: clamp(1.9rem, 1.3rem + 2.6vw, 2.75rem);
  --size-800: clamp(2.4rem, 1.3rem + 4.6vw, 4.25rem);

  --weight-body: 500;
  --weight-strong: 700;
  --weight-display: 800;

  /* --- primitive · space (a 4px scale) ----------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- primitive · edge, shadow ------------------------------------------
     The four --radius-* and --hairline come from the app, in
     tokens.generated.css. These two are the site's own: nothing in the app is
     this round. */
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --shadow-brand: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-raise: 0 18px 40px rgba(0, 0, 0, 0.32);
  --shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.45);

  /* --- primitive · motion ------------------------------------------------
     The two curves are generated from the app. The durations are the site's:
     a page that is read has different timings from an app that is operated. */
  --dur-press: 160ms;
  --dur-hover: 200ms;
  --dur-reveal: 460ms;

  /* --- semantic ---------------------------------------------------------- */
  --bg: var(--palette-bg);
  --bg-deep: var(--palette-surface-2);
  --bg-raised: var(--palette-surface-2);
  --surface: var(--palette-surface);
  --surface-dim: var(--palette-surface-dim);
  --surface-high: var(--palette-raised);

  --line: var(--palette-border);
  --line-strong: var(--palette-border-strong);

  --text: var(--palette-ink);
  --text-muted: var(--palette-muted);
  --text-soft: var(--palette-ink-2);
  --text-on-accent: var(--ink-000);
  /* Not the app's G.onLight: that one goes on cream paper, this one on pale
     blue. Same role, different ground, so they are deliberately not shared. */
  --text-on-light: var(--ink-900);

  --accent: var(--blue-500);
  --accent-soft: var(--blue-300);

  /* Versus is the product's own signal colour. It means one thing — a
     challenge between two teams — and it is never used for decoration. */
  --versus: var(--magenta-500);
  --versus-deep: var(--magenta-600);
  --versus-soft: var(--magenta-300);

  --confirm: var(--aqua-500);
  --confirm-deep: var(--aqua-700);
  --highlight: var(--gold-500);
  --highlight-ink: var(--gold-900);

  --focus-ring: var(--blue-300);

  /* --- component --------------------------------------------------------- */
  --page-max: 1180px;
  --reading-max: 62ch;

  --nav-height: 68px;
  --nav-bg: color-mix(in srgb, var(--bg) 82%, transparent);

  /* Three tones of one colour, as in the app: the face, the lip under it and
     the line around both. The formulas mirror GButton exactly. The lip lands
     on #1d8ac8, which is tokens.dart G.actionDeep; the ring is G.outlineFor(),
     a lerp 60% to black, i.e. 40% of the face.

     A variant that changes the face has to restate these two, the way
     GGhostButton passes its own G.outlineFor(background): a custom property
     substitutes where it is declared, so a formula written here keeps
     resolving against the accent no matter what the variant sets later. */

  --button-bg: var(--accent);
  --button-edge: color-mix(in srgb, var(--button-bg) 75%, var(--ink-900));
  --button-outline: color-mix(in srgb, var(--button-bg) 40%, black);
  /* White on --accent is 2.51:1, below AA for body text. Kept on purpose: it
     matches the app's GButton; darken --accent if the contrast has to pass. */
  --button-text: var(--text-on-accent);
  --button-radius: var(--radius-md);
  --button-height: 52px;

  --button-ghost-bg: var(--surface-high);
  --button-ghost-edge: var(--line-strong);
  --button-ghost-text: var(--text-soft);

  --card-bg: var(--surface);
  --card-border: var(--line);
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-5);

  --chip-height: 30px;
  --chip-radius: var(--radius-pill);

  --footer-bg: var(--palette-surface-dim);
}

/* The palette ramp itself flips in tokens.generated.css, which carries the
   same media query. These are the semantic tokens that need a different
   pointer in light theme, not a different ramp: small labels and coloured
   links need darker ink on pale surfaces. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --text-muted: var(--palette-ink-2);
    --accent-soft: var(--blue-700);
    --versus-soft: var(--magenta-600);
    --confirm: var(--aqua-900);
    --highlight: var(--gold-700);
    --focus-ring: var(--blue-500);
    --shadow-raise: 0 18px 40px rgba(11, 34, 51, 0.12);
    --shadow-lift: 0 28px 70px rgba(11, 34, 51, 0.18);
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--text);
    --line: var(--text-soft);
    --line-strong: var(--text-soft);
  }
}