/*
 * ============================================================
 *  XALLENGER — Design Tokens
 *  File: wwwroot/css/xal-tokens.css
 *
 *  Single source of truth for all CSS custom properties.
 *  Import this FIRST in every page/layout that uses the
 *  Xallenger design system.
 *
 *  MudBlazor v9.1 Integration Notes:
 *  --mud-palette-* variables are declared here so MudBlazor's
 *  own component styles inherit the Xallenger dark theme
 *  automatically — no per-component overrides required for
 *  colour.  Component-level structural overrides live in the
 *  individual xal-*.css files.
 *
 *  Usage in _Host.cshtml / index.html:
 *    <link rel="stylesheet" href="css/xal-tokens.css" />
 * ============================================================
 */

:root {
    /* ----------------------------------------------------------
     Backgrounds  (darkest → lightest surface)
    ---------------------------------------------------------- */
    --xal-bg-page: #060606; /* outermost page canvas        */
    --xal-bg-primary: #0D0D0D; /* main content area            */
    --xal-bg-secondary: #1A1A1A; /* appbar, sidebar, subheaders  */
    --xal-bg-card: #1E1E1E; /* card surfaces                */
    --xal-bg-surface: #2A2A2A; /* chips, badges, inset areas   */
    --xal-bg-input: #2E2E2E; /* form inputs                  */
    --xal-bg-hover: rgba(255, 255, 255, 0.04);
    --xal-bg-selected: rgba(212, 175, 55, 0.08);
    --xal-bg-selected-hover: rgba(212, 175, 55, 0.13);
    /* ----------------------------------------------------------
     Brand — Red
    ---------------------------------------------------------- */
    --xal-red: #CC0000;
    --xal-red-bright: #E63946;
    --xal-red-dim: rgba(204, 0, 0, 0.15);
    --xal-red-border: rgba(204, 0, 0, 0.35);
    /* ----------------------------------------------------------
     Brand — Gold
    ---------------------------------------------------------- */
    --xal-gold: #D4AF37;
    --xal-gold-muted: rgba(212, 175, 55, 0.10);
    --xal-gold-dim: rgba(212, 175, 55, 0.20);
    --xal-gold-border: rgba(212, 175, 55, 0.35);
    --xal-gold-glow: rgba(212, 175, 55, 0.15);
    /* ----------------------------------------------------------
     Accent — Blue  (verified / info states)
    ---------------------------------------------------------- */
    --xal-blue: #1565C0;
    --xal-blue-bright: #42A5F5;
    --xal-blue-dim: rgba(66, 165, 245, 0.15);
    --xal-blue-border: rgba(66, 165, 245, 0.35);
    /* ----------------------------------------------------------
     Bout Corner Colors
    ---------------------------------------------------------- */
    --xal-corner-red: #CC0000;
    --xal-corner-red-bg: rgba(204, 0, 0, 0.12);
    --xal-corner-red-glow: rgba(204, 0, 0, 0.35);
    --xal-corner-blue: #1565C0;
    --xal-corner-blue-bg: rgba(21, 101, 192, 0.12);
    --xal-corner-blue-glow: rgba(21, 101, 192, 0.35);
    /* ----------------------------------------------------------
     Status Colors
    ---------------------------------------------------------- */
    /* Registration / Event */
    --xal-status-open: #22C55E;
    --xal-status-open-bg: rgba(34, 197, 94, 0.15);
    --xal-status-open-border: rgba(34, 197, 94, 0.30);
    --xal-status-weighin: #F59E0B;
    --xal-status-weighin-bg: rgba(245, 158, 11, 0.15);
    --xal-status-weighin-border: rgba(245, 158, 11, 0.30);
    --xal-status-closed: #6B7280;
    --xal-status-closed-bg: rgba(107, 114, 128, 0.15);
    --xal-status-closed-border: rgba(107, 114, 128, 0.30);
    /* Boxer match state */
    --xal-status-matched: #22C55E;
    --xal-status-matched-bg: rgba(34, 197, 94, 0.15);
    --xal-status-matched-border: rgba(34, 197, 94, 0.30);
    --xal-status-unmatched: #E63946;
    --xal-status-unmatched-bg: rgba(230, 57, 70, 0.15);
    --xal-status-unmatched-border: rgba(230, 57, 70, 0.30);
    --xal-status-checkedin: #42A5F5;
    --xal-status-checkedin-bg: rgba(66, 165, 245, 0.15);
    --xal-status-checkedin-border: rgba(66, 165, 245, 0.30);
    --xal-status-withdrawn: #6B7280;
    --xal-status-withdrawn-bg: rgba(107, 114, 128, 0.15);
    --xal-status-withdrawn-border: rgba(107, 114, 128, 0.30);
    --xal-status-unopposed: #A855F7;
    --xal-status-unopposed-bg: rgba(168, 85, 247, 0.15);
    --xal-status-unopposed-border: rgba(168, 85, 247, 0.30);

    /* Match-score quintile bands (1 Perfect → 5 Worst).
       CVD-validated as a set against the dark card surface — change together, not individually. */
    --xal-band-1: #0CA30C;
    --xal-band-2: #5EC26A;
    --xal-band-3: #FAB219;
    --xal-band-4: #EC835A;
    --xal-band-5: #D03B3B;

    /* Gender*/
    --xal-status-female: #A855F7;
    --xal-status-female-bg: rgba(168, 85, 247, 0.15);
    --xal-status-female-border: rgba(168, 85, 247, 0.30);

    --xal-status-male: #3B82F6;
    --xal-status-male-bg: rgba(59, 130, 246, 0.15);
    --xal-status-male-border: rgba(59, 130, 246, 0.30);

    /* Bout confirmation state */
    --xal-status-confirmed: #22C55E;
    --xal-status-confirmed-bg: rgba(34, 197, 94, 0.15);
    --xal-status-confirmed-border: rgba(34, 197, 94, 0.30);
    --xal-status-pending: #F59E0B;
    --xal-status-pending-bg: rgba(245, 158, 11, 0.15);
    --xal-status-pending-border: rgba(245, 158, 11, 0.30);

    /* Non-production environment marker (Staging / Development).
       Deliberately NOT part of the status block above: every status hue already
       carries a data meaning a tester would misread, so environment gets the one
       strong color the status palette never spends. */
    --xal-env: #2DD4BF;
    --xal-env-bg: rgba(45, 212, 191, 0.12);
    --xal-env-border: rgba(45, 212, 191, 0.40);
    /* ----------------------------------------------------------
     Text
    ---------------------------------------------------------- */
    --xal-text: #FFFFFF;
    --xal-text-primary: #F0F0F0;
    --xal-text-secondary: #AAAAAA;
    --xal-text-muted: #9E9E9E; /* readability floor: ≥4.5:1 on every surface up to --xal-bg-surface */
    --xal-text-disabled: #444444;
    --xal-text-black:#000000;
    /* ----------------------------------------------------------
     Borders
    ---------------------------------------------------------- */
    --xal-border: rgba(255, 255, 255, 0.08);
    --xal-border-card: rgba(255, 255, 255, 0.14);
    --xal-border-strong: rgba(255, 255, 255, 0.22);
    /* ----------------------------------------------------------
     Border Radius
    ---------------------------------------------------------- */
    --xal-radius-xs: 4px;
    --xal-radius-sm: 6px;
    --xal-radius-md: 10px;
    --xal-radius-lg: 16px;
    --xal-radius-xl: 24px;
    --xal-radius-pill: 999px;
    /* ----------------------------------------------------------
     Shadows
    ---------------------------------------------------------- */
    --xal-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
    --xal-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.50);
    --xal-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.70);
    --xal-shadow-gold: 0 0 0 1px var(--xal-gold-border), 0 4px 24px rgba(0, 0, 0, 0.50);
    /* ----------------------------------------------------------
     Typography Scale
    ---------------------------------------------------------- */
    --xal-font-family: 'Montserrat', sans-serif;
    --xal-font-xs: 9px;
    --xal-font-sm: 10px;
    --xal-font-base: 11px;
    --xal-font-md: 13px;
    --xal-font-lg: 15px;
    --xal-font-xl: 18px;
    --xal-font-2xl: 22px;
    /* ----------------------------------------------------------
     Layout / Chrome
    ---------------------------------------------------------- */
    --xal-appbar-height-mobile: 64px;
    --xal-appbar-height-desktop: 75px;
    --xal-sidebar-width: 192px;
    --xal-bottom-nav-height: 60px;
    --xal-subheader-top: 64px; /* sticky offset = appbar height */
    /* ----------------------------------------------------------
     Transitions
    ---------------------------------------------------------- */
    --xal-transition-fast: all 0.12s ease;
    --xal-transition-base: all 0.18s ease;
    --xal-transition-slow: all 0.28s ease;
    /* ----------------------------------------------------------
     Avatar Palette  (deterministic: hash(name) % 8 + 1)
     Usage: class="xal-avatar xal-avatar--c{n}"
    ---------------------------------------------------------- */
    --xal-avatar-c1: #7B2D8B; /* purple       */
    --xal-avatar-c2: #1565C0; /* blue         */
    --xal-avatar-c3: #2E7D32; /* green        */
    --xal-avatar-c4: #C62828; /* red          */
    --xal-avatar-c5: #E65100; /* orange       */
    --xal-avatar-c6: #00695C; /* teal         */
    --xal-avatar-c7: #4527A0; /* deep purple  */
    --xal-avatar-c8: #AD1457; /* pink         */
    /* ==========================================================
     MudBlazor v9.1 Palette Overrides
     These map MudBlazor's CSS custom-property system onto the
     Xallenger design token set.  MudBlazor reads these at
     render time; no !important is needed here because they
     are declared at :root before any MudBlazor component
     stylesheet is applied.
    ========================================================== */
    /* --- Core palette --- */
    --mud-palette-primary: var(--xal-gold);
    --mud-palette-primary-text: #000000;
    --mud-palette-primary-darken: #B8960B;
    --mud-palette-primary-lighten: #E8C94A;
    --mud-palette-primary-hover: var(--xal-gold-glow);
    --mud-palette-primary-contrasttext: #000000;
    --mud-palette-secondary: var(--xal-red);
    --mud-palette-secondary-text: #ffffff;
    --mud-palette-secondary-darken: #AA0000;
    --mud-palette-secondary-lighten: var(--xal-red-bright);
    --mud-palette-secondary-hover: var(--xal-red-dim);
    --mud-palette-secondary-contrasttext: #ffffff;
    --mud-palette-tertiary: var(--xal-blue-bright);
    --mud-palette-tertiary-text: #ffffff;
    --mud-palette-tertiary-darken: #1565C0;
    --mud-palette-tertiary-lighten: #90CAF9;
    --mud-palette-tertiary-hover: var(--xal-blue-dim);
    --mud-palette-info: var(--xal-blue-bright);
    --mud-palette-info-text: #ffffff;
    --mud-palette-info-darken: #1565C0;
    --mud-palette-info-lighten: #90CAF9;
    --mud-palette-info-hover: var(--xal-blue-dim);
    --mud-palette-info-contrasttext: #ffffff;
    --mud-palette-success: var(--xal-status-open);
    --mud-palette-success-text: #ffffff;
    --mud-palette-success-darken: #16A34A;
    --mud-palette-success-lighten: #4ADE80;
    --mud-palette-success-hover: var(--xal-status-open-bg);
    --mud-palette-success-contrasttext: #ffffff;
    --mud-palette-warning: var(--xal-status-weighin);
    --mud-palette-warning-text: #000000;
    --mud-palette-warning-darken: #D97706;
    --mud-palette-warning-lighten: #FCD34D;
    --mud-palette-warning-hover: var(--xal-status-weighin-bg);
    --mud-palette-warning-contrasttext: #000000;
    --mud-palette-error: var(--xal-red-bright);
    --mud-palette-error-text: #ffffff;
    --mud-palette-error-darken: #B91C1C;
    --mud-palette-error-lighten: #FCA5A5;
    --mud-palette-error-hover: var(--xal-red-dim);
    --mud-palette-error-contrasttext: #ffffff;
    --mud-palette-dark: var(--xal-bg-secondary);
    --mud-palette-dark-text: var(--xal-text-primary);
    --mud-palette-dark-darken: var(--xal-bg-primary);
    --mud-palette-dark-lighten: var(--xal-bg-card);
    --mud-palette-dark-hover: var(--xal-bg-hover);
    /* --- Surface & background --- */
    --mud-palette-background: var(--xal-bg-page);
    --mud-palette-background-grey: var(--xal-bg-input);
    --mud-palette-surface: var(--xal-bg-card);
    --mud-palette-drawer-background: var(--xal-bg-secondary);
    --mud-palette-appbar-background: var(--xal-bg-secondary);
    --mud-palette-appbar-text: var(--xal-text-primary);
    /* --- Text --- */
    --mud-palette-text-primary: var(--xal-text-primary);
    --mud-palette-text-secondary: var(--xal-text-secondary);
    --mud-palette-text-disabled: var(--xal-text-disabled);
    /* --- Actions & states --- */
    --mud-palette-action-default: var(--xal-text-secondary);
    --mud-palette-action-default-hover: var(--xal-bg-hover);
    --mud-palette-action-disabled: var(--xal-text-disabled);
    --mud-palette-action-disabled-background: rgba(255,255,255,0.05);
    --mud-palette-overlay-dark: rgba(0,0,0,0.70);
    --mud-palette-overlay-light: rgba(0,0,0,0.40);
    /* --- Divider / lines --- */
    --mud-palette-divider: var(--xal-border);
    --mud-palette-divider-light: var(--xal-border);
    --mud-palette-lines-default: var(--xal-border);
    --mud-palette-lines-inputs: var(--xal-border-card);
    /* --- Table specific --- */
    --mud-palette-table-lines: var(--xal-border);
    --mud-palette-table-striped: rgba(255,255,255,0.025);
    --mud-palette-table-hover: var(--xal-bg-hover);
    /* --- Input fields --- */
    --mud-palette-input-outlined-border: var(--xal-border-card);
    --mud-palette-input-outlined-border-hover: var(--xal-gold-border);
    /* --- Chip --- */
    --mud-palette-chip-default-hover: var(--xal-bg-hover);
    /* --- Ripple --- */
    --mud-ripple-color: var(--xal-gold);
    --mud-ripple-opacity: 0.12;
    --mud-ripple-opacity-secondary: 0.08;
    /* --- Shadows (MudBlazor elevation tokens) --- */
    --mud-elevation-0: none;
    --mud-elevation-1: 0 2px 8px rgba(0,0,0,0.45);
    --mud-elevation-2: 0 4px 16px rgba(0,0,0,0.50);
    --mud-elevation-4: 0 4px 24px rgba(0,0,0,0.55);
    --mud-elevation-8: 0 8px 32px rgba(0,0,0,0.60);
    --mud-elevation-12: 0 8px 40px rgba(0,0,0,0.65);
    --mud-elevation-16: 0 12px 48px rgba(0,0,0,0.70);
    --mud-elevation-24: 0 16px 56px rgba(0,0,0,0.75);
    /* --- Typography (MudBlazor font tokens) --- */
    --mud-typography-default-family: 'Montserrat', sans-serif;
    --mud-typography-default-size: 13px;
    --mud-typography-default-weight: 400;
    --mud-typography-default-lineheight: 1.5;
    --mud-typography-default-letterspacing: 0.01em;
    --mud-typography-h1-family: 'Montserrat', sans-serif;
    --mud-typography-h1-weight: 800;
    --mud-typography-h2-family: 'Montserrat', sans-serif;
    --mud-typography-h2-weight: 700;
    --mud-typography-h3-family: 'Montserrat', sans-serif;
    --mud-typography-h3-weight: 700;
    --mud-typography-h4-family: 'Montserrat', sans-serif;
    --mud-typography-h4-weight: 700;
    --mud-typography-h5-family: 'Montserrat', sans-serif;
    --mud-typography-h5-weight: 600;
    --mud-typography-h6-family: 'Montserrat', sans-serif;
    --mud-typography-h6-weight: 600;
    --mud-typography-subtitle1-family: 'Montserrat', sans-serif;
    --mud-typography-subtitle2-family: 'Montserrat', sans-serif;
    --mud-typography-body1-family: 'Montserrat', sans-serif;
    --mud-typography-body2-family: 'Montserrat', sans-serif;
    --mud-typography-button-family: 'Montserrat', sans-serif;
    --mud-typography-button-weight: 700;
    --mud-typography-caption-family: 'Montserrat', sans-serif;
    --mud-typography-overline-family: 'Montserrat', sans-serif;
    /* --- Border radius (MudBlazor shape tokens) --- */
    --mud-default-borderradius: var(--xal-radius-md);
    /* --- z-index stack --- */
    --mud-zindex-drawer: 100;
    --mud-zindex-popover: 1200;
    --mud-zindex-snackbar: 1400;
    --mud-zindex-dialog: 1300;
    --mud-zindex-tooltip: 1500;
    --mud-zindex-appbar: 1100;
}