/* ===================================
   ORACNOOS - Design System Variables
   World-Class Dark/Light Mode
   =================================== */

:root {
    /* Theme Colors */
    --theme-mode: 'dark';
    
    /* Primary Brand Colors */
    --primary-cyan: #00e5ff;
    --primary-purple: #7c4dff;
    --primary-pink: #ff4081;
    --primary-orange: #ff9500;
    --primary-green: #00e676;
    
    /* Dark Mode (Default) */
    --bg-primary: #0a0e27;
    --bg-secondary: #12182e;
    --bg-tertiary: #1a2035;
    --bg-elevated: #1e2440;
    
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-tertiary: rgba(255, 255, 255, 0.55);
    --text-muted: rgba(255, 255, 255, 0.4);
    
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: rgba(255, 255, 255, 0.05);
    --border-accent: rgba(0, 229, 255, 0.3);
    
    --card-bg: rgba(255, 255, 255, 0.02);
    --card-bg-hover: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.05);
    --card-border-hover: rgba(0, 229, 255, 0.3);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #00e5ff 0%, #7c4dff 100%);
    --gradient-hero: linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(124, 77, 255, 0.1));
    --gradient-card: linear-gradient(135deg, rgba(0, 229, 255, 0.05), rgba(124, 77, 255, 0.05));
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(20px);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 229, 255, 0.4);
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Orbitron', 'Exo 2', sans-serif;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    /* Transitions */
    --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);
    
    /* Z-index */
    --z-base: 1;
    --z-sticky: 1000;
    --z-fixed: 5000;
    --z-modal: 9000;
    --z-header: 9999;
}

/* ===================================
   Light Mode (Optimized for Readability)
   =================================== */

body.light-mode {
    --theme-mode: 'light';
    
    /* Light Backgrounds - Professional Gray */
    --bg-primary: #f0f2f5;           /* Light gray (Facebook-like) */
    --bg-secondary: #ffffff;         /* Pure white for cards */
    --bg-tertiary: #e4e6eb;          /* Darker gray */
    --bg-elevated: #ffffff;          /* White elevated */
    
    /* Light Text - Maximum Readability */
    --text-primary: #050505;         /* Almost black (maximum contrast) */
    --text-secondary: #1c1e21;       /* Very dark gray */
    --text-tertiary: #65676b;        /* Medium gray */
    --text-muted: #8a8d91;           /* Light gray */
    
    /* Light Borders - Clear Definition */
    --border-primary: rgba(0, 0, 0, 0.15);
    --border-secondary: rgba(0, 0, 0, 0.08);
    --border-accent: rgba(0, 133, 255, 0.5);
    
    /* Light Cards - White with Shadow */
    --card-bg: #ffffff;
    --card-bg-hover: #f7f8f9;
    --card-border: rgba(0, 0, 0, 0.12);
    --card-border-hover: rgba(0, 133, 255, 0.5);
    
    /* Light Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(0, 0, 0, 0.12);
    
    /* Light Shadows - More Visible */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 20px rgba(0, 133, 255, 0.3);
    
    /* Light Gradients - Subtle but Visible */
    --gradient-hero: linear-gradient(135deg, rgba(0, 133, 255, 0.08), rgba(107, 62, 239, 0.08));
    --gradient-card: linear-gradient(135deg, rgba(0, 133, 255, 0.04), rgba(107, 62, 239, 0.04));
    --gradient-primary: linear-gradient(135deg, #0085ff 0%, #6b3eef 100%);
}

/* ===================================
   Theme Transition
   =================================== */

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

* {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Disable transitions on page load */
body.no-transition * {
    transition: none !important;
}

/* ===================================
   Custom Animations
   =================================== */

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 229, 255, 0.6);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===================================
   Scrollbar Styling
   =================================== */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00e5ff, #7c4dff);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00d4e6, #6b3eef);
}

body.light-mode ::-webkit-scrollbar-track {
    background: #f8f9fa;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00e5ff, #7c4dff);
}

/* ===================================
   Selection
   =================================== */

::selection {
    background: rgba(0, 229, 255, 0.3);
    color: #fff;
}

body.light-mode ::selection {
    background: rgba(0, 229, 255, 0.2);
    color: #000;
}