/* 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.

   The identity is the fieldhouse: grass-tinted neutrals, turf-green accent, and
   the two family hues — clay for batting, sky for pitching (CONTEXT.md, "Family
   hue") — set in the editorial scorecard's type: Fraunces headlines over an
   agate-dense Inter. ADR-0004 records how this replaced the one-accent zinc. */

@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: grass-tinted neutrals, and the night edition's --- */
        --white: #ffffff;
        --grass-50: #f7f8f4;
        --grass-100: #edf0e6;
        --grass-200: #dde3d2;
        --grass-400: #9aa587;
        --grass-600: #525a48;
        --ink: #1a1c16;
        --night: #0c0e09;
        --night-surface: #14170f;
        --night-raised: #1e2317;
        --night-line: #2c3320;
        --night-text: #e8ecdf;
        --night-muted: #a3ab94;

        /* --- Primitives: the interactive accent (turf green) --- */
        --green-300: #86efac;
        --green-800: #166534;

        /* --- Primitives: family hues — clay for batting, sky for pitching --- */
        --clay-300: #fdba74;
        --clay-700: #9a3412;
        --sky-300: #93c5fd;
        --sky-800: #1e40af;

        /* --- 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 --- */
        /* Both faces are self-hosted latin subsets (wwwroot/fonts/, OFL.txt).
           Inter is the workhorse everywhere including stat tables — chosen for
           true tabular figures; Fraunces carries the nameplate and headings. */
        --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --font-display: "Fraunces", Georgia, "Times New Roman", 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.75rem, 1.3rem + 2.25vw, 2.5rem);
        --text-h2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
        --text-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
        --text-body: 1rem;
        --text-sm: 0.875rem;
        --text-stat: 0.75rem; /* agate — the scorecard is dense by design */

        /* --- 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(--grass-50);
        --surface: var(--white);
        --surface-alt: var(--grass-100);
        --text: var(--ink);
        --text-muted: var(--grass-600);
        --border: var(--grass-200);
        --border-strong: var(--grass-400);
        --link: var(--green-800);
        --accent: var(--green-800);
        --batting-accent: var(--clay-700);
        --pitching-accent: var(--sky-800);
        --danger-bg: var(--red-700);
        --danger-text: var(--white);
        --scroll-shadow: var(--shadow-25);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            /* --- Semantic roles: the night edition. Roles only — no primitive moves. --- */
            --bg: var(--night);
            --surface: var(--night-surface);
            --surface-alt: var(--night-raised);
            --text: var(--night-text);
            --text-muted: var(--night-muted);
            --border: var(--night-line);
            --border-strong: var(--grass-600);
            --link: var(--green-300);
            --accent: var(--green-300);
            --batting-accent: var(--clay-300);
            --pitching-accent: var(--sky-300);
            --scroll-shadow: var(--shadow-60);
        }
    }
}