/* ========================================
   SMART OASIS - THEME SYSTEM (SHOPIFY INSPIRED)
   Brand ID: Smart Oasis (Teal)
   Theme: Dark-First Digital Theatre
   ======================================== */

:root {
    /* --- 1. BRAND COLORS (Smart Oasis ID) --- */
    --color-primary: #0b85a4;        /* Brand Teal */
    --color-primary-rgb: 11, 133, 164;
    --color-primary-dark: #096f89;
    --color-primary-light: #18a9c0;
    --color-accent: #00d2ff;         /* Bright Cyan for gradients */
    --color-success: #27ae60;        /* Success Green */
    --color-error: #e74c3c;          /* Error Red */
    --color-warning: #f1c40f;        /* Warning Yellow */

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

    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-theatrical: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);

    /* --- 3. SHOPIFY SHADOW SYSTEM (Stacked) --- */
    --shadow-layered: rgba(0,0,0,0.1) 0px 0px 0px 1px, 
                      rgba(0,0,0,0.1) 0px 2px 2px, 
                      rgba(0,0,0,0.1) 0px 4px 4px, 
                      rgba(0,0,0,0.1) 0px 8px 8px;

    /* --- 4. DEFAULT (DARK) VARIABLES --- */
    --color-void: #000000;           /* Root Background */
    --color-deep-teal: #02090A;      /* Card Surfaces */
    --color-dark-forest: #061A1C;    /* Section Backgrounds */
    --color-forest: #102620;         /* Elevated Surfaces / Nav */
    --color-card-border: #1E2C31;    /* Subtle boundary */
    --color-surface: var(--color-deep-teal);
    --color-surface-elevated: var(--color-forest);
    --color-background: var(--color-void);
    --color-border: var(--color-card-border);

    --color-white: #FFFFFF;          /* Primary Text on Dark */
    --color-white-rgb: 255, 255, 255;
    --color-text: #FFFFFF;
    --color-text-secondary: #E4E4E7; /* High contrast secondary text for dark mode */
    --color-muted: #A1A1AA;          /* Secondary Text */
    --color-shade-30: #D4D4D8;
    
    --header-bg: rgba(16, 38, 32, 0.95);
    --footer-bg: #061A1C;
    --shadow-glow: inset rgba(255,255,255,0.03) 0px 1px 0px;
}

/* Light Theme Overrides */
[data-theme="light"] {
    --color-void: #F8FAFC;           /* Slightly warmer root background */
    --color-deep-teal: #FFFFFF;      /* Card Surfaces */
    --color-dark-forest: #F1F5F9;    /* Section Backgrounds */
    --color-forest: #E2E8F0;         /* Elevated Surfaces / Nav */
    --color-card-border: #E2E8F0;    /* Subtle boundary */

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

    --color-text: #0F172A;           /* Primary Text */
    --color-text-secondary: #475569; /* High contrast secondary text for light mode */
    --color-muted: #64748B;          /* Secondary Text */
    --color-shade-30: #94A3B8;
    --color-white: #0F172A;          /* Inverted for light mode common usage */
    --color-white-rgb: 15, 23, 42;   /* RGB of dark text for transparent usage */
    --color-accent: #0b85a4;         /* Use primary as accent in light mode for clarity */
    --color-success: #2ecc71;
    --color-error: #e74c3c;
    --color-warning: #f39c12;
    
    --header-bg: rgba(255, 255, 255, 0.98);
    --footer-bg: #F8FAFC;            /* Consistent with background */
    --shadow-glow: inset rgba(0,0,0,0.03) 0px 1px 0px;
}

/* Base Body Styles */
body {
    background-color: var(--color-void);
    color: var(--color-text);
    font-family: 'Inter', -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;
}