/*
 * tokens.css — Knowbility AIR 2027 Registration System
 *
 * The design system's primitives, transcribed from DESIGN.md. Every value
 * here comes from that document; none were chosen here. If a value looks
 * wrong, DESIGN.md is the source of truth and the fix goes there first.
 *
 *   Color .............. DESIGN.md §2.5 (contrast verified in §2.3)
 *   Dark theme ......... DESIGN.md §2.6
 *   Type ............... DESIGN.md §4.1 (families), §4.2 (scale)
 *   Spacing / radius ... DESIGN.md §5
 *
 * One declaration per line, lowercase six-digit hex: the CI contrast checker
 * parses this file and re-verifies DESIGN.md §2.3's pairs against it.
 */

:root {
    /* Brand */
    --color-brand: #6e2f75;
    --color-brand-dark: #522358;
    --color-brand-light: #d3c5d5;

    /* Interactive */
    --color-action: #397193;
    --color-action-dark: #08364e;
    --color-action-light: #66b9e7;
    --color-focus: #397193;
    --color-focus-inner: #ffffff;
    /* The label on a filled button -- §2.3's "White text on it" column in
       light; near-black on the lighter dark fills (§2.6). */
    --color-on-fill: #ffffff;

    /* State */
    --color-danger: #d7141b;
    --color-danger-dark: #b61116;
    --color-danger-light: #ff6a6f;
    --color-success: #0a7039;
    --color-success-dark: #07542a;
    --color-success-light: #49c168;
    --color-caution: #ffdd17;
    --color-caution-dark: #bfa511;

    /* Accent — fills only, never text (§2.4) */
    --color-accent: #ec7e22;
    --color-accent-dark: #b15e19;
    --color-accent-2: #45d0b5;
    --color-accent-2-dark: #05ac8c;

    /* Neutrals */
    --color-text: #121313;
    --color-text-secondary: #626366;
    --color-rule: #bbbdbf;  /* decorative only */
    --color-border: #626366;  /* form controls */
    --color-surface: #ffffff;
    --color-surface-subtle: #f2f2f3;
    --color-surface-sunken: #e5e6e7;

    /* Families — DESIGN.md §4.1: self-hosted Atkinson Hyperlegible (Sprint 29) */
    --font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Scale — DESIGN.md §4.2. Base 16px = 1rem; never a px font size. */
    --text-xs: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-display: clamp(2.5rem, 5vw, 4.5rem);
    /* Body text, Sprint 29 spec §5: 18px on public and registrant pages;
       admin and judging override to --text-base in base.css. */
    --text-body: 1.125rem;

    --leading-xs: 1.5;
    --leading-base: 1.5;
    --leading-lg: 1.45;
    --leading-xl: 1.4;
    --leading-2xl: 1.3;
    --leading-3xl: 1.25;
    --leading-display: 1.1;
    --leading-body: 1.6;

    /* Weights — files ship 400, 600 and 700 (§4.1); 300 is not shipped and the browser would fake it */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-bold: 700;

    /* Spacing — DESIGN.md §5, 4px base in rem */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* §5: 0.25rem throughout. The §7 CTA squares its top corners itself. */
    --radius: 0.25rem;

    /* §5 density: comfortable (public) is one column at 48rem */
    --measure-comfortable: 48rem;

    /* §5 density: compact (admin) at 64rem / 1024px. Jeff's call, 29 Aug
       2026, narrowing what §5 called "full width": a seven-column table on
       an ultrawide is as hard to read across as one that scrolls, and a cap
       keeps the header, content and footer on one measure. 1024 is what the
       widest admin list needs -- payments wanted 827px of table and got
       736. */
    --measure-compact: 64rem;

    /* §8.2: 44 CSS px is the standing bar, above SC 2.5.8's 24 */
    --target-min: 2.75rem;

    /* The sticky admin header's height plus slack; used for scroll-margin
       and the nav panel's max-block-size cap. */
    --admin-header-allowance: 6rem;

    /* §12: 150–200ms, ease-out */
    --motion-duration: 150ms;
    --motion-easing: ease-out;
}

/*
 * Dark theme — DESIGN.md §2.6 (completed 26 Aug 2026, Jeff's call, which
 * closes DESIGN.md Open Item 3 / PRD Open Item 7).
 *
 * The light ramp doubles as the dark foreground ramp: each base color's
 * "light" variant becomes the dark theme's base, and a step lighter still
 * is its hover ("-dark") variant. Every pair is verified by
 * bin/check-contrast.php, the CI gate, not by eye. The filled-button label
 * flips to near-black because the dark fills are light enough that white
 * fails on them. Caution, accent, and accent-2 are fill-only colors no
 * component uses; they keep their light values and their §2.3 pairs stay
 * light-theme pairs.
 *
 * Two selectors, one value set. "System" means the OS preference applies
 * unless the visitor chose light; an explicit choice is the data-theme
 * attribute theme-init.js sets on <html> before first paint. The contrast
 * checker treats any block whose selector or enclosing at-rule mentions
 * "dark" as the dark theme, which both of these do.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --color-surface: #121313;
    --color-surface-subtle: #1e1f21;
    --color-surface-sunken: #2b2c2e;
    --color-text: #f2f2f3;
    --color-text-secondary: #b3b5b8;
    --color-rule: #3a3c3f;
    --color-border: #8f9195;
    --color-brand: #d3c5d5;
    --color-brand-dark: #e6dde7;
    --color-action: #66b9e7;
    --color-action-dark: #9dd2f1;
    --color-danger: #ff6a6f;
    --color-danger-dark: #ff9a9d;
    --color-success: #49c168;
    --color-success-dark: #7fd894;
    --color-focus: #66b9e7;
    --color-focus-inner: #121313;
    --color-on-fill: #121313;
    /* Native controls (checkbox, select, scrollbar) draw in dark chrome. */
    color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --color-surface: #121313;
    --color-surface-subtle: #1e1f21;
    --color-surface-sunken: #2b2c2e;
    --color-text: #f2f2f3;
    --color-text-secondary: #b3b5b8;
    --color-rule: #3a3c3f;
    --color-border: #8f9195;
    --color-brand: #d3c5d5;
    --color-brand-dark: #e6dde7;
    --color-action: #66b9e7;
    --color-action-dark: #9dd2f1;
    --color-danger: #ff6a6f;
    --color-danger-dark: #ff9a9d;
    --color-success: #49c168;
    --color-success-dark: #7fd894;
    --color-focus: #66b9e7;
    --color-focus-inner: #121313;
    --color-on-fill: #121313;
    /* Native controls (checkbox, select, scrollbar) draw in dark chrome. */
    color-scheme: dark;
}