/* ========================================
   PODE - THEME SYSTEM (SHOPIFY INSPIRED)
   Brand ID: PODE (Indigo)
   Theme: Dark-First Digital Theatre
   ======================================== */

:root {
    /* --- 1. BRAND COLORS (Zorium Aesthetic) --- */
    --color-primary: #00ff9d;        /* Vibrant Emerald Green */
    --color-primary-rgb: 0, 255, 157;
    --color-primary-dark: #00df82;
    --color-primary-light: #a1ffda;
    --color-accent: #00ff9d;         /* High-contrast Emerald */
    --color-success: #00ff9d;        
    --color-error: #ff4d4d;          
    --color-warning: #ffcc00;        

    /* --- 2. GLOBAL TOKENS --- */
    --radius-pill: 9999px;
    --radius-xl: 32px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-theatrical: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

    /* --- 3. SHADOW SYSTEM --- */
    --shadow-layered: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 255, 157, 0.2);

    /* --- 4. DARK THEME (Zorium) --- */
    --color-void: #050505;           /* Near Black Background */
    --color-deep-indigo: #0a0a0a;    /* Slightly lighter for cards */
    --color-dark-slate: #050505;     
    --color-slate: #111111;          /* Nav / Surfaces */
    --color-card-border: #1a1a1a;    
    --color-surface: var(--color-deep-indigo);
    --color-surface-elevated: var(--color-slate);
    --color-background: var(--color-void);
    --color-border: var(--color-card-border);

    --color-white: #FFFFFF;          
    --color-white-rgb: 255, 255, 255;
    --color-text: #FFFFFF;
    --color-text-secondary: #888888; /* Muted Secondary Text */
    --color-muted: #555555;          
    --color-shade-30: #333333;       
    
    --header-bg: rgba(5, 5, 5, 0.85);
    --footer-bg: #050505;
}

/* Light Theme Overrides */
[data-theme="light"] {
    --color-void: #FFFFFF;           
    --color-deep-indigo: #F8FAFC;    
    --color-dark-slate: #FFFFFF;     
    --color-slate: #F1F5F9;          
    --color-card-border: #E2E8F0;    

    --color-surface: #FFFFFF;
    --color-surface-elevated: #F8FAFC;
    --color-background: #FFFFFF;
    --color-border: #E2E8F0;

    --color-text: #050505;           /* Deep Black for text */
    --color-text-secondary: #475569; 
    --color-muted: #64748B;          
    --color-shade-30: #94A3B8;
    --color-white: #050505;          /* Inverted to dark */
    --color-white-rgb: 5, 5, 5;      
    
    --color-primary: #008f5d;        /* Darker Emerald for light mode contrast */
    --color-primary-rgb: 0, 143, 93;
    --color-accent: #008f5d;
    
    --header-bg: rgba(255, 255, 255, 0.5);
    --footer-bg: #F8FAFC;            
    --shadow-glow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Base Body Styles */
body {
    background-color: var(--color-void);
    color: var(--color-text);
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* Theatrical Section Spacing */
section {
    padding: clamp(80px, 10vw, 120px) 0;
}

/* Global Transition for Theme Switching */
* {
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

/* Skip animations for specific elements */
.no-transition {
    transition: none !important;
}