/* ============================================
   COLORBASE.CSS - Anamorphic Studio
   Cinematic Color System v5.0
   ============================================ */

/* ============================================
   1. ROOT VARIABLES - DARK THEME (Cinematic Noir)
   ============================================ */
:root {
    /* ===== PRIMARY PALETTE - Deep Void Black ===== */
    --color-primary: #08080B;
    --color-primary-rgb: 8, 8, 11;
    --color-primary-light: #0D0E13;
    --color-primary-dark: #000000;
    /* ===== SECONDARY PALETTE - Ink ===== */
    --color-secondary: #0D0E13;
    --color-secondary-rgb: 13, 14, 19;
    --color-secondary-light: #131318;
    --color-secondary-dark: #050507;
    /* ===== SURFACE PALETTE - Charcoal ===== */
    --color-surface: #0F1015;
    --color-surface-rgb: 15, 16, 21;
    --color-surface-hover: #15161C;
    --color-surface-elevated: #1A1B22;
    --color-surface-elevated-2: #23242C;
    /* ===== TEXT COLORS - Warm White ===== */
    --color-text-primary: #F2F2EE;
    --color-text-primary-rgb: 242, 242, 238;
    --color-text-secondary: #8A8D98;
    --color-text-secondary-rgb: 138, 141, 152;
    --color-text-muted: #4A4D57;
    --color-text-muted-rgb: 74, 77, 87;
    --color-text-inverse: #08080B;
    --color-text-inverse-rgb: 8, 8, 11;
    --color-text-disabled: #2A2B32;
    /* ===== ACCENT COLORS - Cinematic Gold ===== */
    --color-accent: #FFB800;
    --color-accent-rgb: 255, 184, 0;
    --color-accent-light: #FFC933;
    --color-accent-dark: #B38000;
    --color-accent-hover: #FFC933;
    --color-accent-glow: rgba(255, 184, 0, 0.12);
    --color-accent-glow-strong: rgba(255, 184, 0, 0.20);
    --color-accent-gradient: linear-gradient(135deg, #FFB800 0%, #FF9500 50%, #B38000 100%);
    /* ===== BLUE ACCENTS - Electric Cyan ===== */
    --color-blue: #00D4FF;
    --color-blue-rgb: 0, 212, 255;
    --color-blue-dark: #0088A0;
    --color-blue-light: #66E5FF;
    --color-blue-glow: rgba(0, 212, 255, 0.10);
    --color-blue-gradient: linear-gradient(135deg, #00D4FF 0%, #0088A0 100%);
    /* ===== PURPLE ACCENTS - Soft Lilac ===== */
    --color-purple: #A78BFA;
    --color-purple-rgb: 167, 139, 250;
    --color-purple-dark: #6A4DAB;
    --color-purple-light: #C4A8FF;
    --color-purple-glow: rgba(167, 139, 250, 0.08);
    /* ===== BORDER COLORS ===== */
    --color-border: #1A1B22;
    --color-border-rgb: 26, 27, 34;
    --color-border-light: #2A2B32;
    --color-border-hover: #3A3B44;
    --color-border-accent: rgba(255, 184, 0, 0.25);
    --color-border-focus: #FFB800;
    /* ===== SHADOW COLORS ===== */
    --color-shadow-sm: rgba(0, 0, 0, 0.55);
    --color-shadow-md: rgba(0, 0, 0, 0.70);
    --color-shadow-lg: rgba(0, 0, 0, 0.85);
    --color-shadow-xl: rgba(0, 0, 0, 0.95);
    --color-shadow-glow: rgba(255, 184, 0, 0.08);
    --color-shadow-blue: rgba(0, 212, 255, 0.06);
    --color-shadow-purple: rgba(167, 139, 250, 0.06);
    /* ===== OVERLAY COLORS ===== */
    --color-overlay-dark: rgba(8, 8, 11, 0.92);
    --color-overlay-medium: rgba(8, 8, 11, 0.75);
    --color-overlay-light: rgba(255, 255, 255, 0.03);
    --color-overlay-gold: rgba(255, 184, 0, 0.04);
    --color-overlay-blue: rgba(0, 212, 255, 0.03);
    --color-overlay-purple: rgba(167, 139, 250, 0.03);
    /* ===== GRADIENT COLORS ===== */
    --gradient-primary: linear-gradient(165deg, #08080B 0%, #0D0E13 40%, #131318 100%);
    --gradient-secondary: linear-gradient(135deg, #0D0E13 0%, #131318 100%);
    --gradient-surface: linear-gradient(135deg, #0F1015 0%, #15161C 100%);
    --gradient-card: linear-gradient(145deg, #0F1015 0%, #1A1B22 100%);
    --gradient-hero: linear-gradient(165deg, #08080B 0%, #0D0E13 30%, #0088A0 70%, #0D0E13 100%);
    --gradient-accent: linear-gradient(135deg, #FFB800 0%, #FF9500 50%, #B38000 100%);
    --gradient-accent-soft: linear-gradient(135deg, #FFB800 0%, #FFC933 100%);
    --gradient-blue: linear-gradient(135deg, #00D4FF 0%, #0088A0 100%);
    --gradient-purple: linear-gradient(135deg, #A78BFA 0%, #6A4DAB 100%);
    --gradient-mesh: linear-gradient(135deg, #08080B 0%, #0088A0 25%, #0F1015 50%, #15161C 75%, #08080B 100%);
    /* ===== STATUS COLORS ===== */
    --color-success: #3ECF8E;
    --color-success-rgb: 62, 207, 142;
    --color-success-bg: rgba(62, 207, 142, 0.1);
    --color-success-border: rgba(62, 207, 142, 0.3);
    --color-warning: #F59E0B;
    --color-warning-rgb: 245, 158, 11;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-warning-border: rgba(245, 158, 11, 0.3);
    --color-error: #E63946;
    --color-error-rgb: 230, 57, 70;
    --color-error-bg: rgba(230, 57, 70, 0.1);
    --color-error-border: rgba(230, 57, 70, 0.3);
    --color-info: #00D4FF;
    --color-info-rgb: 0, 212, 255;
    --color-info-bg: rgba(0, 212, 255, 0.1);
    --color-info-border: rgba(0, 212, 255, 0.3);
    /* ===== TRANSITION VARIABLES ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    /* ===== BACKGROUND ALIASES ===== */
    --bg-primary: var(--color-primary);
    --bg-secondary: var(--color-secondary);
    --bg-tertiary: #050507;
    --bg-card: var(--color-surface);
    --bg-card-hover: var(--color-surface-hover);
    --bg-card-elevated: var(--color-surface-elevated);
    --bg-nav: rgba(8, 8, 11, 0.95);
    --bg-nav-blur: rgba(8, 8, 11, 0.85);
    --bg-dropdown: var(--color-surface);
    --bg-input: var(--color-secondary);
    --bg-modal: rgba(8, 8, 11, 0.97);
    --bg-tooltip: var(--color-secondary);
    /* ===== TEXT ALIASES ===== */
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-inverse: var(--color-text-inverse);
    --text-disabled: var(--color-text-disabled);
    /* ===== SCROLLBAR ===== */
    --scrollbar-track: var(--color-secondary);
    --scrollbar-thumb: var(--color-accent);
}

/* ============================================
   2. LIGHT THEME - "Golden Champagne"
   ============================================ */

[data-theme="light"] {
    --color-primary: #F0F4F8;
    --color-primary-rgb: 240, 244, 248;
    --color-secondary: #E4EAF0;
    --color-secondary-rgb: 228, 234, 240;
    --color-surface: #FFFFFF;
    --color-surface-hover: #F0F4F8;
    --color-surface-elevated: #E8EEF4;
    --color-text-primary: #0A1628;
    --color-text-primary-rgb: 10, 22, 40;
    --color-text-secondary: #2A4058;
    --color-text-secondary-rgb: 42, 64, 88;
    --color-text-muted: #6A8AA8;
    --color-text-muted-rgb: 106, 138, 168;
    --color-text-inverse: #F0F4F8;
    --color-text-inverse-rgb: 240, 244, 248;
    --color-accent: #B38000;
    --color-accent-rgb: 179, 128, 0;
    --color-accent-light: #D4A020;
    --color-accent-dark: #8A6300;
    --color-accent-hover: #C98F00;
    --color-accent-glow: rgba(179, 128, 0, 0.10);
    --color-accent-glow-strong: rgba(179, 128, 0, 0.18);
    --color-accent-gradient: linear-gradient(135deg, #B38000 0%, #8A6300 50%, #664A00 100%);
    --gradient-accent: linear-gradient(135deg, #B38000 0%, #8A6300 50%, #664A00 100%);
    --gradient-accent-soft: linear-gradient(135deg, #B38000 0%, #D4A020 100%);
    --color-border: #D0DCE8;
    --color-border-rgb: 208, 220, 232;
    --color-border-light: #E0E8F0;
    --color-border-hover: #A0B8C8;
    --color-border-accent: rgba(179, 128, 0, 0.20);
    --color-border-focus: #B38000;
    --color-shadow-sm: rgba(10, 22, 40, 0.04);
    --color-shadow-md: rgba(10, 22, 40, 0.08);
    --color-shadow-lg: rgba(10, 22, 40, 0.12);
    --color-shadow-xl: rgba(10, 22, 40, 0.18);
    --color-shadow-glow: rgba(179, 128, 0, 0.06);
    --color-overlay-dark: rgba(240, 244, 248, 0.92);
    --color-overlay-medium: rgba(240, 244, 248, 0.75);
    --color-overlay-gold: rgba(179, 128, 0, 0.04);
    --gradient-primary: linear-gradient(165deg, #F0F4F8 0%, #E4EAF0 40%, #D0DCE8 100%);
    --gradient-secondary: linear-gradient(135deg, #E4EAF0 0%, #D0DCE8 100%);
    --gradient-surface: linear-gradient(135deg, #FFFFFF 0%, #F0F4F8 100%);
    --gradient-card: linear-gradient(145deg, #FFFFFF 0%, #E8EEF4 100%);
    --gradient-hero: linear-gradient(165deg, #F0F4F8 0%, #E4EAF0 30%, #D0DCE8 70%, #E4EAF0 100%);
    --gradient-mesh: linear-gradient(135deg, #F0F4F8 0%, #D0DCE8 25%, #FFFFFF 50%, #E4EAF0 75%, #F0F4F8 100%);
    --color-success: #059669;
    --color-success-bg: rgba(5, 150, 105, 0.08);
    --color-warning: #D97706;
    --color-warning-bg: rgba(217, 119, 6, 0.08);
    --color-error: #DC2626;
    --color-error-bg: rgba(220, 38, 38, 0.08);
    --color-info: #0088A0;
    --color-info-bg: rgba(0, 136, 160, 0.08);
    --bg-primary: var(--color-primary);
    --bg-secondary: var(--color-secondary);
    --bg-tertiary: #D0DCE8;
    --bg-card: var(--color-surface);
    --bg-card-hover: var(--color-surface-hover);
    --bg-card-elevated: var(--color-surface-elevated);
    --bg-nav: rgba(240, 244, 248, 0.95);
    --bg-nav-blur: rgba(240, 244, 248, 0.85);
    --bg-dropdown: var(--color-surface);
    --bg-input: var(--color-secondary);
    --bg-modal: rgba(240, 244, 248, 0.97);
}

/* ============================================
   4. COLOR UTILITY CLASSES
   ============================================ */

/* ---- Background Colors ---- */
.bg-primary {
    background-color: var(--bg-primary);
}

.bg-secondary {
    background-color: var(--bg-secondary);
}

.bg-tertiary {
    background-color: var(--bg-tertiary);
}

.bg-card {
    background-color: var(--bg-card);
}

.bg-card-hover {
    background-color: var(--bg-card-hover);
}

.bg-card-elevated {
    background-color: var(--bg-card-elevated);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-accent-glow {
    background-color: var(--color-accent-glow);
}

.bg-accent-soft {
    background: var(--gradient-accent-soft);
}

.bg-blue {
    background-color: var(--color-blue);
}

.bg-blue-glow {
    background-color: var(--color-blue-glow);
}

.bg-purple {
    background-color: var(--color-purple);
}

.bg-purple-glow {
    background-color: var(--color-purple-glow);
}

.bg-success {
    background-color: var(--color-success);
}

.bg-success-bg {
    background-color: var(--color-success-bg);
}

.bg-warning {
    background-color: var(--color-warning);
}

.bg-warning-bg {
    background-color: var(--color-warning-bg);
}

.bg-error {
    background-color: var(--color-error);
}

.bg-error-bg {
    background-color: var(--color-error-bg);
}

.bg-info {
    background-color: var(--color-info);
}

.bg-info-bg {
    background-color: var(--color-info-bg);
}

/* ---- Text Colors ---- */
.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-inverse {
    color: var(--color-text-inverse);
}

.text-disabled {
    color: var(--color-text-disabled);
}

.text-accent {
    color: var(--color-accent);
}

.text-accent-light {
    color: var(--color-accent-light);
}

.text-accent-hover {
    color: var(--color-accent-hover);
}

.text-blue {
    color: var(--color-blue);
}

.text-blue-light {
    color: var(--color-blue-light);
}

.text-purple {
    color: var(--color-purple);
}

.text-purple-light {
    color: var(--color-purple-light);
}

.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.text-error {
    color: var(--color-error);
}

.text-info {
    color: var(--color-info);
}

/* ---- Border Colors ---- */
.border-primary {
    border-color: var(--color-border);
}

.border-light {
    border-color: var(--color-border-light);
}

.border-accent {
    border-color: var(--color-accent);
}

.border-accent-light {
    border-color: var(--color-border-accent);
}

.border-focus {
    border-color: var(--color-border-focus);
}

.border-blue {
    border-color: var(--color-blue);
}

.border-purple {
    border-color: var(--color-purple);
}

.border-success {
    border-color: var(--color-success);
}

.border-warning {
    border-color: var(--color-warning);
}

.border-error {
    border-color: var(--color-error);
}

.border-info {
    border-color: var(--color-info);
}

/* ---- Gradient Backgrounds ---- */
.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-secondary {
    background: var(--gradient-secondary);
}

.gradient-surface {
    background: var(--gradient-surface);
}

.gradient-card {
    background: var(--gradient-card);
}

.gradient-hero {
    background: var(--gradient-hero);
}

.gradient-mesh {
    background: var(--gradient-mesh);
}

.gradient-accent {
    background: var(--gradient-accent);
}

.gradient-accent-soft {
    background: var(--gradient-accent-soft);
}

.gradient-blue {
    background: var(--gradient-blue);
}

.gradient-purple {
    background: var(--gradient-purple);
}

.gradient-text {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-blue {
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-purple {
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Glass Effects ---- */
.glass {
    background: rgba(var(--color-surface-rgb), 0.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(var(--color-border-rgb), 0.3);
}

.glass-dark {
    background: rgba(var(--color-primary-rgb), 0.8);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(var(--color-border-rgb), 0.2);
}

.glass-gold {
    background: rgba(var(--color-accent-rgb), 0.06);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(var(--color-accent-rgb), 0.15);
}

.glass-light {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(var(--color-border-rgb), 0.15);
}

.glass-white {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ---- Shadow Utilities ---- */
.shadow-sm {
    box-shadow: 0 1px 3px var(--color-shadow-sm);
}

.shadow-md {
    box-shadow: 0 4px 16px var(--color-shadow-md);
}

.shadow-lg {
    box-shadow: 0 8px 32px var(--color-shadow-lg);
}

.shadow-xl {
    box-shadow: 0 16px 64px var(--color-shadow-xl);
}

.shadow-glow {
    box-shadow: 0 0 40px var(--color-shadow-glow);
}

.shadow-glow-strong {
    box-shadow: 0 0 60px var(--color-accent-glow-strong);
}

.shadow-blue {
    box-shadow: 0 0 40px var(--color-shadow-blue);
}

.shadow-purple {
    box-shadow: 0 0 40px var(--color-shadow-purple);
}

/* ---- Hover State Utilities ---- */
.hover\:bg-accent:hover {
    background-color: var(--color-accent);
}

.hover\:bg-accent-light:hover {
    background-color: var(--color-accent-light);
}

.hover\:bg-accent-glow:hover {
    background-color: var(--color-accent-glow);
}

.hover\:text-accent:hover {
    color: var(--color-accent);
}

.hover\:text-accent-light:hover {
    color: var(--color-accent-light);
}

.hover\:text-primary:hover {
    color: var(--color-text-primary);
}

.hover\:border-accent:hover {
    border-color: var(--color-accent);
}

.hover\:border-focus:hover {
    border-color: var(--color-border-focus);
}

.hover\:shadow-glow:hover {
    box-shadow: 0 0 40px var(--color-shadow-glow);
}

.hover\:shadow-lg:hover {
    box-shadow: 0 8px 32px var(--color-shadow-lg);
}

.hover\:shadow-xl:hover {
    box-shadow: 0 16px 64px var(--color-shadow-xl);
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:translate-y-1:hover {
    transform: translateY(-2px);
}

.hover\:translate-y-2:hover {
    transform: translateY(-4px);
}

/* ---- Transition Utilities ---- */
.transition-colors {
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.transition-all {
    transition: all var(--transition-base);
}

.transition-slow {
    transition: all var(--transition-slow);
}

.transition-bounce {
    transition: all var(--transition-bounce);
}

/* ---- Opacity Utilities ---- */
.opacity-0 {
    opacity: 0;
}

.opacity-25 {
    opacity: 0.25;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}

.hover\:opacity-75:hover {
    opacity: 0.75;
}

.hover\:opacity-100:hover {
    opacity: 1;
}

/* ---- Z-Index Utilities ---- */
.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.z-auto {
    z-index: auto;
}

/* ---- Ring/Focus Utilities ---- */
.ring-accent {
    --ring-color: var(--color-accent);
    --ring-offset-color: var(--bg-primary);
}

.ring-2 {
    box-shadow: 0 0 0 2px var(--ring-color, var(--color-accent));
}

.ring-4 {
    box-shadow: 0 0 0 4px var(--ring-color, var(--color-accent));
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px var(--color-accent);
}

.focus\:ring-offset-2:focus {
    box-shadow: 0 0 0 2px var(--color-accent), 0 0 0 4px var(--bg-primary);
}

/* ---- Gradient Mesh Background ---- */
.bg-mesh {
    background: var(--gradient-mesh);
    position: relative;
}

    .bg-mesh::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 50%, var(--color-accent-glow) 0%, transparent 50%), radial-gradient(circle at 80% 80%, var(--color-blue-glow) 0%, transparent 50%), radial-gradient(circle at 50% 20%, var(--color-purple-glow) 0%, transparent 50%);
        pointer-events: none;
    }

/* ============================================
   5. ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    [data-theme="light"] {
        --color-text-primary: #000000;
        --color-text-secondary: #1A1206;
        --color-accent: #8A6300;
        --color-border: #5C4A2E;
        --color-border-light: #7A6A4A;
    }

    [data-theme="dark"] {
        --color-text-primary: #FFFFFF;
        --color-text-secondary: #F2F2EE;
        --color-accent: #FFC933;
        --color-border: #4A4D57;
        --color-border-light: #6A6D77;
    }
}

@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .gradient-text,
    .gradient-text-blue,
    .gradient-text-purple {
        -webkit-text-fill-color: black !important;
        background: none !important;
    }
}