/**
 * tokens.css — Bluefundr design system foundation
 *
 * Single source of truth for the design-system tokens, the self-hosted fonts,
 * and the brand accent. Loaded as a standalone stylesheet AFTER the legacy
 * bundle (main-bundled.css) so that the values here win over legacy rules
 * without needing !important. Custom properties and @font-face resolve
 * order-independently, so loading last is safe for the rest of the system.
 *
 * ===== BRAND REDESIGN (2026) =====
 * Warm off-white shell, deep "club crest" navy, gold reserved for prize/money
 * moments, red reserved for the single conversion action per page. Teal is
 * retired: admin is signalled by dark header CHROME, not by an accent colour,
 * so both the public and organiser sides read the same navy --accent.
 * Source of truth: design_handoff_brand_redesign/README.md.
 *
 * This file defines tokens, loads fonts, switches the body font/background, and
 * exposes --accent. Component restyling lives in the ITCSS component layers.
 */

/* ===== SELF-HOSTED FONTS ===== */
/* Redesign faces. Archivo (display/headings/numerals) + Public Sans (body/UI),
   self-hosted variable woff2 (latin subset — covers €, Irish fadas). The README
   names Google Fonts; we self-host the same faces to honour the project rule
   "never load Google Fonts". */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/Archivo-Variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/PublicSans-Variable.woff2') format('woff2');
}

/* Legacy faces — kept so component CSS that still names 'Barlow Condensed' /
   'Hanken Grotesk' literally keeps rendering while pages migrate to the tokens.
   New work must use --font-display / --font-body, never these names. */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/BarlowCondensed-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/BarlowCondensed-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/BarlowCondensed-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/HankenGrotesk.woff2') format('woff2');
}

/* ===== TOKENS ===== */
:root {
    /* Light-only. Declaring the colour scheme as light stops browsers (and
       Chrome "Auto Dark Theme") from auto-darkening native controls in OS dark
       mode, so every element looks identical regardless of system theme. */
    color-scheme: light;

    /* ---- neutrals (warm off-white shell) ---- */
    --ink: #1D2433;          /* primary text */
    --ink-heading: #131A2A;  /* headings may go one step darker */
    --body: #5F6572;         /* secondary / body text */
    --muted: #A0A4AC;        /* labels, fine print */
    --line: #E7E4DB;         /* card borders, 1px */
    --line-soft: #F0EDE5;    /* hairline row dividers */
    --line-strong: #D9D5C9;  /* ghost/removed borders, stronger dividers */
    --bg: #FBFAF6;           /* page background — warm off-white, never pure white, never cool grey */
    --bg-sunken: #F6F4ED;    /* quiet inset panels (countdown tiles, sub-panels) */
    --surface: #F6F4ED;      /* legacy alias for inset fill (was cool grey) */
    --card: #FFFFFF;         /* cards */

    /* ---- brand navy (club crest blue) ---- */
    --navy: #17469E;         /* buttons, links, active tabs, selected states, logo */
    --navy-strong: #123A85;  /* hover/active on navy */
    --navy-soft: #EAEFF9;    /* soft navy tint (chips, hero eyebrow, selected fills) */
    --navy-deep: #131A2A;    /* dark marketing sections, admin header bar */
    --navy-deep-2: #16264A;  /* alternate dark section / inner card on dark */
    --navy-section: #101C33; /* marketing dark section background (competitions, pricing) */
    --body-on-dark: #9BA7BC; /* muted body text on dark sections */
    --line-on-dark: rgba(255,255,255,0.14); /* hairline dividers on dark sections */

    /* ---- red — THE conversion action only (one per page) ---- */
    --red: #CF3F34;
    --red-strong: #B8352B;   /* hover */
    --red-ink: #FFF7F4;      /* text on red */

    /* ---- gold — prize / money moments only ---- */
    --gold: #F3C64F;         /* jackpot numerals on dark, Play button, admin active-nav underline */
    --gold-pale: #FFE9A8;    /* prize-moment gradient highlight (pill/medallion top stop) */
    --gold-ink: #6B4A16;     /* deep text/icon ON a gold pill or medallion (never on light) */
    --gold-deep: #A8823A;    /* gold accents/labels on LIGHT backgrounds (gold text on light is forbidden) */
    --gold-deep-2: #C9922B;  /* in-play dot, ticking seconds, arrows */
    /* prize-moment fill: the one permitted decorative gold gradient (pill + medallion) */
    --gold-grad: linear-gradient(180deg, var(--gold-pale), var(--gold));

    /* ---- podium medals (leaderboard top-3 rank chips) ---- */
    /* 1st reuses the gold tokens (--gold bg / --gold-ink text). Silver + bronze
       are their own warm-tuned pairs — chips only, dark text on a light metal fill. */
    --medal-silver: #E4E7EF;
    --medal-silver-ink: #5A6B96;
    --medal-bronze: #E7C6B4;
    --medal-bronze-ink: #8A4A2F;

    /* ---- entrant avatar identity palette (leaderboard "who's in" circles) ---- */
    /* Deterministic per-entrant tint (initials on a coloured disc). Identity only,
       never an interactive state. Muted so a full list reads calm, not carnival. */
    --avatar-1: #17469E;
    --avatar-2: #0F7A45;
    --avatar-3: #B0202A;
    --avatar-4: #5A6B96;
    --avatar-5: #7A4FB0;
    --avatar-6: #C8402F;
    --avatar-7: #0E8A8A;
    --avatar-8: #8A6A12;

    /* ---- the single accent components read (navy, both sides) ---- */
    --accent: var(--navy);
    --accent-strong: var(--navy-strong);
    --accent-soft: var(--navy-soft);

    /* Backward-compat aliases so pages still naming the old accent tokens render
       on the new palette (teal is retired → also navy). Migrate off these to
       --accent / --navy as each page is restyled. */
    --blue: var(--navy);
    --blue-strong: var(--navy-strong);
    --blue-soft: var(--navy-soft);
    --teal: var(--navy);
    --teal-strong: var(--navy-strong);
    --teal-soft: var(--navy-soft);

    /* ---- status tokens (platform-wide, public + admin) ----
       Paired: a chip is always (soft bg + base text). Warm-tinted to sit on the
       off-white shell. Red is NEVER a status. */
    --status-open: #237A3C;          /* Open / Sales open */
    --status-open-soft: #E7F3E9;
    --status-inplay: #8A5F14;        /* In play / Ready to run / Live */
    --status-inplay-soft: #F7EFDA;
    --status-inplay-dot: #C9922B;
    --status-inplay-border: #C9922B; /* actionable row border (1.5px) */
    --status-closed: #5F6572;        /* Closed / Finalised (no dot) */
    --status-closed-soft: #EFECE3;
    --status-removed: #A8ABA0;       /* Removed / Archived (ghost) */
    --status-removed-line: #D9D5C9;

    /* Legacy status aliases — mapped onto the new palette so existing components
       (paid/overdue/cancelled chips, success/error toasts) re-skin automatically. */
    --status-success: var(--status-open);
    --status-success-soft: var(--status-open-soft);
    --status-error: #CF3F34;
    --status-error-strong: #B8352B;
    --status-error-soft: #FBEAE8;
    --status-error-line: #F1CFCB;
    --status-neutral-soft: var(--status-closed-soft);

    /* booking-purpose IDENTITY palette (bookings surface) — the redesign's dedicated
       "calendar category" set (see design_handoff Facilities Dashboard.dc.html). Identity
       only (card edge/tint/pill), never an interactive state, never --accent/--red. Tuned to
       one brightness family on the warm shell: TRAINING = navy (the everyday block), MATCH =
       pitch green (the week's hero, gets a MATCH eyebrow), OTHER = violet-grey. The amber
       "public/paid" purpose is Phase 2 (public paid bookings) and lives on that branch. */
    --booking-training-bar: #17469E;
    --booking-training-tint: #DCE6F8;
    --booking-training-border: #C6D6F2;
    --booking-training-text: #17469E;
    --booking-training-pill: #D0DEF6;

    --booking-match-bar: #2F8A4E;
    --booking-match-tint: #E4F0E6;
    --booking-match-border: #CBE4D3;
    --booking-match-text: #226B3B;
    --booking-match-pill: #D6EBDC;

    --booking-other-bar: #7B7597;
    --booking-other-tint: #ECEAF2;
    --booking-other-border: #DEDAE8;
    --booking-other-text: #5C5670;
    --booking-other-pill: #E4E0EC;

    --booking-conflict: #CF3F34;

    /* radius scale — cards 12–14, buttons 8–10, inputs 9–12, pills 999px */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-pill: 999px;

    /* shadow scale — very soft only. No heavier shadows. */
    --shadow: 0 2px 12px rgba(19, 26, 42, .05);
    --shadow-lg: 0 12px 34px rgba(19, 26, 42, .12);

    /* font families
       --font-display : Archivo — headings, card titles, numerals, hero display.
       --font-body    : Public Sans — all functional UI text, body copy, buttons. */
    --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Public Sans', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;

    /* legacy aliases — the homepage and the .display utility read these */
    --display: var(--font-display);
    --sans: var(--font-body);
}

