/* =============================================
   CasinoWorld – CSS Variables
   Design-Tokens & Custom Properties
   ============================================= */

:root {
    /* Primary Colors – Blue Casino Theme */
    --color-bg-darkest:    #050a18;
    --color-bg-dark:       #0a1628;
    --color-bg-medium:     #0f2040;
    --color-bg-card:       #112244;
    --color-bg-card-hover: #153060;
    --color-bg-light:      #1a3358;

    /* Accent Colors – Premium Blue Palette */
    --color-primary:       #3b82f6;
    --color-primary-glow:  #60a5fa;
    --color-primary-dark:  #2563eb;
    --color-secondary:     #818cf8;
    --color-accent:        #a78bfa;
    --color-accent-glow:   #c4b5fd;

    /* Neon / Glow – Refined */
    --neon-blue:           #60a5fa;
    --neon-purple:         #a78bfa;
    --neon-gold:           #fbbf24;
    --neon-green:          #34d399;
    --neon-red:            #f87171;

    /* Text */
    --text-primary:        #f1f5f9;
    --text-secondary:      #94a3b8;
    --text-muted:          #475569;
    --text-glow:           #818cf8;

    /* Rank Colors */
    --rank-bronze:         #cd7f32;
    --rank-iron:           #9ea2a7;
    --rank-gold:           #fbbf24;
    --rank-platin:         #e2e8f0;
    --rank-diamond:        #38bdf8;
    --rank-elite:          #f97316;
    --rank-champion:       #a855f7;

    /* Borders & Shadows */
    --border-color:        rgba(59, 130, 246, 0.12);
    --border-glow:         rgba(129, 140, 248, 0.25);
    --shadow-card:         0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow:         0 0 20px rgba(59, 130, 246, 0.2);
    --shadow-neon:         0 0 30px rgba(129, 140, 248, 0.25), 0 0 60px rgba(129, 140, 248, 0.08);

    /* Glass */
    --glass-bg:            rgba(15, 23, 50, 0.65);
    --glass-border:        rgba(59, 130, 246, 0.15);
    --glass-blur:          16px;

    /* Spacing */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Border Radius */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-full:  50%;

    /* Typography */
    --font-main:    'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Outfit', 'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.5s ease;
    --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}