/* ============================================
   Range Lab - Design System Variables
   New Gen Casino Storytelling
   ============================================ */

:root {
    /* ===== Color Palette - Casino Gold + Ember Red ===== */

    /* Primary Backgrounds - Charcoal */
    --color-bg-primary: #0b0b0e;
    --color-bg-secondary: #111115;
    --color-bg-tertiary: #17171c;
    --color-bg-card: #111115;
    --color-bg-elevated: #1b1b21;
    --color-bg-input: #0f0f13;

    /* Primary Accent - Marquee Gold */
    --color-primary: #d7a84a;
    --color-primary-light: #f2d08a;
    --color-primary-dark: #b68633;
    --color-primary-muted: rgba(215, 168, 74, 0.16);
    --color-primary-glow: rgba(215, 168, 74, 0.35);

    /* Secondary Accent - Ember Red */
    --color-accent: #c0342c;
    --color-accent-light: #e45a52;
    --color-accent-muted: rgba(192, 52, 44, 0.2);

    /* Gold Accent */
    --color-gold: #d7a84a;
    --color-gold-light: #f2d08a;
    --color-gold-dark: #b68633;
    --color-gold-muted: rgba(215, 168, 74, 0.18);

    /* Status Colors */
    --color-green: #3fb37f;
    --color-green-light: #6cd4a3;
    --color-green-dark: #2a8a5f;

    --color-red: #c0342c;
    --color-red-light: #e45a52;
    --color-red-dark: #8f2520;

    --color-blue: #4a5a78;
    --color-blue-light: #6a7aa1;

    --color-purple: #6a5a8a;
    --color-orange: #e29b48;

    /* Text Colors */
    --color-text-primary: #f6f1e6;
    --color-text-secondary: #cbc2b1;
    --color-text-muted: #9a9082;
    --color-text-disabled: #6b645a;

    /* Borders */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(255, 255, 255, 0.16);
    --color-border-focus: var(--color-primary);

    /* Card Suits */
    --color-suit-spade: #1c1f2a;
    --color-suit-club: #1c1f2a;
    --color-suit-heart: #c0342c;
    --color-suit-diamond: #c0342c;

    /* Felt Green - Casino Table */
    --color-felt: #123c2a;
    --color-felt-light: #1c5a3c;
    --color-felt-dark: #0f2e1f;
    --color-felt-border: #0b2418;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #f2d08a 0%, #d7a84a 100%);
    --gradient-primary-hover: linear-gradient(135deg, #f6dfb1 0%, #e0b35a 100%);
    --gradient-gold: linear-gradient(135deg, #f2d08a 0%, #c7902f 100%);
    --gradient-red: linear-gradient(135deg, #d24a3f 0%, #b12d26 100%);
    --gradient-dark: linear-gradient(180deg, #0b0b0e 0%, #0a0a0c 100%);
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    --gradient-glow: radial-gradient(ellipse at center, rgba(215, 168, 74, 0.16) 0%, transparent 70%);
    --gradient-aurora: radial-gradient(circle at 20% 20%, rgba(215, 168, 74, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 15%, rgba(192, 52, 44, 0.16) 0%, transparent 45%),
        radial-gradient(circle at 30% 80%, rgba(215, 168, 74, 0.14) 0%, transparent 50%);

    /* ===== Typography ===== */
    --font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Bricolage Grotesque', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* ===== Spacing ===== */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ===== Border Radius ===== */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ===== Shadows ===== */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.55);
    --shadow-2xl: 0 40px 90px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px rgba(215, 168, 74, 0.25);
    --shadow-glow-strong: 0 0 50px rgba(215, 168, 74, 0.4);
    --shadow-glow-gold: 0 0 40px rgba(215, 168, 74, 0.3);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);

    /* ===== Transitions ===== */
    --transition-fast: 100ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;

    /* ===== Z-Index Scale ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-toast: 700;

    /* ===== Layout ===== */
    --nav-height: 64px;
    --container-max: 1400px;
    --container-narrow: 900px;
    --sidebar-width: 300px;
}

/* Light Theme Override */
.light-theme {
    --color-bg-primary: #f6f0e6;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f1e7d7;
    --color-bg-card: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-bg-input: #f6efe5;

    --color-primary: #b68633;
    --color-primary-muted: rgba(182, 134, 51, 0.12);
    --color-primary-glow: rgba(182, 134, 51, 0.2);

    --color-accent: #c0342c;
    --color-accent-muted: rgba(192, 52, 44, 0.18);

    --color-text-primary: #1d1a16;
    --color-text-secondary: #4b4235;
    --color-text-muted: #7a6c5a;

    --color-border: rgba(26, 31, 46, 0.12);
    --color-border-light: rgba(26, 31, 46, 0.2);

    --shadow-sm: 0 6px 16px rgba(40, 30, 20, 0.12);
    --shadow-md: 0 16px 30px rgba(40, 30, 20, 0.15);
    --shadow-lg: 0 24px 50px rgba(40, 30, 20, 0.18);
    --shadow-card: 0 8px 24px rgba(40, 30, 20, 0.12);
}