:root {
    /* ============================================
       PRIMARY COLORS
       ============================================ */
    --color-primary: #E50914;
    --color-primary-hover: #f40617;
    --color-primary-light: #ff6b6b;
    --color-primary-dark: #800108;
    
    /* Secondary/Accent */
    --color-secondary: #D7D6D1;
    --color-secondary-hover: #ffffff;
    
    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    --bg-dark: black;
    --bg-soft-dark: #394851;
    --bg-card: #1a1a1a;
    --bg-hover: #222222;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-transparent: transparent;
    
    /* ============================================
       TEXT COLORS
       ============================================ */
    --text-light: #ffffff;
    --text-muted: #D7D6D1;
    --text-dark: #000000;
    --text-primary: #E50914;
    --text-secondary: #D2D2CF;
    
    /* ============================================
       ACCENT & STATUS COLORS
       ============================================ */
    --color-success: #008000;
    --color-success-light: #aefc18;
    --color-warning: #FFBF00;
    --color-warning-orange: orange;
    --color-error: #dc3545;
    --color-error-light: #ff4d4d;
    --color-info: #79B8F3;
    
    /* Status Dots */
    --color-dot-red: linear-gradient(180deg, #E50914 0%, #800108 100%);
    --color-dot-green: #008000;
    --color-dot-gray: rgba(72, 71, 71, 0.81);
    
    /* ============================================
       GRADIENTS
       ============================================ */
    --gradient-primary: linear-gradient(180deg, #E50914 0%, #800108 100%);
    --gradient-overlay: linear-gradient(to top, #000 0%, transparent 100%);
    --gradient-button: linear-gradient(180deg, #E50914 0%, #800108 100%);
    --gradient-check: #61eb14;
    
    /* ============================================
       BORDERS
       ============================================ */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-light: rgba(255, 255, 255, 0.5);
    --border-color-strong: rgba(255, 255, 255, 0.24);
    --border-color-card: #0000001a;
    
    /* ============================================
       BORDER RADIUS
       ============================================ */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 25px;
    --radius-full: 50px;
    --radius-button: 5px;
    --radius-card: 7px;
    --radius-episode: 10px;
    
    /* ============================================
       EQUAL SPACING SYSTEM
       All sides equal - Top/Bottom = Left/Right
       ============================================ */
    
    /* Base spacing scale */
    --space-0: 0;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 20px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    
    /* Legacy aliases */
    --spacing-xs: var(--space-1);
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);
    --spacing-2xl: var(--space-10);
    --spacing-3xl: var(--space-12);
    
    /* ============================================
       RESPONSIVE APP SPACING
       Body padding - scales with screen size
       ============================================ */
    --app-space: var(--space-4);      /* Mobile: 16px */
    --app-space-md: var(--space-5);   /* Tablet: 20px */
    --app-space-lg: var(--space-6);   /* Desktop: 24px */
    --app-space-xl: var(--space-8);   /* Large: 32px */
    
    /* ============================================
       CONTAINER PADDING
       ============================================ */
    --container-padding: var(--space-4);
    --container-padding-md: var(--space-5);
    --container-padding-lg: var(--space-8);
    --container-padding-xl: var(--space-10);
    
    /* ============================================
       LAYOUT SPACING
       ============================================ */
    --spacing-navbar: 40px;
    --spacing-container: var(--space-6);
    --spacing-card: var(--space-5);
    --section-gap: var(--space-6);
    --container-max-width: 1440px;
    --container-wide-width: 1600px;
    
    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --font-display: 'Roboto', sans-serif;
    
    /* Font Sizes */
    --text-xs: 10px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 22px;
    --text-3xl: 3em;
    --text-banner: 4rem;
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;
    
    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-scroll: all 0.3s ease;
    
    /* ============================================
       Z-INDEX LAYERS
       ============================================ */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1080;
    --z-navbar: 1100;
    --z-hover-card: 999999;
    
    /* ============================================
       SHADOWS
       ============================================ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-button: 1px 1px #00000017;
    
    /* ============================================
       LAYOUT SIZES
       ============================================ */
    --navbar-height: 80px;
    --footer-height: auto;
    --container-max-width: 1600px;
    --hero-height: 90vh;
    --hero-height-tablet: 86vh;
    --hero-height-mobile: 42vh;
    --video-container-height: 90vh;
    --card-width: 267px;
    --card-height: 160px;
    
    /* ============================================
       BREAKPOINTS (for reference)
       ============================================ */
    --breakpoint-sm: 320px;
    --breakpoint-md: 480px;
    --breakpoint-lg: 767px;
    --breakpoint-xl: 960px;
    --breakpoint-2xl: 1200px;
    --breakpoint-3xl: 1600px;
    
    /* ============================================
       LEGACY SPACING ALIASES (for backward compatibility)
       ============================================ */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-navbar: 40px;
    --spacing-container: 51px;
    --spacing-card: 20px;
}

/* ============================================
   LEGACY COMPATIBILITY
   Keep old variable names for backward compatibility
   ============================================ */
:root {
    --primary-color: var(--color-primary);
    --dark-bg: var(--bg-dark);
    --soft-dark: var(--bg-soft-dark);
    --card-bg: var(--bg-card);
    --hover-bg: var(--bg-hover);
    --text-light: var(--text-light);
    --text-muted: var(--text-muted);
    --border-radius: var(--radius-md);
}