/**
 * Cinestesia Film - CSS Variables
 * Design System with CSS Custom Properties
 */

:root {
    /* ==========================================
       COLORS - Light Mode
       ========================================== */
    /* Backgrounds */
    --bg-color: #FAFAFA;
    --bg-dark: #09090B;
    --bg-light: #FFFFFF;
    --bg-secondary: #F5F5F5;

    /* Text Colors */
    --text-main: #09090B;
    --text-secondary: #3F3F46;
    --text-muted: #71717A;
    --text-light: #A1A1AA;

    /* Accent Colors - Cinestesia Brand */
    --accent: #D4A853;
    --accent-hover: #B4934A;
    --accent-light: #F5E6C8;
    --accent-blue: #2563EB;

    /* Utility */
    --white: #FFFFFF;
    --black: #000000;

    /* Borders & Shadows */
    --border-color: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.05);
    --card-bg: #FFFFFF;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-light: rgba(0, 0, 0, 0.05);

    /* ==========================================
       TYPOGRAPHY
       ========================================== */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Archivo', sans-serif;

    /* Font Sizes */
    --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;

    /* ==========================================
       SPACING
       ========================================== */
    --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;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ==========================================
       EFFECTS
       ========================================== */
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s ease-in-out;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Container */
    --container-max: 1280px;
    --container-padding: 1.5rem;
}

/* ==========================================
   DARK MODE
   ========================================== */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-color: #09090B;
    --bg-dark: #18181B;
    --bg-light: #27272A;
    --bg-secondary: #1E1E24;

    /* Text Colors */
    --text-main: #FAFAFA;
    --text-secondary: #E4E4E7;
    --text-muted: #A1A1AA;
    --text-light: #71717A;

    /* Accent Colors */
    --accent: #D4A853;
    --accent-hover: #E8C878;
    --accent-light: rgba(212, 168, 83, 0.2);
    --accent-blue: #3B82F6;

    /* Borders & Shadows */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --card-bg: #18181B;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-light: rgba(0, 0, 0, 0.2);
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Backgrounds */
        --bg-color: #09090B;
        --bg-dark: #18181B;
        --bg-light: #27272A;
        --bg-secondary: #1E1E24;

        /* Text Colors */
        --text-main: #FAFAFA;
        --text-secondary: #E4E4E7;
        --text-muted: #A1A1AA;
        --text-light: #71717A;

        /* Accent Colors */
        --accent: #D4A853;
        --accent-hover: #E8C878;
        --accent-light: rgba(212, 168, 83, 0.2);
        --accent-blue: #3B82F6;

        /* Borders & Shadows */
        --border-color: rgba(255, 255, 255, 0.1);
        --border-light: rgba(255, 255, 255, 0.05);
        --card-bg: #18181B;
        --shadow-color: rgba(0, 0, 0, 0.3);
        --shadow-light: rgba(0, 0, 0, 0.2);
    }
}