/* =============================================================
   XI ROYALE — Design Tokens
   THE single source of truth for every color in the platform.
   Both light and dark mode values are defined here.
   All other CSS/JS reads from these variables.
   ============================================================= */

:root,
html[data-theme="light"] {
    /* ── Page Backgrounds ── */
    --bg-primary:       #F5F6FA;
    --bg-secondary:     #FFFFFF;
    --bg-tertiary:      #EEF0F5;

    /* ── Card Backgrounds ── */
    --bg-card:          #FFFFFF;
    --bg-card-hover:    #FAFBFF;
    --bg-card-inner:    #F5F6FA;
    --bg-overlay:       rgba(0, 0, 0, 0.4);

    /* ── Text ── */
    --text-primary:     #1A1D26;
    --text-secondary:   #5A5F72;
    --text-tertiary:    #9BA1B2;
    --text-inverse:     #FFFFFF;

    /* ── Brand (Electric Teal) ── */
    --brand:            #00D2BE;
    --brand-dark:       #00A898;
    --brand-light:      #33DDCC;
    --brand-bg:         rgba(0, 210, 190, 0.08);
    --brand-bg-strong:  rgba(0, 210, 190, 0.15);
    --brand-border:     rgba(0, 210, 190, 0.2);

    /* ── Borders ── */
    --border-light:     rgba(0, 0, 0, 0.06);
    --border-medium:    rgba(0, 0, 0, 0.1);

    /* ── Shadows ── */
    --shadow-card:      0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    --shadow-card-hover:0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-elevated:  0 8px 30px rgba(0, 0, 0, 0.08);

    /* ── Navigation ── */
    --nav-bg:           rgba(255, 255, 255, 0.92);
    --nav-border:       rgba(0, 0, 0, 0.06);
    --nav-icon:         #9BA1B2;
    --nav-icon-active:  #00D2BE;
    --nav-label:        #9BA1B2;
    --nav-label-active: #00D2BE;

    /* ── Header ── */
    --header-bg:        rgba(255, 255, 255, 0.92);
    --header-border:    rgba(0, 210, 190, 0.15);

    /* ── Drawer ── */
    --drawer-bg:        rgba(255, 255, 255, 0.98);
    --drawer-border:    rgba(0, 0, 0, 0.06);

    /* ── Status Colors ── */
    --success:          #10B981;
    --danger:           #EF4444;
    --warning:          #F59E0B;
    --info:             #3B82F6;

    /* ── Sparkline ── */
    --sparkline-line:   #00D2BE;
    --sparkline-fill:   rgba(0, 210, 190, 0.15);

    /* ── Arena Card ── */
    --arena-overlay:    linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.5) 50%, rgba(0, 210, 190, 0.15) 100%);

    /* ── Legacy Alias (backwards compat) ── */
    --primary:          #00D2BE;
}


/* ── Dark Mode ── */
html[data-theme="dark"] {
    /* ── Page Backgrounds ── */
    --bg-primary:       #1A1A1A;
    --bg-secondary:     #242424;
    --bg-tertiary:      #2C2C2C;

    /* ── Card Backgrounds ── */
    --bg-card:          rgba(44, 44, 44, 0.9);
    --bg-card-hover:    rgba(54, 54, 54, 0.95);
    --bg-card-inner:    rgba(255, 255, 255, 0.04);
    --bg-overlay:       rgba(0, 0, 0, 0.7);

    /* ── Text ── */
    --text-primary:     #FFFFFF;
    --text-secondary:   rgba(255, 255, 255, 0.85);
    --text-tertiary:    rgba(255, 255, 255, 0.65);
    --text-inverse:     #1A1D26;

    /* ── Brand (Electric Teal — same in both modes) ── */
    --brand:            #00D2BE;
    --brand-dark:       #00A898;
    --brand-light:      #33DDCC;
    --brand-bg:         rgba(0, 210, 190, 0.1);
    --brand-bg-strong:  rgba(0, 210, 190, 0.18);
    --brand-border:     rgba(0, 210, 190, 0.25);

    /* ── Borders ── */
    --border-light:     rgba(255, 255, 255, 0.06);
    --border-medium:    rgba(255, 255, 255, 0.1);

    /* ── Shadows ── */
    --shadow-card:      0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-card-hover:0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-elevated:  0 12px 40px rgba(0, 0, 0, 0.5);

    /* ── Navigation ── */
    --nav-bg:           rgba(26, 26, 26, 0.92);
    --nav-border:       rgba(255, 255, 255, 0.06);
    --nav-icon:         rgba(255, 255, 255, 0.35);
    --nav-icon-active:  #00D2BE;
    --nav-label:        rgba(255, 255, 255, 0.35);
    --nav-label-active: #00D2BE;

    /* ── Header ── */
    --header-bg:        rgba(26, 26, 26, 0.92);
    --header-border:    rgba(0, 210, 190, 0.2);

    /* ── Drawer ── */
    --drawer-bg:        rgba(26, 26, 26, 0.98);
    --drawer-border:    rgba(255, 255, 255, 0.06);

    /* ── Arena Card ── */
    --arena-overlay:    linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 210, 190, 0.1) 100%);

    /* ── Legacy Alias ── */
    --primary:          #00D2BE;
}