/* Design tokens — custom properties only. Nothing else. Ever.
   See docs/agents/styling.md. This file opens with the single @layer declaration
   that establishes cascade order for every stylesheet on the site.

   Two tiers: primitives say what a value IS, semantic roles say what it is FOR.
   Rules outside this file consume roles only. Dark mode reassigns roles only —
   primitives never move. The contrast test in CssPolicyTests parses this file, so
   colour primitives stay 6-digit hex. */

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
    :root {
        /* Adapts scrollbars, form controls, and the default canvas — notably the
           scrollbar on the stat-table wrapper. */
        color-scheme: light dark;

        /* --- Primitives: neutral ramp --- */
        --white: #ffffff;
        --gray-50: #fafafa;
        --gray-100: #f4f4f5;
        --gray-200: #e4e4e7;
        --gray-300: #d4d4d8;
        --gray-400: #a1a1aa;
        --gray-500: #71717a;
        --gray-600: #52525b;
        --gray-700: #3f3f46;
        --gray-800: #27272a;
        --gray-900: #18181b;
        --gray-950: #09090b;

        /* --- Primitives: the one accent --- */
        --blue-400: #60a5fa;
        --blue-600: #2563eb;
        --blue-700: #1d4ed8;

        /* --- Primitives: error surface (Blazor error boundary) --- */
        --red-700: #b32121;

        /* --- Primitives: shadow, for the scroll-edge affordance --- */
        --shadow-25: rgb(0 0 0 / 0.25);
        --shadow-60: rgb(0 0 0 / 0.6);

        /* --- Type — single-tier by design; rules consume these directly --- */
        /* The system stack lives behind this token so a self-hosted face can be
           swapped in later without touching a single rule. */
        --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

        /* Fluid for headings; FIXED for tabular data — density is the design in a
           stat table, so --text-stat never goes fluid. */
        --text-h1: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
        --text-h2: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
        --text-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
        --text-body: 1rem;
        --text-sm: 0.875rem;
        --text-stat: 0.8125rem;

        /* --- Spacing — 4px-anchored rem scale, t-shirt names; single-tier --- */
        --space-3xs: 0.125rem; /*  2px — hairline half-step */
        --space-2xs: 0.25rem;  /*  4px */
        --space-xs: 0.5rem;    /*  8px */
        --space-sm: 0.75rem;   /* 12px */
        --space-md: 1rem;      /* 16px */
        --space-lg: 1.5rem;    /* 24px */
        --space-xl: 2.5rem;    /* 40px */

        /* --- Semantic roles: light palette --- */
        --bg: var(--white);           /* page canvas */
        --surface: var(--white);      /* opaque table/sticky-column background */
        --surface-alt: var(--gray-100); /* header rows, raised strips */
        --text: var(--gray-900);
        --text-muted: var(--gray-600);
        --border: var(--gray-200);
        --border-strong: var(--gray-400);
        --link: var(--blue-700);
        --accent: var(--blue-600);    /* focus rings, league-leader emphasis */
        --danger-bg: var(--red-700);
        --danger-text: var(--white);
        --scroll-shadow: var(--shadow-25);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            /* --- Semantic roles: dark palette. Roles only — no primitive moves. --- */
            --bg: var(--gray-950);
            --surface: var(--gray-950);
            --surface-alt: var(--gray-900);
            --text: var(--gray-100);
            --text-muted: var(--gray-400);
            --border: var(--gray-800);
            --border-strong: var(--gray-600);
            --link: var(--blue-400);
            --accent: var(--blue-400);
            --scroll-shadow: var(--shadow-60);
        }
    }
}