/* ============================================
   KOTT Design Tokens — single canonical :root
   ============================================
   Loaded FIRST in App.razor (before public.css and admin.css), so this is
   the ONE authoritative source for every shared token. public.css and
   admin.css keep ONLY genuinely surface-specific overrides in their own
   :root, declared AFTER this file so an intentional per-surface override
   still wins.

   Before this file existed there were TWO :root blocks (admin.css + public.css)
   that BOTH defined the same token names; because admin.css loaded last it won
   site-wide — including on public pages — which silently overrode public's
   intended values for --success/--danger/--warning/--text-tertiary/--border-hover.
   Those five divergent colors are now PINNED per-surface via
   `.public-shell { ... }` (public.css) and `.admin-shell { ... }` (admin.css)
   so load order no longer decides anything.

   House style is unchanged: true-black panels, frosted glass, cyan #00e0ff
   accent, TimeAttack purple, Rajdhani/Inter. No values move on the admin
   surface; the only visual delta is the per-surface colors snapping back to
   each surface's designed value.
   ============================================ */

:root {
    /* ----- Backgrounds ----- */
    --bg-primary: #000000;
    --bg-panel: rgba(8, 12, 18, 0.65);
    --bg-panel-solid: #060a10;
    --bg-elevated: rgba(12, 18, 26, 0.7);
    --bg-hover: rgba(0, 224, 255, 0.04);
    --bg-input: rgba(0, 0, 0, 0.5);
    /* Card surface — was public-only; admin.css referenced var(--bg-card,#121418)
       and fell through to the literal #121418 (drift-by-fallback). Canonical
       value is public's panel tint. */
    --bg-card: rgba(8, 12, 18, 0.65);

    /* ----- Text ----- */
    --text-primary: #e8eaed;
    --text-secondary: #9ca3af;
    /* 2026-05-06 — bumped to #7a8493 (5.58:1 vs #000) for WCAG AA at body text
       (was admin #3b4252 ≈ 1.94:1 / public #6b7588 ≈ 4.18:1). Both surfaces
       shared the same final value, so it consolidates here cleanly. The
       contrast floor is pinned by Phase_TextMutedContrastTests. */
    --text-muted: #7a8493;
    /* --text-tertiary differs per surface (admin #6b7280, public #8b939f).
       Base = admin's; .public-shell / .admin-shell pin both surfaces. */
    --text-tertiary: #6b7280;
    /* Safety alias — admin.css had ~5 sites using the bare var(--text) which
       was NEVER defined; they now resolve to the primary text color. */
    --text: var(--text-primary);

    /* Typography scale — promoted from public.css (public used it heavily;
       admin can now adopt it too). */
    --text-xs: 11px;      /* micro labels, tag badges */
    --text-sm: 12px;      /* captions, meta text */
    --text-base: 14px;    /* body default */
    --text-md: 16px;      /* emphasized body */
    --text-lg: 18px;      /* card titles, h3 */
    --text-xl: 24px;      /* page h2, profile h1 */
    --text-2xl: 28px;     /* page titles, mode titles */
    --text-hero: 2.75rem; /* hero only */

    /* ----- Accent — Cyan ----- */
    --accent: #00e0ff;
    /* alias for legacy var(--accent-cyan, #00e0ff) call sites. */
    --accent-cyan: #00e0ff;
    --accent-hover: #33e8ff;
    --accent-dim: rgba(0, 224, 255, 0.12);
    --accent-glow: rgba(0, 224, 255, 0.25);
    /* Accent — Purple (Time Attack). Was public-only. */
    --accent-purple: #b49cff;
    --link: #00e0ff;
    --link-hover: #33e8ff;

    /* ----- Semantic ----- */
    /* --success/--danger/--warning differ per surface (public uses brighter
       neon, admin uses calmer Tailwind-ish). Base values = admin's set; the
       .public-shell / .admin-shell pins below restore each surface's design. */
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    /* Semantic dims (subtle backgrounds + borders) — was public-only. */
    --danger-dim: rgba(255, 107, 107, 0.05);
    --danger-border: rgba(255, 107, 107, 0.3);

    /* ----- Borders ----- */
    --border: rgba(255, 255, 255, 0.06);
    /* --border-hover differs per surface (admin .12, public .10). Base =
       admin's; .public-shell / .admin-shell pin both. */
    --border-hover: rgba(255, 255, 255, 0.12);
    --border-accent: rgba(0, 224, 255, 0.15);
    --border-accent-strong: rgba(0, 224, 255, 0.35);
    /* Was public-only — aliased to the canonical hairline border. */
    --border-subtle: var(--border);

    /* ----- Glass ----- */
    /* Was public-only — aliased to the panel tint. */
    --glass-bg: var(--bg-panel);

    /* ----- Tier colors (identical in both surfaces) ----- */
    --tier-iron: #5c6370;
    --tier-bronze: #cd7f32;
    --tier-silver: #c0c8d4;
    --tier-gold: #ffd166;
    --tier-platinum: #7ee8fa;
    --tier-diamond: #b9f2ff;
    --tier-champion: #00e0ff;

    /* ----- Fonts ----- */
    --font-display: 'Rajdhani', 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* ----- Letter-spacing scale ----- */
    --letter-spacing-tight: 0.5px;   /* small caps, badges, buttons, table headers */
    --letter-spacing-normal: 1px;    /* sidebar brand, label-like badges */
    --letter-spacing-loose: 1.5px;   /* hero / marketing headlines */

    /* ----- Layout widths ----- */
    /* Home content column — was public-only. */
    --home-content-width: 900px;

    /* ======================================================================
       DERIVED SCALES — new in the token reconciliation. These are referenced
       by NOBODY today except --radius-sm (3 admin sites, kept at 4px), so
       introducing them is pixel-neutral. The adoption sweeps (Phases 1-5 in
       docs/redesign-prompts/admin-04-design-tokens.md) repoint raw px onto
       these.
       ====================================================================== */

    /* ----- Spacing ----- */
    /* Legacy t-shirt scale (8pt grid). KEPT AT CURRENT VALUES — admin.css
       utilities + the density wave depend on these exact numbers. */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    /* Numeric in-between steps — the dominant raw paddings/gaps (6/10/12/14/20)
       had no token, so they could not be tokenized at zero diff. Numeric names
       (not t-shirt) so they slot cleanly between the legacy steps without
       reordering. --space-12 is also the name the density wave consumes. */
    --space-6: 6px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-20: 20px;

    /* ----- Radius ----- */
    /* Legacy 4-step scale KEPT AT CURRENT VALUES (--radius-sm is referenced
       3x in admin.css expecting 4px). New steps ADDED, not redefined. */
    --radius-xs: 3px;       /* new — small inset chrome (kbd, etc.) */
    --radius-sm: 4px;
    --radius-6: 6px;        /* new — the single most common radius site-wide */
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;   /* new — fully-rounded chips / pills */

    /* ----- Motion ----- */
    /* Duration scale — ~120 hand-written transitions cluster here (0.12s
       dominant). --dur-fast is the default. */
    --dur-instant: 0.08s;
    --dur-fast: 0.12s;
    --dur-base: 0.15s;
    --dur-slow: 0.2s;
    --dur-slower: 0.3s;
    /* Easing */
    --ease-standard: ease;
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;

    /* ----- Shadows / glows / rings ----- */
    /* The repeated focus ring 0 0 0 1px var(--border-accent) (~10 admin sites). */
    --ring-accent: 0 0 0 1px var(--border-accent);
    --ring-accent-strong: 0 0 0 1px var(--accent);
    /* Ambient elevation */
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
    /* Accent glow rings */
    --glow-sm: 0 0 6px var(--accent-glow);
    --glow-md: 0 0 10px var(--accent-glow);
    --glow-lg: 0 0 14px var(--accent-glow);

    /* ======================================================================
       UNDEFINED-TOKEN ALIASES — admin.css referenced these names with ad-hoc
       literal fallbacks (or no fallback at all, rendering broken). Point them
       at the canonical palette so they resolve to the intended value instead
       of the drifted literal. (This corrects the few drift-by-fallback sites
       called out in the plan; everything else stays pixel-identical.)
       ====================================================================== */
    --surface: var(--bg-elevated);    /* was var(--surface,#1a1a1a) */
    --surface-2: var(--bg-elevated);  /* was undefined (transparent) */
    --bg-base: var(--bg-panel-solid); /* was undefined (transparent) */
    --border-color: var(--border);    /* was var(--border-color,#222) */
    --text-success: var(--success);   /* was var(--text-success,#2ecc71) */
    --text-danger: var(--danger);     /* was var(--text-danger,#e74c3c) */

    /* ======================================================================
       SEMANTIC DENSITY TOKENS — the single density knob for the admin surface
       (docs/redesign-prompts/admin-05-density.md, Proposal A). These were
       seeded at the pre-tighten values; the compact-density pass (2026-06-08)
       LOWERED them here and repointed the shared admin primitives at them, so
       all density tuning lives in this ONE auditable place. INTENTIONAL
       tightening (not pixel-neutral) — denser ops-tool feel (Grafana/Linear).
       Wired primitives (in admin.css):
         .content padding            -> --admin-gutter-y / -x   (was 28/32)
         .form-panel padding/margin/gap -> --panel-pad / -gap / -inner-gap (was 20/16/12)
         all four table cell paddings -> --cell-pad-y / -x       (was 8-10 / 12-14)
       To re-tune density later, change ONLY the values below. */
    --admin-gutter-y: 18px;   /* was 28px */
    --admin-gutter-x: 24px;   /* was 32px */
    --panel-pad: 14px;        /* was 20px */
    --panel-gap: 12px;        /* was 16px (.form-panel block margin) */
    --panel-inner-gap: 10px;  /* was 12px (.form-panel flex gap) */
    --cell-pad-y: 7px;        /* was 8px */
    --cell-pad-x: 12px;       /* unchanged */
}

/* --- Fallback for no backdrop-filter (shared by both surfaces) --- */
@supports not (backdrop-filter: blur(1px)) {
    :root { --bg-panel: var(--bg-panel-solid); --bg-elevated: #0a0e14; }
}