/* ============================================================
   CasinoWorld – Midnight Gold Design Tokens
   ============================================================ */

:root {
    /* ── Color Palette (Midnight Gold) ─────────────────── */
    /* Level 0: The deepest base */
    --bg-primary:    #060914;
    
    /* Level 1: Elevated cards & containers */
    --bg-card:       #0b1326;
    
    /* Level 2: Glass overlays & modals */
    --bg-glass:      rgba(11, 19, 38, 0.8);
    
    /* UI Interactions */
    --bg-hover:      #121d3a;
    --bg-input:      #0b1326;

    /* Accents */
    --accent-gold:   #f59e0b;
    --accent-green:  #10b981;
    --accent-red:    #ef4444;
    --accent-indigo: #6366f1;

    /* Glows & Lighting */
    --gold-glow:     rgba(245, 158, 11, 0.3);
    --gold-glow-focus: 0 0 3px rgba(245, 158, 11, 0.5);
    --green-glow:    rgba(16, 185, 129, 0.3);
    --red-glow:      rgba(239, 68, 68, 0.3);
    
    /* Glass Borders & Inner Lighting */
    --border-indigo: rgba(99, 102, 241, 0.15);
    --inner-light:   inset 0 1px 0 rgba(245, 158, 11, 0.1);

    /* Text Colors */
    --text-primary:  #ffffff;
    --text-secondary:#e0e7ff; /* High opacity indigo-white */
    --text-muted:    #8b93bc;
    --text-dark:     #000000;

    /* ── Gradients ─────────────────────────────────────── */
    --gradient-gold:   linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-green:  linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-divider: linear-gradient(90deg, rgba(99, 102, 241, 0.2) 0%, transparent 100%);
    --gradient-card:   linear-gradient(145deg, #0b1326 0%, #060914 100%);
    --gradient-shine:  linear-gradient(90deg, transparent 0%, rgba(245,158,11,0.1) 50%, transparent 100%);

    /* ── Typography ────────────────────────────────────── */
    --font-primary:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

    --fs-xs:    0.75rem;    /* 12px */
    --fs-sm:    0.875rem;   /* 14px */
    --fs-base:  1rem;       /* 16px */
    --fs-md:    1.125rem;   /* 18px */
    --fs-lg:    1.25rem;    /* 20px */
    --fs-xl:    1.5rem;     /* 24px */
    --fs-2xl:   2rem;       /* 32px */
    --fs-3xl:   2.5rem;     /* 40px */
    --fs-4xl:   3rem;       /* 48px */

    --fw-normal:  400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   900;

    /* ── Spacing Scale (4px base) ──────────────────────── */
    --sp-1:  0.25rem;   /* 4px */
    --sp-2:  0.5rem;    /* 8px */
    --sp-3:  0.75rem;   /* 12px */
    --sp-4:  1rem;      /* 16px */
    --sp-5:  1.25rem;   /* 20px */
    --sp-6:  1.5rem;    /* 24px */
    --sp-8:  2rem;      /* 32px */
    --sp-10: 2.5rem;    /* 40px */
    --sp-12: 3rem;      /* 48px */
    --sp-16: 4rem;      /* 64px */
    --sp-20: 5rem;      /* 80px */

    /* ── Border Radius ─────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;     /* Default */
    --radius-lg:   12px;
    --radius-xl:   24px;    /* Large Containers */
    --radius-full: 9999px;

    /* ── Elevations & Shadows ──────────────────────────── */
    --shadow-base:   0 20px 40px rgba(0, 0, 0, 0.4);
    --shadow-glow:   0 0 20px var(--gold-glow);
    --blur-glass:    blur(24px);

    /* ── Transitions ───────────────────────────────────── */
    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
    --ease-snap: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --duration-fast:  150ms;
    --duration-base:  250ms;
    --duration-slow:  400ms;

    /* ── Z-Index Scale ─────────────────────────────────── */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
    --z-tooltip:  600;

    /* ── Layout ────────────────────────────────────────── */
    --sidebar-width:   260px;
    --sidebar-collapsed: 72px;
    --header-height:   64px;
    --max-content:     1200px;
}