/* =============================================================================
   RaceTraceTiming — "Precision" tokens
   -----------------------------------------------------------------------------
   Deep slate, one instrument blue, hairline structure. Two rules hold it
   together as the site grows:

     1. --primary is for interaction and identity only.
     2. Semantic colour is separate and never borrowed for decoration.
        --success means the clock is running, --danger means it isn't,
        --warning means something needs attention. On a results page the race's
        state is the most important thing shown, so nothing else may compete
        with the colour carrying it.

   Blue on white was chosen partly for a physical reason: a finish line is
   usually outdoors in full sun with a phone at arm's length, and it holds the
   most contrast of the directions considered.

   Variable names are inherited from the pages this site was built on, so
   existing markup keeps working; only the values are ours.
   ========================================================================== */

:root {
    /* Identity and interaction */
    --primary: #1D5FD6;
    --primary-dark: #1A4FB0;
    --primary-mid: #4A82E4;
    --primary-light: #DCE8FC;
    --primary-lightest: #F0F5FE;

    /* Kept for inherited markup. RaceTraceTiming has no second brand hue — the
       accent does that work alone — so these resolve to the semantic and
       identity colours rather than introducing a competing one. */
    --accent-green: #12855A;
    --accent-green-dark: #0E6E4A;
    --accent-green-light: #D8F0E4;
    --accent-green-lightest: #EFF8F3;
    --accent-purple: #1D5FD6;
    --accent-purple-dark: #1A4FB0;
    --accent-purple-light: #DCE8FC;

    /* State, never decoration */
    --success: #12855A;
    --success-dark: #0E6E4A;
    --success-light: #D8F0E4;
    --warning: #A96A05;
    --warning-dark: #7A4A08;
    --warning-light: #FBF0DA;
    --danger: #C0362A;
    --danger-dark: #9E2A20;
    --danger-light: #FBE3E0;

    /* Neutrals, biased cool toward the accent rather than dead grey */
    --white: #FFFFFF;
    --gray-50: #F7F9FC;
    --gray-100: #EFF3F8;
    --gray-200: #DFE5EE;
    --gray-300: #C9D3E0;
    --gray-400: #A3AEBE;
    --gray-500: #7E8CA0;
    --gray-600: #5F7085;
    --gray-700: #4A5A70;
    --gray-800: #2A3648;
    --gray-900: #0F1A2A;

    /* Layout */
    --max-width: 1120px;
    --section-gap: 4rem;
    --content-padding: 1.5rem;

    /* Typography.
       Inter is self-hosted already (see base.css). It stays: a results page is
       often opened on cellular at a finish line, and pulling a webfont from a
       third party to change the body face would cost a round trip there for no
       functional gain.
       Times, bibs and places are set in the platform's monospace instead —
       already present on every device, so the instrument character lands where
       it actually matters with nothing extra to download. */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Shadows are used sparingly — hairline rules carry the structure. */
    --shadow-sm: 0 1px 2px rgba(15, 26, 42, .05);
    --shadow: 0 1px 2px rgba(15, 26, 42, .06), 0 4px 10px rgba(15, 26, 42, .05);
    --shadow-md: 0 2px 4px rgba(15, 26, 42, .06), 0 8px 20px rgba(15, 26, 42, .06);
    --shadow-lg: 0 4px 8px rgba(15, 26, 42, .07), 0 16px 32px rgba(15, 26, 42, .08);

    /* Small radii — this should read as an instrument, not a toy. */
    --radius-sm: 3px;
    --radius: 5px;
    --radius-lg: 8px;
    --radius-xl: 12px;
}

/* Every time, bib and place on the site lines up in a column, so digits must
   not change width as they change value. */
.time, .bib, .place, .num, td.time, td.num, th.num,
.elapsed, .split, [data-numeric] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}