/* ============================================================================
   DESIGN TOKENS — The Contract
   One naming convention. No aliases. No bridge.
   Defaults are obsidian (the default theme). Themes override in themes.css.
   ============================================================================ */

:root {
    /* --- Surfaces --- */
    --surface-0: #05090c;
    --surface-1: #091015;
    --surface-2: #101920;
    --surface-3: #17242d;
    --surface-4: #22323d;
    --surface-5: #31434f;

    /* --- Glass (obsidian effect, themes may override or ignore) --- */
    --glass-bg: rgba(9, 16, 21, 0.72);
    --glass-border: rgba(125, 220, 255, 0.1);
    --glass-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);

    /* --- Text --- */
    --text-primary: #f6fbff;
    --text-secondary: rgba(226, 238, 246, 0.76);
    --text-tertiary: rgba(193, 212, 224, 0.58);
    --text-quaternary: rgba(177, 196, 209, 0.36);
    --text-inverse: #041015;

    /* --- Accent Primary --- */
    --accent-primary: #28c6ff;
    --accent-primary-hover: #68dcff;
    --accent-primary-subtle: rgba(40, 198, 255, 0.14);
    --accent-primary-glow: rgba(40, 198, 255, 0.28);

    /* --- Accent Secondary --- */
    --accent-secondary: #d6b463;
    --accent-secondary-hover: #efcf7b;
    --accent-secondary-subtle: rgba(214, 180, 99, 0.16);

    /* --- State Colors --- */
    --accent-success: #10b981;
    --accent-success-hover: #059669;
    --accent-success-subtle: rgba(16, 185, 129, 0.15);

    --accent-warning: #f59e0b;
    --accent-warning-hover: #d97706;
    --accent-warning-subtle: rgba(245, 158, 11, 0.15);

    --accent-danger: #ef4444;
    --accent-danger-hover: #dc2626;
    --accent-danger-subtle: rgba(239, 68, 68, 0.15);

    --accent-info: #3b82f6;
    --accent-info-hover: #2563eb;
    --accent-info-subtle: rgba(59, 130, 246, 0.15);

    /* --- Brand Identity --- */
    --brand-ink: #061017;
    --brand-mist: #d6e5ee;
    --brand-gold: #d6b463;
    --brand-cyan: #28c6ff;
    --brand-cyan-bright: #7be3ff;
    --brand-helmet: var(--brand-gold);
    --brand-crown: var(--brand-gold);
    --brand-wordmark: var(--brand-cyan);
    --brand-wordmark-accent: var(--brand-cyan-bright);
    --brand-tagline: var(--text-tertiary);

    /* --- Borders --- */
    --border-subtle: rgba(194, 223, 238, 0.055);
    --border-default: rgba(194, 223, 238, 0.105);
    --border-strong: rgba(194, 223, 238, 0.18);
    --border-accent: var(--accent-primary);

    /* --- Shape --- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.34);
    --shadow-xl: 0 34px 90px rgba(0, 0, 0, 0.42);
    --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.22);
    --shadow-hover: 0 22px 60px rgba(0, 0, 0, 0.34);
    --glow-primary: 0 0 30px var(--accent-primary-glow);

    /* --- Typography --- */
    --font-brand: 'Space Grotesk', 'Avenir Next', system-ui, sans-serif;
    --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    /* --- Type Scale --- */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;

    /* --- Spacing --- */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* --- Content Spacing (themes may override) --- */
    --content-px: 2rem;
    --content-py: 1.5rem;
    --section-gap: 1.5rem;
    --card-padding: 1.25rem;

    /* --- Density Tokens ---
       Comfortable defaults. density.css overrides these under
       html[data-density="compact"|"ultra"]. Page-scoped .razor.css can't
       select on the html attribute, but custom properties inherit — so
       page CSS consumes these vars instead of hardcoding sizes/paddings.
       Conventions: var() when today's value == the default; min(var, Xrem)
       when today's value is smaller; calc(var * k) when larger. */
    --density-display-size: clamp(2rem, 4vw, 3rem); /* hero/display h1 */
    --density-heading-size: 1.5rem;                 /* panel/section display headings */
    --density-hero-pad-y: 2rem;                     /* hero band padding */
    --density-page-pad: 1.5rem;                     /* page wrapper padding */
    --density-card-pad: 1.5rem;                     /* panel/card body padding */
    --density-section-gap: 1.5rem;                  /* rhythm between page sections */
    --density-empty-state-pad: 3rem;                /* empty/loading state padding */
    --density-empty-icon-size: 2.5rem;              /* empty-state icon glyph */
    --density-avatar-size: 56px;                    /* player photo / team logo thumbs */
    --density-table-pad-y: 0.875rem;                /* data-grid cell vertical padding */
    --density-table-pad-x: 0.75rem;                 /* data-grid cell horizontal padding */

    /* --- Premium Surface System --- */
    --surface-canvas: var(--surface-0);
    --surface-rail: color-mix(in srgb, var(--surface-1) 88%, var(--surface-0) 12%);
    --surface-panel: color-mix(in srgb, var(--surface-2) 78%, var(--surface-0) 22%);
    --surface-panel-strong: color-mix(in srgb, var(--surface-3) 72%, var(--surface-1) 28%);
    --surface-control: color-mix(in srgb, var(--surface-2) 68%, var(--surface-0) 32%);
    --surface-control-hover: color-mix(in srgb, var(--surface-3) 76%, var(--surface-1) 24%);
    --surface-grid-line: color-mix(in srgb, var(--text-primary) 6%, transparent);
    --surface-stage:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--accent-primary) 8%, transparent) 0, transparent 28rem),
        radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--accent-secondary) 6%, transparent) 0, transparent 26rem),
        var(--surface-0);
    --surface-module: color-mix(in srgb, var(--surface-2) 84%, var(--surface-0) 16%);
    --surface-module-strong: color-mix(in srgb, var(--surface-3) 72%, var(--surface-1) 28%);
    --surface-module-soft: color-mix(in srgb, var(--surface-1) 78%, transparent);
    --surface-sheet: color-mix(in srgb, var(--surface-2) 92%, var(--surface-0) 8%);
    --surface-row: color-mix(in srgb, var(--surface-2) 58%, transparent);
    --surface-row-hover: color-mix(in srgb, var(--accent-primary-subtle) 24%, var(--surface-2) 76%);
    --surface-selected: color-mix(in srgb, var(--accent-primary-subtle) 40%, var(--surface-2) 60%);
    --border-glass: color-mix(in srgb, var(--text-primary) 10%, transparent);
    --line-faint: color-mix(in srgb, var(--text-primary) 7%, transparent);
    --line-default: color-mix(in srgb, var(--text-primary) 12%, transparent);
    --line-strong: color-mix(in srgb, var(--text-primary) 20%, transparent);
    --panel-radius: var(--radius-sm);
    --control-radius: var(--radius-sm);
    --shadow-premium: 0 26px 80px rgba(0, 0, 0, 0.36);
    --focus-ring: 0 0 0 3px var(--accent-primary-subtle);
    --accent-gradient: color-mix(in srgb, var(--accent-primary) 92%, var(--surface-0) 8%);
    --accent-gradient-quiet: color-mix(in srgb, var(--accent-primary-subtle) 64%, transparent);
    --gold-gradient: color-mix(in srgb, var(--accent-secondary) 92%, var(--surface-0) 8%);
    --table-header-bg: color-mix(in srgb, var(--surface-2) 72%, var(--surface-0) 28%);
    --table-row-hover: color-mix(in srgb, var(--accent-primary-subtle) 32%, var(--surface-2) 68%);
    --button-primary-bg: color-mix(in srgb, var(--accent-primary) 92%, var(--surface-0) 8%);
    --button-primary-text: #031016;

    /* --- Legacy Palette Bridge ---
       Older scoped pages used Tailwind-ish stone/amber/emerald names. Keep
       those calls theme-aware so archive, rankings, scoring, and admin pages
       inherit the new product language without white fallback panels. */
    --stone-50: color-mix(in srgb, var(--surface-2) 84%, var(--text-primary) 4%);
    --stone-100: color-mix(in srgb, var(--surface-2) 76%, var(--text-primary) 7%);
    --stone-200: color-mix(in srgb, var(--surface-3) 82%, var(--text-primary) 4%);
    --stone-300: color-mix(in srgb, var(--text-primary) 22%, var(--surface-3) 78%);
    --stone-400: var(--text-tertiary);
    --stone-500: var(--text-tertiary);
    --stone-600: var(--text-secondary);
    --stone-700: var(--text-primary);
    --stone-800: var(--surface-1);
    --stone-900: var(--surface-0);

    --slate-500: var(--text-tertiary);
    --slate-600: var(--text-secondary);
    --slate-700: var(--text-primary);
    --slate-800: var(--surface-1);
    --slate-900: var(--surface-0);

    --amber-50: var(--accent-secondary-subtle);
    --amber-100: color-mix(in srgb, var(--accent-secondary-subtle) 72%, transparent);
    --amber-200: color-mix(in srgb, var(--accent-secondary) 24%, var(--surface-2) 76%);
    --amber-300: color-mix(in srgb, var(--accent-secondary) 48%, var(--surface-2) 52%);
    --amber-400: var(--accent-secondary-hover);
    --amber-500: var(--accent-secondary);
    --amber-600: color-mix(in srgb, var(--accent-secondary) 88%, var(--text-primary) 12%);
    --amber-700: color-mix(in srgb, var(--accent-secondary) 78%, var(--text-primary) 22%);
    --amber-800: color-mix(in srgb, var(--accent-secondary) 66%, var(--text-primary) 34%);

    --emerald-100: var(--accent-success-subtle);
    --emerald-300: color-mix(in srgb, var(--accent-success) 42%, var(--surface-2) 58%);
    --emerald-500: var(--accent-success);
    --emerald-600: color-mix(in srgb, var(--accent-success) 88%, var(--text-primary) 12%);
    --emerald-700: color-mix(in srgb, var(--accent-success) 74%, var(--text-primary) 26%);

    --blue-100: var(--accent-info-subtle);
    --blue-500: var(--accent-info);
    --blue-600: color-mix(in srgb, var(--accent-info) 88%, var(--text-primary) 12%);
    --blue-700: color-mix(in srgb, var(--accent-info) 74%, var(--text-primary) 26%);

    --rose-100: var(--accent-danger-subtle);
    --rose-500: var(--accent-danger);
    --rose-700: color-mix(in srgb, var(--accent-danger) 74%, var(--text-primary) 26%);
    --orange-200: color-mix(in srgb, var(--accent-warning) 24%, var(--surface-2) 76%);
    --orange-300: color-mix(in srgb, var(--accent-warning) 44%, var(--surface-2) 56%);

    /* --- Layout Chrome (themes may override) --- */
    --header-height: 44px;
    --sidebar-width: 220px;
    --header-bar-padding-x: 1.25rem;
    --top-nav-padding-x: 1.25rem;

    /* --- Content Surface (themes opt-in to floating-card aesthetic) ---
       Default is macOS-style cohesive window: 0 radius, no shadow.
       Themes like obsidian/vintage that want a "floating panel" feel
       can override these to add subtle depth. */
    --content-radius: 0;
    --content-shadow: none;

    /* --- Widget / Card Tokens (themes may override) --- */
    --widget-bg: var(--surface-2);
    --widget-bg-hover: var(--surface-3);
    --widget-border: var(--border-subtle);
    --widget-border-hover: var(--border-default);
    --widget-radius: var(--radius-lg);
    --widget-padding-x: 1.25rem;
    --widget-padding-y: 1rem;
    --widget-shadow: none;

    /* --- Dashboard Layout Tokens --- */
    --dash-hero-pad-x: 2.5rem;
    --dash-hero-pad-y: 2rem;
    --dash-status-pad-x: 2.5rem;
    --dash-status-pad-y: 0.75rem;
    --dash-section-pad-x: 1.5rem;
    --dash-section-pad-y: 1rem;
    --dash-secondary-width: 380px;
    --dash-canvas-bg: var(--surface-0);
    --dash-primary-bg: var(--surface-0);
    --dash-secondary-bg: var(--surface-1);
    --dash-divider: var(--border-subtle);

    /* --- Hero Typography Tokens --- */
    --hero-title-family: var(--font-display);
    --hero-title-size: 1.75rem;
    --hero-title-weight: 760;
    --hero-title-style: normal;
    --hero-title-tracking: 0;
    --hero-title-color: var(--text-primary);

    --hero-stat-family: var(--font-mono);
    --hero-stat-size: 2rem;
    --hero-stat-weight: 700;
    --hero-stat-tracking: 0;
    --hero-stat-color: var(--text-primary);
    --hero-stat-featured-color: var(--accent-primary);

    --hero-label-size: 0.625rem;
    --hero-label-weight: 500;
    --hero-label-tracking: 0;
    --hero-label-color: var(--text-quaternary);

    /* --- Section Title Tokens --- */
    --section-title-family: var(--font-display);
    --section-title-size: 1.1rem;
    --section-title-weight: 720;
    --section-title-style: normal;
    --section-title-tracking: 0;
    --section-title-color: var(--text-secondary);

    /* --- Nav Item Tokens (top-nav layout) --- */
    --nav-text: rgba(255, 255, 255, 0.55);
    --nav-text-hover: rgba(255, 255, 255, 0.9);
    --nav-text-active: #ffffff;
    --nav-font-size: 0.8125rem;
    --nav-font-weight: 420;
    --nav-tracking: 0;
    --nav-active-indicator: var(--accent-primary);
    --nav-item-gap: 1.5rem;

    /* --- Transitions --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* --- Position Colors --- */
    --position-qb: #ef4444;
    --position-rb: #10b981;
    --position-wr: #3b82f6;
    --position-te: #a855f7;
    --position-k: #f59e0b;
    --position-def: #06b6d4;

    /* --- Bootstrap Bridge --- */
    --bs-body-bg: var(--surface-1);
    --bs-body-color: var(--text-primary);
    --bs-font-sans-serif: var(--font-body);
    --bs-font-serif: var(--font-display);
    --bs-primary: var(--accent-primary);
    --bs-secondary: var(--text-secondary);
    --bs-success: var(--accent-success);
    --bs-danger: var(--accent-danger);
    --bs-warning: var(--accent-warning);
    --bs-info: var(--accent-info);
    --bs-muted: var(--text-tertiary);
    /* Without these, Bootstrap falls back to its stock light-gray #dee2e6 border / 8px radius,
       which renders as a harsh bright hairline on the near-black aurora canvas. Bridge them to the
       theme tokens so every --bs-border-color consumer (modals, tables, list-groups) tracks the theme. */
    --bs-border-color: var(--border-default);
    --bs-border-radius: var(--radius-sm);
}