/* FOOTYUP · design tokens — the ONE source of colour, type, spacing and role values.
   Variables only: no element or class rule lives here, so every surface loads it first — the app
   (footyUP.dev.html), the admin (admin.dev.html) and the static landings alike. A new colour enters
   here as a variable (CLAUDE.md "CSS-token rules"). The classes that read the type tokens are in
   type-roles.css. */

:root {
  /* Dark-theme page base. Graphite, not coal-black — softer, more premium,
     and in tune with the brand's existing cool-dark accents (#14161F). The
     light theme overrides --ink below; #08080A stays only as ink-on-light text
     (--bone) and accent-on-text (--accent-text). */
  --ink: #191B21;
  --bone: #F4F1EB;
  --bone-dim: rgba(244, 241, 235, 0.65);
  --bone-faint: rgba(244, 241, 235, 0.12);
  /* Border for EDITABLE form controls — darker than --bone-faint so inputs the
     user can actually change read as active. Read-only fields keep --bone-faint.
     0.38 = the WCAG 1.4.11 non-text minimum with margin: 3.30 on ink, 3.25 on surface-faint,
     3.23 on surface-hover, 3.26 on ink-deep (0.34 was 2.83–2.90). Measured 2026-09-27. */
  --edit-line: rgba(244, 241, 235, 0.38);
  --accent: #FF4A00;
  --team-alexei-portrait-bg: linear-gradient(135deg, var(--accent), #7C6CFF);
  --team-stefan-portrait-bg: linear-gradient(135deg, #E2DE2A, var(--accent));
  --accent-faint: rgba(255, 74, 0, 0.45);   /* the accent held back: hover edges, not fills */
  --accent-text: #08080A;
  --ink-deep: #08080A;   /* a surface below the page — the cookie bar (consent.css); landings use the same value */
  /* Status tokens — jade (success/active) + gold (warning/pending). These match
     the hardcoded fallbacks every `var(--success, #2DD881)` / `var(--warning,
     #FFB020)` callsite already used, so the dark theme is unchanged; the light
     block below swaps in darker, AA-legible variants for cream backgrounds. */
  --success: #2DD881;
  --warning: #FFB020;
  /* Red, as in a red card. --accent is an orange-red and reads as "the current action"
     everywhere else on the site, so a dismissal drawn in it stops being a dismissal. */
  --danger: #E5352B;
  /* A form field that needs fixing (input borders, inline messages, a missing choice). Brighter
     than --danger, which is too dark for small text on ink. */
  --field-error: #FF2E63;
  --field-error-line: color-mix(in srgb, var(--field-error) 55%, transparent); /* its hairline: the frame, not the text */
  --card-yellow: #F2C94C;  /* a yellow card's own colour (Match control sheets), never the accent */
  /* Gold — the admin's pending chips (styles-admin.css). The standings' Gold badge was dropped 2026-09-26. */
  --gold: #F2B233;
  /* /standings zones (owner 2026-09-30): the tier bar steps down from the leader's orange. */
  --zone-1: var(--accent);
  --zone-3: var(--accent-faint);
  --zone-5: var(--bone);
  --zone-10: rgba(244, 241, 235, 0.55);
  --zone-20: rgba(244, 241, 235, 0.32);
  --zone-50: rgba(244, 241, 235, 0.18);
  --gold-glow: rgba(242, 178, 51, 0.45);
  /* A past night's column in a member's chart (the cabinet's distance per game): bone held back, the last night is the accent. */
  --chart-bar: rgba(244, 241, 235, 0.32);
  /* The ONE corner radius on the site. Square corners remain the rule (UI_RULES.md); this
     token exists so the owner-approved metric tiles on the player profile share one value
     instead of scattering literals the UI gate would have to learn one by one. */
  --radius: 10px;
  --pad-x: 56px;
  /* Rendered height of the sticky .fu-header (styles.css). The header sits in
     normal flow above the hero, so full-viewport sections must subtract it —
     otherwise the hero overhangs the fold by exactly this much and scrolling
     to its bottom strip slides the headline under the sticky bar. Mirrors the
     header's padding breakpoints (see overrides at 900px / 480px below). */
  --header-h: 84px;
  /* Type tokens. Archivo = signature editorial display (menu + headings),
     Manrope = clean modern body, Cormorant = serif-italic accent. Every
     component references these vars; no hardcoded family names. */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  /* Numeric/mono treatment (moneo numerals). Defined so the ~12 bare
     `var(--font-mono)` callsites resolve to JetBrains Mono instead of silently
     inheriting Manrope — keeps the numeric identity consistent site-wide (#45). */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  /* UI kit roles (UI_RULES.md "Use the shared system"). Values are the reference pages' own:
     the home page, /schedule and /standings. Each role's class lives in styles.css. */
  --fs-eyebrow: 11px;
  --tr-eyebrow: 0.22em;
  /* The page head of a working screen: /standings, /reports, /schedule (.page-intro--compact). */
  --fs-page-h1: clamp(36px, 5vw, 72px);
  --lh-page-h1: 0.95;
  --tr-page-h1: -0.045em;
  /* A section heading inside an interior page — below the page head at every width
     (72/48 at 1440, 36/28 at 390). The player page's section head is the source. */
  --fs-section-h2: clamp(28px, 3.5vw, 48px);
  --lh-section-h2: 0.95;
  --tr-section-h2: -0.03em;
  /* The standfirst under a page head (the compact page intro's paragraph). */
  --fs-lead: 16px;
  --lh-lead: 1.55;
  /* Card title, stat and label: the schedule game card's title and price, the standings podium's
     label. The closing banner is the home page's. */
  --fs-card-title: 17px;
  --lh-card-title: 1.1;
  --tr-card-title: -0.01em;
  --fs-stat: 20px;
  --tr-stat: -0.02em;
  /* The figure that IS a tile's content (owner, 2026-09-28: one large size for every such number) — the
     player page's record tile, where it was measured. Archivo's figures are tabular by default. */
  --fs-figure: 40px;
  --fs-axis: 11px;   /* a chart's own numbers: ticks, dates, a value over its column (.t-axis) */
  --tr-figure: -0.02em;
  --fs-label: 10px;
  --tr-label: 0.18em;
  --fs-banner: clamp(56px, 8vw, 144px);
  --lh-banner: 0.88;
  --tr-banner: -0.05em;
  /* A control's label (the reference List/Map switch): segmented choices. */
  /* A heading inside a long document (the privacy notice, the founders' letter; the Terms next):
     many per page, so quieter than a section head, still caps 900 over the body. */
  --fs-doc-h2: 24px;
  --tr-doc-h2: -0.01em;
  --fs-control: 11px;
  --tr-control: 0.16em;
  /* A flat darkening layer laid over a hero photo, used where a gradient scrim alone leaves small
     text under 4.5:1 (the /corporate portrait crop on phones, measured 2026-09-27). */
  --scrim-photo-flat: rgba(8, 9, 11, 0.2);
  /* Faint surface tints for hover / inset states — use these instead of a
     hardcoded rgba(244,241,235,X). (Moved here from styles-light.css in 3.21.x.) */
  --surface-faint: rgba(244, 241, 235, 0.03);
  --surface-hover: rgba(244, 241, 235, 0.04);
  /* Initials-avatar grounds: four near-black tints cycled down a list so neighbours differ. */
  --av-tint-1: #2A2030;
  --av-tint-2: #1F2233;
  --av-tint-3: #251F2A;
  --av-tint-4: #241D26;
  /* The tactical map (game-lineup.jsx, owner 2026-10-02): the HALF is the team — bottom yellow
     (side 0), top red (side 1), a third side waiting as «Next on» in blue. The admin's own --crimson
     and --cobalt (styles-admin.css) are the same values; these names keep the two apart. Each carries
     --accent-text on it at ≥ 5:1. --pitch-ground is the grass under the tiles. */
  --team-amber: #E2DE2A;
  --team-crimson: #FF2E63;
  --team-cobalt: #3B7AFF;
  /* The keeper's shirt (owner's reference, 2026-10-03): the occupied goal of any side, never a bench. */
  --team-keeper: #45D96B;
  --pitch-ground: #1C2420;
}

@media (max-width: 900px) {
  /* 14 + 47 + 14 + 1 = 76, plus the safe-area the header's top padding carries
     (styles.css:3277). Without the env() here the token and the measured height
     disagree by the notch for one frame on every notched phone. */
  :root { --pad-x: 32px; --header-h: calc(76px + env(safe-area-inset-top, 0px)); }
}

@media (max-width: 480px) {
  /* 10 + 47 + 10 + 1 = 68, plus the safe-area from styles-3.css:565. */
  :root { --pad-x: 16px; --header-h: calc(68px + env(safe-area-inset-top, 0px)); }
  /* The page head on a phone: every page's top is /schedule's (owner, 2026-09-27). Defined only
     here, so each head reads them with its own wider-screen value as the fallback. */
  :root {
    --head-pad-top: 20px;     /* header → eyebrow */
    --head-pad-bottom: 14px;
    --head-eb-gap: 12px;      /* eyebrow → H1 */
    --head-lead-gap: 28px;    /* H1 → lead */
    --fs-lead: 13px;
    --fs-figure: 28px;
    --fs-axis: 9px;
  }
}

/* Non-Latin scripts: Archivo (display) and Manrope (sans) don't cover Arabic
   or Devanagari, so swap in a Noto face that does. Latin glyphs (e.g. the
   FOOTYUP wordmark) fall through to Archivo/Manrope. Numerics keep the mono
   var untouched. */
:root[lang="ar"] {
  --font-display: 'Noto Sans Arabic', 'Archivo', system-ui, sans-serif;
  --font-sans: 'Noto Sans Arabic', 'Manrope', system-ui, sans-serif;
}
:root[lang="hi"] {
  --font-display: 'Noto Sans Devanagari', 'Archivo', system-ui, sans-serif;
  --font-sans: 'Noto Sans Devanagari', 'Manrope', system-ui, sans-serif;
}