/* ============================================================================
   Design tokens.
   Everything else in the app reads from here; nothing else defines a colour,
   a size, or a duration.
   ============================================================================ */

/* Declared once, before anything else, so later files can opt into a layer and
   component styles (which the Razor SDK emits UNLAYERED, and therefore at the
   highest priority) always win over globals without any specificity games. */
@layer reset, base, layout, components, utilities;

/* ----------------------------------------------------------------------------
   The palette. Every colour value in the application appears exactly once, here.
   The blocks below only MAP these onto semantic names per theme; they never
   introduce a new value, so the two themes cannot drift apart.
   ---------------------------------------------------------------------------- */
:root {
    /* brand ------------------------------------------------------------- */
    /* Amber is inherited: the 2014 site drew both spread bars in orange. Vegas
       gets its own hue, because drawing two different quantities in one colour
       was the worst thing about the original chart. */
    --c-jeff-l: oklch(.62 .16 58);
    --c-jeff-d: oklch(.80 .16 68);

    /* Pointing at something that will do something if you click it. Deliberately a different hue
       from --jeff: amber means "this is your choice", yellow means "this one is live". They appear
       side by side on the pick control, so they must not be mistakable for each other. */
    /* The light value is darker than the dark one rather than a mirror of it: a 74%-lightness
       yellow against a near-white card is barely a border at all. Not yet seen by anyone in the
       light theme -- see the outstanding light-theme review. */
    --c-hover-l: oklch(.68 .16 98);
    --c-hover-d: oklch(.89 .15 100);
    --c-vegas-l: oklch(.55 .21 328);
    --c-vegas-d: oklch(.74 .19 328);

    /* A game played somewhere other than the home team's own field. Teal because every other hue
       here is spoken for: violet is Vegas, amber is Jeff, blue-violet is a scribe. Reusing one of
       them would put two meanings in one channel. */
    --c-venue-l: oklch(.48 .10 195);
    --c-venue-d: oklch(.80 .11 195);
    --c-scribe-l: oklch(.52 .18 285);
    --c-scribe-d: oklch(.76 .16 285);

    /* surfaces ---------------------------------------------------------- */
    --c-bg-l: oklch(.97 .006 250);
    --c-bg-d: oklch(.155 .014 262);
    --c-surface1-l: oklch(1 0 0);
    --c-surface1-d: oklch(.205 .016 262);
    --c-surface2-l: oklch(.955 .006 250);
    --c-surface2-d: oklch(.255 .018 262);
    --c-glass-l: oklch(1 0 0 / .82);
    --c-glass-d: oklch(.18 .016 262 / .78);

    --c-fg-l: oklch(.24 .015 262);
    --c-fg-d: oklch(.96 .004 250);
    --c-muted-l: oklch(.47 .012 262);
    --c-muted-d: oklch(.74 .010 250);
    --c-subtle-l: oklch(.60 .010 262);
    --c-subtle-d: oklch(.58 .010 250);
    --c-rule-l: oklch(.88 .006 262);
    --c-rule-d: oklch(.31 .014 262);
    --c-rail-l: oklch(.92 .005 262);
    --c-rail-d: oklch(.27 .012 262);

    /* status ------------------------------------------------------------- */
    /* Direct heirs of the 2014 palette: #e8f7ea nailed it, #f7ebe8 way off,
       #efefef no line, #ffffcc the selected row. Same language, restated so
       both themes stay legible. */
    --c-nailed-l: oklch(.52 .14 152);
    --c-nailed-d: oklch(.80 .16 152);
    --c-nailedbg-l: oklch(.95 .04 152);
    --c-nailedbg-d: oklch(.27 .05 152);
    --c-wayoff-l: oklch(.54 .18 27);
    --c-wayoff-d: oklch(.75 .16 27);
    --c-wayoffbg-l: oklch(.95 .04 27);
    --c-wayoffbg-d: oklch(.27 .05 27);
    --c-push-l: oklch(.60 .13 92);
    --c-push-d: oklch(.85 .14 92);
    --c-pushbg-l: oklch(.96 .05 92);
    --c-pushbg-d: oklch(.28 .05 92);
    --c-nolinebg-l: oklch(.94 0 0);
    --c-nolinebg-d: oklch(.235 .004 262);
    --c-pendingbg-l: oklch(.96 .01 250);
    --c-pendingbg-d: oklch(.225 .012 262);
    --c-highlight-l: oklch(.965 .07 105);
    --c-highlight-d: oklch(.295 .05 105);

    --c-focus-l: oklch(.52 .19 250);
    --c-focus-d: oklch(.80 .16 250);

    /* Text that sits ON a brand-coloured surface. */
    --c-on-brand-l: oklch(1 0 0);
    --c-on-brand-d: oklch(.16 .014 262);
}

/* ----------------------------------------------------------------------------
   Theme mapping.

   These deliberately do NOT use light-dark(). That function is correct per spec
   and resolves correctly on page load, but Chrome does not reliably invalidate
   it inside a custom property when color-scheme changes at RUNTIME: already-
   painted elements keep the previous theme's value while newly-created ones get
   the right one, leaving a half-switched page. Mapping explicitly costs three
   short blocks and removes the entire failure mode.

   Dark is the default. Light applies when the OS asks for it and the user has
   not overridden, or when the user has explicitly chosen it.
   ---------------------------------------------------------------------------- */