/* Organiser context no longer flips the accent — teal is retired and admin is
   signalled by chrome (dark header bar), not colour. Kept as a no-op re-assert
   so any page still adding .org-context reads the same navy as the public side. */
body.org-context {
    --accent: var(--navy);
    --accent-strong: var(--navy-strong);
    --accent-soft: var(--navy-soft);
}

/* ===== LEGACY BRIDGE =====
   Point the legacy interactive/brand tokens at the flat --accent so existing
   components (buttons, submit inputs, the wordmark, anything reading
   --gradient-primary / --color-primary-*) become flat navy fills without
   touching markup. The brand "gradient" tokens resolve to one flat colour;
   real gradients survive only where a component sets a literal gradient
   (jackpot text, lotto balls, gold Play button — see README shape rules). */
:root {
    --gradient-primary: var(--accent);
    --gradient-primary-hover: var(--accent-strong);
    --gradient-brand: var(--accent);
    --gradient-brand-text: var(--accent);

    --color-primary-500: var(--accent);
    --color-primary-600: var(--accent-strong);

    /* Legacy per-flow theme scale — used by the create-competition flow pages
       (get-started, competition-type). Was a runtime blue(personal)/teal(org)
       flip injected by the flow-theme fragment; teal is retired, so the whole
       scale resolves to the flat navy accent. Both modes now read the same navy. */
    --theme-primary-50: var(--accent-soft);
    --theme-primary-100: var(--accent-soft);
    --theme-primary-200: var(--accent-soft);
    --theme-primary-400: var(--accent);
    --theme-primary-500: var(--accent);
    --theme-primary-600: var(--accent-strong);
    --theme-primary-700: var(--accent-strong);

    /* Functional UI text uses Public Sans; headings/display use Archivo. */
    --font-family-primary: var(--font-body);
    --font-family-headings: var(--font-display);
}

/* ===== FONT + PAGE BACKGROUND =====
   Body switches to Public Sans site-wide; page background is the warm --bg
   token (cards stay white via --card). Loaded last, so this wins over the
   legacy white `body { background }` in the bundle without !important. */
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--body);
}

.display {
    font-family: var(--display);
}