/*
 * Design tokens for Wingmasters PRS, transcribed from Docs/Design/DESIGN.md.
 * Single source of truth for colour, type, spacing, radius and elevation.
 * Every component and page references these variables — no hard-coded values elsewhere.
 */
:root {
    /* Surfaces */
    --surface: #f8f9ff;
    --surface-dim: #cbdbf5;
    --surface-bright: #f8f9ff;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #eff4ff;
    --surface-container: #e5eeff;
    --surface-container-high: #dce9ff;
    --surface-container-highest: #d3e4fe;
    --background: #f8f9ff;

    /* Ink */
    --on-surface: #0b1c30;
    --on-surface-variant: #45464d;
    --on-background: #0b1c30;
    --inverse-surface: #213145;
    --inverse-on-surface: #eaf1ff;

    /* Lines */
    --outline: #76777d;
    --outline-variant: #c6c6cd;

    /* Brand: Deep Navy structural frame */
    --primary: #0b1c30;
    --on-primary: #ffffff;
    --primary-container: #131b2e;
    --on-primary-container: #7c839b;
    --on-primary-muted: rgba(255, 255, 255, 0.6);   /* secondary text on a navy/dark surface */

    /* The Wingmasters brand palette (Docs/Design/Branding, The Wingmasters Branding Pack) — the four
       official colours. The PDF renderer (RaceResultsPdfRenderer) carries the same hex values in C#;
       change them TOGETHER or the paper and the screen drift apart. */
    --brand-orange: #f9943b;
    --brand-teal: #53acc5;
    --brand-slate: #5e6d82;
    --brand-charcoal: #393f4a;

    /* Athletic Gold accent — aligned to the brand pack's orange (Chris, 28 Aug: EVERY accent orange is the
       logo's orange — no tints, no second yellow; --gold-bright survives only as an alias for old rules). */
    --secondary: #855300;
    --on-secondary: #ffffff;
    --secondary-container: var(--brand-orange);
    --on-secondary-container: #684000;
    --gold: var(--brand-orange);
    --gold-bright: var(--brand-orange);

    /* Brand shorthand (semantic) — reference these in page/component CSS, never raw hex.
       Primary = Deep Navy structural frame; Secondary = Athletic Gold, the ~10% accent we dab about. */
    --brand-primary: var(--primary);
    --brand-primary-ink: var(--on-primary);
    --brand-secondary: var(--gold);
    --brand-secondary-strong: var(--secondary-container);

    /* Status */
    --success: #059669;
    --success-container: #d1fae5;
    --on-success-container: #065f46;
    --warning-container: #fef3c7;
    --on-warning-container: #92400e;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    /* Podium */
    /* Role colours (ADR-0031 rule 4): blue for Loft, green for Club, red for Federation. National club and
       platform were not named in the round — purple and slate keep them distinct without borrowing a named one.
       Platform-owner oversight of a NATIONAL club (ADR-0021) gets teal — asked for 3 Sep 2026 so it reads at a
       glance as neither the platform's own slate nor the national club's purple; club/federation oversight
       keep slate. Teal is the one hue in the family no hat had used.
       --hat-accent is set per hat on .portal[data-hat] in sidebar.css; these are the palette. */
    --hat-loft: #2563eb;
    --hat-club: #059669;
    --hat-federation: #dc2626;
    --hat-national: #7c3aed;
    --hat-platform: #475569;
    --hat-national-oversight: #0d9488;

    --podium-gold: #f59e0b;
    --podium-silver: #94a3b8;
    --podium-bronze: #b45309;

    /* Typography — rem-based so the whole app scales with browser zoom / user font size and stays legible
       on small screens. 1rem = 16px at the default root size, so these are pixel-identical at 100% zoom.
       Each token also exposes a size-only companion (--*-size) for rules that set font-size on its own. */
    --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --text-headline-xl: 700 2.25rem/2.75rem var(--font-family);
    --text-headline-lg: 700 1.75rem/2.125rem var(--font-family);
    --text-headline-md: 600 1.25rem/1.75rem var(--font-family);
    --text-body-lg: 400 1rem/1.5rem var(--font-family);
    --text-body-md: 400 0.875rem/1.25rem var(--font-family);
    --text-body-sm: 400 0.8125rem/1.125rem var(--font-family);
    --text-label-md: 600 0.75rem/1rem var(--font-family);
    --text-body-lg-size: 1rem;
    --text-body-md-size: 0.875rem;
    --text-body-sm-size: 0.8125rem;
    --text-label-md-size: 0.75rem;
    --letter-spacing-label: 0.05em;

    /* Spacing scale (0.25rem / 4px base). rem so gaps and padding scale with the type. */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --container-max: 105rem;      /* 1680px */
    --sidebar-width: 16.25rem;    /* 260px */
    --btn-min-width: 12.5rem;     /* 200px — uniform width for equal-sized action buttons (.btn--uniform) */
    --btn-height: 2.25rem;        /* 36px — every .btn is at least this tall, so icon and text buttons match */
    --btn-icon-size: 1.125rem;    /* 18px — icons inside a button, scaled to the label (not the 24px base) */
    /* Drop for the bird-page "Change photo" control so its input lines up with the Colour input. */
    --photo-form-drop: calc(var(--space-lg) - 0.25rem);

    /* Radius */
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* Elevation (tonal, low-contrast per design system) */
    --shadow-sm: 0 1px 2px rgba(11, 28, 48, 0.06);
    --shadow-md: 0 4px 12px rgba(11, 28, 48, 0.08);
}