@layer base {
    :root,
    :root[data-theme='dark'] {
        color-scheme: dark;

        --jeff: var(--c-jeff-d);
        --hover: var(--c-hover-d);
        --vegas: var(--c-vegas-d);
        --venue: var(--c-venue-d);
        --scribe: var(--c-scribe-d);
        --bg: var(--c-bg-d);
        --surface-1: var(--c-surface1-d);
        --surface-2: var(--c-surface2-d);
        --surface-glass: var(--c-glass-d);
        --fg: var(--c-fg-d);
        --fg-muted: var(--c-muted-d);
        --fg-subtle: var(--c-subtle-d);
        --rule: var(--c-rule-d);
        --rail: var(--c-rail-d);
        --nailed: var(--c-nailed-d);
        --nailed-bg: var(--c-nailedbg-d);
        --wayoff: var(--c-wayoff-d);
        --wayoff-bg: var(--c-wayoffbg-d);
        --push: var(--c-push-d);
        --push-bg: var(--c-pushbg-d);
        --noline-bg: var(--c-nolinebg-d);
        --pending-bg: var(--c-pendingbg-d);
        --highlight-bg: var(--c-highlight-d);
        --focus: var(--c-focus-d);
        --on-brand: var(--c-on-brand-d);
    }

    @media (prefers-color-scheme: light) {
        :root:not([data-theme='dark']) {
            color-scheme: light;

            --jeff: var(--c-jeff-l);
            --hover: var(--c-hover-l);
            --vegas: var(--c-vegas-l);
            --venue: var(--c-venue-l);
            --scribe: var(--c-scribe-l);
            --bg: var(--c-bg-l);
            --surface-1: var(--c-surface1-l);
            --surface-2: var(--c-surface2-l);
            --surface-glass: var(--c-glass-l);
            --fg: var(--c-fg-l);
            --fg-muted: var(--c-muted-l);
            --fg-subtle: var(--c-subtle-l);
            --rule: var(--c-rule-l);
            --rail: var(--c-rail-l);
            --nailed: var(--c-nailed-l);
            --nailed-bg: var(--c-nailedbg-l);
            --wayoff: var(--c-wayoff-l);
            --wayoff-bg: var(--c-wayoffbg-l);
            --push: var(--c-push-l);
            --push-bg: var(--c-pushbg-l);
            --noline-bg: var(--c-nolinebg-l);
            --pending-bg: var(--c-pendingbg-l);
            --highlight-bg: var(--c-highlight-l);
            --focus: var(--c-focus-l);
            --on-brand: var(--c-on-brand-l);
        }
    }

    :root[data-theme='light'] {
        color-scheme: light;

        --jeff: var(--c-jeff-l);
        --hover: var(--c-hover-l);
        --vegas: var(--c-vegas-l);
        --venue: var(--c-venue-l);
        --scribe: var(--c-scribe-l);
        --bg: var(--c-bg-l);
        --surface-1: var(--c-surface1-l);
        --surface-2: var(--c-surface2-l);
        --surface-glass: var(--c-glass-l);
        --fg: var(--c-fg-l);
        --fg-muted: var(--c-muted-l);
        --fg-subtle: var(--c-subtle-l);
        --rule: var(--c-rule-l);
        --rail: var(--c-rail-l);
        --nailed: var(--c-nailed-l);
        --nailed-bg: var(--c-nailedbg-l);
        --wayoff: var(--c-wayoff-l);
        --wayoff-bg: var(--c-wayoffbg-l);
        --push: var(--c-push-l);
        --push-bg: var(--c-pushbg-l);
        --noline-bg: var(--c-nolinebg-l);
        --pending-bg: var(--c-pendingbg-l);
        --highlight-bg: var(--c-highlight-l);
        --focus: var(--c-focus-l);
        --on-brand: var(--c-on-brand-l);
    }
}

/* ----------------------------------------------------------------------------
   Theme-independent tokens.
   ---------------------------------------------------------------------------- */
:root {
    /* Aliases that follow whichever theme is active. */
    --noline: var(--fg-subtle);
    --pending: var(--fg-muted);

    /* Spread bars encode WHOSE line it is, never which team. Tying them to team
       colour would collide two meanings in one channel and wreck the chart. */
    --bar-entrant: var(--jeff);
    --bar-vegas: var(--vegas);
    --bar-final: var(--fg-subtle);

    /* type -------------------------------------------------------------- */
    /* One variable font covers both roles via its width axis. There is no
       reliable cross-platform condensed system face -- Arial Narrow is absent on
       Android and most Linux -- so a "system stack" would silently fall back to
       plain Arial on much of the mobile traffic this rewrite exists to serve. */
    --font-ui: 'Archivo', 'Franklin Gothic Medium', 'Arial Narrow', system-ui, sans-serif;
    --font-display: var(--font-ui);
    --wdth-display: 79;
    --wdth-ui: 100;

    --step--2: clamp(.72rem, .69rem + .14vi, .80rem);
    --step--1: clamp(.86rem, .82rem + .18vi, .95rem);
    --step-0: clamp(1rem, .96rem + .22vi, 1.125rem);
    --step-1: clamp(1.2rem, 1.13rem + .35vi, 1.42rem);
    --step-2: clamp(1.44rem, 1.33rem + .55vi, 1.80rem);
    --step-3: clamp(1.73rem, 1.55rem + .90vi, 2.28rem);
    --step-4: clamp(2.07rem, 1.79rem + 1.4vi, 2.88rem);

    /* space ------------------------------------------------------------- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    /* shape and motion --------------------------------------------------- */
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 14px;
    --radius-pill: 999px;

    --shadow-1: 0 1px 2px oklch(0 0 0 / .28);
    --shadow-2: 0 6px 24px -6px oklch(0 0 0 / .42);

    --dur-1: 120ms;
    --dur-2: 320ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    --z-header: 100;
    --z-scribe: 200;
    --z-toast: 300;

    /* measure ----------------------------------------------------------- */
    --measure: 68ch;
    --column: 64rem;    /* the modern heir to the original fixed 800px */
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-1: 0ms;
        --dur-2: 0ms;
    }
}