/* SportFed Game-Day Kinetic — design tokens.
 *
 * The single source of truth for color, typography, radii, spacing,
 * and motion tokens consumed by every portal. See
 * design/system/design-statement.md for the authoritative spec; the
 * canonical visual reference lives in design/system/claude-design/.
 *
 * Token strategy:
 *
 *   1. Names use the `--sf-*` prefix exclusively. Material-3-style
 *      aliases (`--primary`, `--surface`, `--on-surface`, …) were
 *      removed once every consumer migrated; CI's
 *      `check:css-tokens` gate keeps them from coming back.
 *   2. Per-sport theming rotates the HUE of `--sf-fire` (and its
 *      deep/soft companions) — `@sportfed/active-sport`'s
 *      applySportTheme() writes the hue to `<html>` so every fire
 *      surface picks up the rotation automatically. There are no
 *      per-sport color overrides for any other token.
 */

/* Self-hosted type + icon faces (no fonts.googleapis.com / gstatic at runtime;
 * air-gapped installs render identically). Files + licences: ./fonts/<family>/.
 * Text faces are the latin subset of the variable fonts; font-display: swap.
 * The icon font uses font-display: block so ligature names ("home",
 * "emoji_events") never paint as text while the glyph font loads.
 * The url() paths are relative to this file; build-portal.mjs copies fonts/
 * next to tokens.css in every portal dist. */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('./fonts/material-symbols-outlined/font.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('./fonts/playfair-display/font.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('./fonts/playfair-display/font-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/inter-tight/font.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('./fonts/jetbrains-mono/font.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ───────────────────────────────────────────────────────────────
   * Game-Day Kinetic — canonical tokens
   * ─────────────────────────────────────────────────────────────── */

  /* Surfaces — warm off-white paper tones */
  --sf-paper: #f6f3ed;
  --sf-paper-deep: #ece7dc;
  --sf-paper-card: #fdfbf6;

  /* Rules + dividers */
  --sf-line: #1a1614;
  --sf-line-soft: rgba(26, 22, 20, 0.12);
  --sf-line-faint: rgba(26, 22, 20, 0.06);

  /* Ink — true near-black for contrast */
  --sf-ink: #0e0c0b;
  --sf-ink-2: #2a2522;
  --sf-ink-3: #5a534d;
  --sf-ink-4: #8a8077;

  /* Ink surface scale (Clubhouse) — two raised steps, a hairline and
   * two secondary-text tints for surfaces that sit ON --sf-ink
   * (stadium-night mode). Derived from --sf-ink + --sf-paper at low
   * alpha; text-2 / text-3 pass AA on --sf-ink-raise. Per-club
   * --club-a / --club-b are runtime custom properties, NOT tokens. */
  --sf-ink-raise: #1b1816;
  --sf-ink-raise-2: #262220;
  --sf-ink-line: rgba(246, 243, 237, 0.12);
  --sf-ink-text-2: rgba(246, 243, 237, 0.74);
  --sf-ink-text-3: rgba(246, 243, 237, 0.58);

  /* Signature — game-day fire (hue rotates per active sport) */
  --sf-fire: #ff3b1f;
  --sf-fire-deep: #c92a10;
  --sf-fire-soft: #ffe4dd;
  /* Foreground on a fire surface — same value whether the hue
   * rotates or not, so safe as a literal. Use when text/iconography
   * sits on --sf-fire or --sf-error. */
  --sf-on-fire: #ffffff;

  /* Data accents — restricted palette for highlights + status */
  --sf-cobalt: #2148ff;
  /* Tint of the cobalt accent. Used as a soft fill behind cobalt
   * text (info pills, secondary callouts) — paired with --sf-cobalt
   * as the foreground. */
  --sf-cobalt-soft: rgba(33, 72, 255, 0.12);
  --sf-amber: #ffb01f;
  --sf-lime: #c9ff3b;

  /* Status semantics (mapped onto the accent palette) */
  --sf-success: #1a8b46; /* AA-safe green for ✓ states on paper */
  --sf-warning: var(--sf-amber);
  --sf-error: var(--sf-fire-deep);

  /* Semantic status + link tokens (design review 2026-10, U0.4).
   * --sf-ok / --sf-warn / --sf-bad are literal (NOT sport-rotated) so
   * a status never inherits the active sport hue. Consoles may
   * override per surface. --sf-link is the one link colour. */
  --sf-ok: #1a8b46;
  --sf-warn: #b36b00;
  --sf-bad: #c92a10;
  --sf-link: var(--sf-cobalt);
  --sf-link-hover: var(--sf-ink);

  /* ───────────────────────────────────────────────────────────────
   * Typography
   * ─────────────────────────────────────────────────────────────── */

  /* Display (editorial italic — restricted to hero + marketing,
   * NEVER tables / forms / operator console UI per design-statement.md) */
  --sf-display: "Playfair Display", "Times New Roman", serif;
  /* UI / body */
  --sf-sans: "Inter Tight", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  /* Mono / telemetry */
  --sf-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ───────────────────────────────────────────────────────────────
   * Radii (sharp, athletic)
   * ─────────────────────────────────────────────────────────────── */
  --sf-r-sm: 4px;
  --sf-r-md: 8px;
  --sf-r-lg: 14px;
  --sf-r-xl: 22px;

  /* ───────────────────────────────────────────────────────────────
   * Shadows
   * ─────────────────────────────────────────────────────────────── */
  --sf-shadow-sm: 0 1px 2px rgba(14, 12, 11, 0.04),
    0 1px 1px rgba(14, 12, 11, 0.03);
  --sf-shadow-md: 0 6px 16px rgba(14, 12, 11, 0.06),
    0 2px 4px rgba(14, 12, 11, 0.04);
  --sf-shadow-lg: 0 24px 60px rgba(14, 12, 11, 0.12),
    0 6px 14px rgba(14, 12, 11, 0.06);
  --sf-shadow-fire: 0 12px 40px rgba(255, 59, 31, 0.18);

  /* ───────────────────────────────────────────────────────────────
   * Motion
   * ─────────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 120ms;
  --duration-med: 150ms;
  --duration-slow: 220ms;

  /* ───────────────────────────────────────────────────────────────
   * Layout
   * ─────────────────────────────────────────────────────────────── */
  --top-nav-h: 64px;
  --side-nav-w: 256px;
  --side-nav-w-collapsed: 64px;
  --canvas-max: 1280px;
}

/* Per-sport hue rotation hook.
 *
 * @sportfed/active-sport's applySportTheme() sets `data-sport` on
 * <html>; the per-sport rules below rotate --sf-fire's hue using OKLCH
 * so every fire-tinted surface follows the active sport without
 * touching paper / ink / accents. Adding a new themed sport: append
 * one block here with the hue values. Codes match
 * protocol/catalogs/sports/sports.yaml.
 *
 * Hues are picked so each sport reads as a recognizable mood: pitch
 * green → lime-shift, water blue → cobalt-shift, etc., while keeping
 * fire's chroma + lightness for AA contrast.
 */
[data-sport="soccer"] {
  --sf-fire: oklch(0.68 0.22 130);       /* pitch green-lime */
  --sf-fire-deep: oklch(0.55 0.20 130);
  --sf-fire-soft: oklch(0.93 0.05 130);
}
[data-sport="basketball"] {
  --sf-fire: oklch(0.68 0.22 35);        /* basket-orange */
  --sf-fire-deep: oklch(0.55 0.20 35);
  --sf-fire-soft: oklch(0.93 0.05 35);
}
[data-sport="baseball"] {
  --sf-fire: oklch(0.68 0.22 18);        /* default fire */
  --sf-fire-deep: oklch(0.55 0.20 18);
  --sf-fire-soft: oklch(0.93 0.05 18);
}
[data-sport="tennis-singles"],
[data-sport="tennis-doubles"] {
  --sf-fire: oklch(0.68 0.22 95);        /* tennis-court yellow */
  --sf-fire-deep: oklch(0.55 0.20 95);
  --sf-fire-soft: oklch(0.93 0.05 95);
}
[data-sport="table-tennis-singles"] {
  --sf-fire: oklch(0.68 0.22 350);       /* paddle-rubber red-pink */
  --sf-fire-deep: oklch(0.55 0.20 350);
  --sf-fire-soft: oklch(0.93 0.05 350);
}
[data-sport="pickleball-singles"],
[data-sport="pickleball-doubles"] {
  --sf-fire: oklch(0.68 0.22 110);       /* pickle green */
  --sf-fire-deep: oklch(0.55 0.20 110);
  --sf-fire-soft: oklch(0.93 0.05 110);
}
[data-sport="ice_hockey"] {
  --sf-fire: oklch(0.68 0.22 230);       /* ice blue */
  --sf-fire-deep: oklch(0.55 0.20 230);
  --sf-fire-soft: oklch(0.93 0.05 230);
}
[data-sport="field_hockey"] {
  --sf-fire: oklch(0.68 0.22 145);       /* turf green */
  --sf-fire-deep: oklch(0.55 0.20 145);
  --sf-fire-soft: oklch(0.93 0.05 145);
}
[data-sport="lacrosse"] {
  --sf-fire: oklch(0.68 0.22 75);        /* lacrosse amber */
  --sf-fire-deep: oklch(0.55 0.20 75);
  --sf-fire-soft: oklch(0.93 0.05 75);
}
[data-sport="volleyball"] {
  --sf-fire: oklch(0.68 0.22 50);        /* volleyball orange */
  --sf-fire-deep: oklch(0.55 0.20 50);
  --sf-fire-soft: oklch(0.93 0.05 50);
}
[data-sport="badminton-singles"],
[data-sport="badminton-doubles"] {
  --sf-fire: oklch(0.68 0.22 280);       /* shuttlecock purple */
  --sf-fire-deep: oklch(0.55 0.20 280);
  --sf-fire-soft: oklch(0.93 0.05 280);
}
[data-sport="chess"] {
  --sf-fire: oklch(0.55 0.05 60);        /* board-tone neutral, low chroma */
  --sf-fire-deep: oklch(0.42 0.04 60);
  --sf-fire-soft: oklch(0.92 0.02 60);
}
[data-sport="american-football"] {
  --sf-fire: oklch(0.55 0.18 25);        /* leather brown-red */
  --sf-fire-deep: oklch(0.42 0.16 25);
  --sf-fire-soft: oklch(0.93 0.04 25);
}
[data-sport="rugby-sevens"],
[data-sport="rugby-fifteens"] {
  --sf-fire: oklch(0.65 0.20 5);         /* rugby red */
  --sf-fire-deep: oklch(0.52 0.18 5);
  --sf-fire-soft: oklch(0.93 0.05 5);
}
[data-sport="ultimate-frisbee"] {
  --sf-fire: oklch(0.78 0.20 100);       /* disc-yellow */
  --sf-fire-deep: oklch(0.62 0.18 100);
  --sf-fire-soft: oklch(0.95 0.05 100);
}
[data-sport="golf"] {
  --sf-fire: oklch(0.68 0.22 140);       /* fairway green */
  --sf-fire-deep: oklch(0.55 0.20 140);
  --sf-fire-soft: oklch(0.93 0.05 140);
}
[data-sport="swimming"] {
  --sf-fire: oklch(0.68 0.22 200);       /* pool blue */
  --sf-fire-deep: oklch(0.55 0.20 200);
  --sf-fire-soft: oklch(0.93 0.05 200);
}
[data-sport="track-field"] {
  --sf-fire: oklch(0.68 0.22 22);        /* track red, near default */
  --sf-fire-deep: oklch(0.55 0.20 22);
  --sf-fire-soft: oklch(0.93 0.05 22);
}

/* Material Symbols ride alongside text in dense in-product chrome */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 20px;
  line-height: 1;
  user-select: none;
}

/* Page defaults */
html,
body {
  font-family: var(--sf-sans);
  background: var(--sf-paper);
  color: var(--sf-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

/* Entry register (sign-in, signup, recovery): pages OUTSIDE the modes.
 * Calm paper ground, body type only (no display italics), one centred
 * ~480px column, no rail slot. The page sets
 * `<html data-register="entry">` before first paint. */
html[data-register='entry'] {
  --sf-display: var(--sf-sans);
  background: var(--sf-paper);
}
html[data-register='entry'] :is(h1, h2, h3, h4) {
  font-style: normal;
}
html[data-register='entry'] app-portal-shell > [slot='rail'] {
  display: none;
}
html[data-register='entry'] app-portal-shell > [slot='main'] {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--entry-width, 30rem);
  margin-inline: auto;
  min-width: 0;
}

*:focus-visible {
  outline: 2px solid rgba(255, 59, 31, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tabular numerals on every numeric block by default — game-day data
 * looks broadcast-grade with consistent column widths */
.sf-mono,
[data-numeric],
table tbody td {
  font-variant-numeric: tabular-nums;
}