/**
 * MayaFusion Technologies - Premium Design System
 * Version: 3.0.0
 * 
 * Enhanced for:
 * - Maximum contrast & visibility in both themes
 * - Frosted glass aesthetics with depth
 * - Subtle yet visible borders
 * - Sophisticated hover glows
 * - Professional polish
 */

/* ============================================
   ROOT VARIABLES - LIGHT MODE
   ============================================ */

:root {
    /* Brand Colors */
    --color-primary: 37 99 235;
    /* Blue-600 */
    --color-primary-light: 59 130 246;
    /* Blue-500 */
    --color-primary-dark: 29 78 216;
    /* Blue-700 */

    --color-secondary: 20 184 166;
    /* Teal-500 */
    --color-secondary-light: 45 212 191;
    /* Teal-400 */

    --color-accent: 168 85 247;
    /* Purple-500 */
    --color-accent-light: 192 132 252;
    /* Purple-400 */

    --color-warning: 251 146 60;
    /* Orange-400 */
    --color-success: 34 197 94;
    /* Green-500 */
    --color-error: 239 68 68;
    /* Red-500 */

    /* Surface Colors - Light Mode */
    --color-bg-base: 249 250 251;
    /* Gray-50 */
    --color-bg-elevated: 255 255 255;
    /* Pure white */
    --color-bg-card: 255 255 255;
    /* Pure white */
    --color-surface-overlay: 255 255 255;
    /* White overlay */

    /* Border Colors - Light Mode */
    --color-border-subtle: 229 231 235;
    /* Gray-200 */
    --color-border-medium: 209 213 219;
    /* Gray-300 */
    --color-border-strong: 156 163 175;
    /* Gray-400 */

    /* Text Colors - Light Mode */
    --color-text-primary: 17 24 39;
    /* Gray-900 */
    --color-text-secondary: 55 65 81;
    /* Gray-700 */
    --color-text-tertiary: 107 114 128;
    /* Gray-500 */
    --color-text-muted: 156 163 175;
    /* Gray-400 */

    /* Glass Effect Properties */
    --glass-bg-light: 255 255 255;
    --glass-opacity-light: 0.75;
    --glass-blur: 24px;
    --glass-border-opacity: 0.2;

    /* Shadows - Light Mode */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Glow Effects */
    --glow-primary: 0 0 30px rgba(37, 99, 235, 0.4), 0 0 60px rgba(37, 99, 235, 0.15);
    --glow-secondary: 0 0 30px rgba(20, 184, 166, 0.4), 0 0 60px rgba(20, 184, 166, 0.15);
    --glow-accent: 0 0 30px rgba(168, 85, 247, 0.4), 0 0 60px rgba(168, 85, 247, 0.15);

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Spacing & Sizing */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
    --duration-instant: 100ms;
    --duration-fast: 200ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

.dark {
    /* Brand Colors - Enhanced for dark */
    --color-primary: 59 130 246;
    /* Blue-500 - brighter */
    --color-primary-light: 96 165 250;
    /* Blue-400 */
    --color-primary-dark: 37 99 235;
    /* Blue-600 */

    --color-secondary: 45 212 191;
    /* Teal-400 - brighter */
    --color-secondary-light: 94 234 212;
    /* Teal-300 */

    --color-accent: 192 132 252;
    /* Purple-400 - brighter */
    --color-accent-light: 216 180 254;
    /* Purple-300 */

    --color-warning: 251 146 60;
    /* Orange-400 */
    --color-success: 74 222 128;
    /* Green-400 */
    --color-error: 248 113 113;
    /* Red-400 */

    /* Surface Colors - Dark Mode */
    --color-bg-base: 15 23 42;
    /* Slate-900 */
    --color-bg-elevated: 30 41 59;
    /* Slate-800 */
    --color-bg-card: 30 41 59;
    /* Slate-800 */
    --color-surface-overlay: 51 65 85;
    /* Slate-700 */

    /* Border Colors - Dark Mode */
    --color-border-subtle: 51 65 85;
    /* Slate-700 */
    --color-border-medium: 71 85 105;
    /* Slate-600 */
    --color-border-strong: 100 116 139;
    /* Slate-500 */

    /* Text Colors - Dark Mode */
    --color-text-primary: 248 250 252;
    /* Slate-50 */
    --color-text-secondary: 226 232 240;
    /* Slate-200 */
    --color-text-tertiary: 148 163 184;
    /* Slate-400 */
    --color-text-muted: 100 116 139;
    /* Slate-500 */

    /* Glass Effect Properties - Dark */
    --glass-bg-light: 30 41 59;
    --glass-opacity-light: 0.6;
    --glass-blur: 32px;
    --glass-border-opacity: 0.15;

    /* Shadows - Dark Mode */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 12px -2px rgba(0, 0, 0, 0.5), 0 3px 6px -3px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 15px 25px -5px rgba(0, 0, 0, 0.6), 0 6px 10px -6px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 25px 40px -8px rgba(0, 0, 0, 0.7), 0 10px 15px -8px rgba(0, 0, 0, 0.7);
    --shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.85);

    /* Glow Effects - Enhanced for dark */
    --glow-primary: 0 0 40px rgba(59, 130, 246, 0.5), 0 0 80px rgba(59, 130, 246, 0.25), inset 0 0 20px rgba(59, 130, 246, 0.1);
    --glow-secondary: 0 0 40px rgba(45, 212, 191, 0.5), 0 0 80px rgba(45, 212, 191, 0.25), inset 0 0 20px rgba(45, 212, 191, 0.1);
    --glow-accent: 0 0 40px rgba(192, 132, 252, 0.5), 0 0 80px rgba(192, 132, 252, 0.25), inset 0 0 20px rgba(192, 132, 252, 0.1);
}

/* ============================================
   BASE STYLES
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    background-color: rgb(var(--color-bg-base));
    color: rgb(var(--color-text-primary));
    line-height: 1.6;
    transition: background-color var(--duration-normal) var(--ease-smooth),
        color var(--duration-normal) var(--ease-smooth);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: rgb(var(--color-text-primary));
    line-height: 1.2;
}

h1 {
    font-size: 3.75rem;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2.25rem;
}

h4 {
    font-size: 1.875rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.25rem;
}

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

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

.text-tertiary {
    color: rgb(var(--color-text-tertiary));
}

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

.font-display {
    font-family: var(--font-display);
}

.font-mono {
    font-family: var(--font-mono);
}

/* ============================================
   GLASS SURFACES & CARDS
   ============================================ */

.glass-panel {
    position: relative;
    background: rgba(var(--glass-bg-light), var(--glass-opacity-light));
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--color-border-medium), var(--glass-border-opacity));
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-smooth);
    overflow: hidden;
}

.glass-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.05),
            transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
}

/* Dark mode glass refinement */
.dark .glass-panel {
    background: rgba(var(--glass-bg-light), var(--glass-opacity-light));
    border-color: rgba(var(--color-border-medium), 0.2);
    box-shadow: var(--shadow-lg),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.dark .glass-panel::before {
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02),
            transparent);
    opacity: 0.8;
}

/* ============================================
   INTERACTIVE GLASS CARDS
   ============================================ */

.glass-card {
    position: relative;
    background: rgba(var(--glass-bg-light), var(--glass-opacity-light));
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--color-border-medium), 0.3);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-smooth);
    cursor: pointer;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(var(--color-primary), 0.15),
            transparent 40%);
    transition: opacity var(--duration-normal) var(--ease-smooth);
    pointer-events: none;
}

.glass-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(var(--color-primary), 0.4);
    box-shadow: var(--shadow-xl), var(--glow-primary);
}

.glass-card:hover::before {
    opacity: 1;
}

/* Dark mode card enhancement */
.dark .glass-card {
    border-color: rgba(var(--color-border-medium), 0.25);
    box-shadow: var(--shadow-lg),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.dark .glass-card::before {
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(var(--color-primary), 0.25),
            transparent 40%);
}

.dark .glass-card:hover {
    border-color: rgba(var(--color-primary), 0.6);
    box-shadow: var(--shadow-2xl), var(--glow-primary);
    background: rgba(var(--glass-bg-light), 0.75);
}

/* Color variant cards */
.glass-card-primary:hover {
    border-color: rgba(var(--color-primary), 0.5);
    box-shadow: var(--shadow-xl), var(--glow-primary);
}

.glass-card-secondary:hover {
    border-color: rgba(var(--color-secondary), 0.5);
    box-shadow: var(--shadow-xl), var(--glow-secondary);
}

.glass-card-accent:hover {
    border-color: rgba(var(--color-accent), 0.5);
    box-shadow: var(--shadow-xl), var(--glow-accent);
}

/* ============================================
   NAVIGATION & HEADER
   ============================================ */

.glass-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--glass-bg-light), 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(var(--color-border-subtle), 0.5);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--ease-smooth);
}

.dark .glass-nav {
    background: rgba(var(--glass-bg-light), 0.7);
    border-bottom-color: rgba(var(--color-border-medium), 0.2);
    box-shadow: var(--shadow-md),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.glass-nav.scrolled {
    box-shadow: var(--shadow-lg);
}

/* ============================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    outline: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-primary-dark)));
    color: white;
    border-color: rgba(var(--color-primary), 0.3);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--glow-primary);
}

.btn-glass {
    background: rgba(var(--glass-bg-light), 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgb(var(--color-text-primary));
    border-color: rgba(var(--color-border-medium), 0.3);
    box-shadow: var(--shadow-sm);
}

.btn-glass:hover {
    background: rgba(var(--glass-bg-light), 0.8);
    border-color: rgba(var(--color-primary), 0.4);
    box-shadow: var(--shadow-md), 0 0 20px rgba(var(--color-primary), 0.2);
}

.dark .btn-glass:hover {
    background: rgba(var(--glass-bg-light), 0.7);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(var(--color-primary), 0.3);
}

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */

.border-subtle {
    border: 1px solid rgba(var(--color-border-subtle), 0.5);
}

.border-medium {
    border: 1px solid rgba(var(--color-border-medium), 0.3);
}

.dark .border-subtle {
    border-color: rgba(var(--color-border-medium), 0.2);
}

.dark .border-medium {
    border-color: rgba(var(--color-border-medium), 0.25);
}

.divider {
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            rgba(var(--color-border-medium), 0.3),
            transparent);
}

/* ============================================
   GLOW & EFFECT UTILITIES
   ============================================ */

.glow-text-primary {
    text-shadow: 0 0 20px rgba(var(--color-primary), 0.5);
}

.glow-text-secondary {
    text-shadow: 0 0 20px rgba(var(--color-secondary), 0.5);
}

.glow-text-accent {
    text-shadow: 0 0 20px rgba(var(--color-accent), 0.5);
}

.glow-border {
    border: 1px solid rgba(var(--color-border-medium), 0.3);
    transition: all var(--duration-fast) var(--ease-smooth);
}

.glow-border:hover {
    border-color: rgba(var(--color-primary), 0.5);
    box-shadow: 0 0 25px rgba(var(--color-primary), 0.3);
}

/* ============================================
   BACKGROUNDS & PATTERNS
   ============================================ */

.bg-gradient-radial {
    background: radial-gradient(circle at 50% 0%,
            rgba(var(--color-primary), 0.1),
            transparent 70%);
}

.dark .bg-gradient-radial {
    background: radial-gradient(circle at 50% 0%,
            rgba(var(--color-primary), 0.15),
            transparent 70%);
}

.bg-grid {
    background-image:
        linear-gradient(rgba(var(--color-border-subtle), 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--color-border-subtle), 0.15) 1px, transparent 1px);
    background-size: 50px 50px;
}

.dark .bg-grid {
    background-image:
        linear-gradient(rgba(var(--color-border-medium), 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--color-border-medium), 0.1) 1px, transparent 1px);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

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

::-webkit-scrollbar-track {
    background: rgb(var(--color-bg-base));
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--color-border-strong), 0.5);
    border-radius: var(--radius-full);
    border: 3px solid rgb(var(--color-bg-base));
    transition: background var(--duration-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-primary), 0.6);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(var(--color-border-medium), 0.4);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-primary), 0.7);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(var(--color-primary), 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(var(--color-primary), 0.6);
    }
}

.animate-fade-in {
    animation: fadeIn var(--duration-slow) var(--ease-smooth);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.backdrop-blur-sm {
    backdrop-filter: blur(8px);
}

.backdrop-blur-md {
    backdrop-filter: blur(16px);
}

.backdrop-blur-lg {
    backdrop-filter: blur(24px);
}

.backdrop-blur-xl {
    backdrop-filter: blur(32px);
}

.shadow-xs {
    box-shadow: var(--shadow-xs);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-2xl {
    box-shadow: var(--shadow-2xl);
}

.transition-all {
    transition: all var(--duration-normal) var(--ease-smooth);
}

.transition-fast {
    transition: all var(--duration-fast) var(--ease-smooth);
}

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

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    h5 {
        font-size: 1.25rem;
    }

    h6 {
        font-size: 1.125rem;
    }

    .glass-card {
        padding: 1rem;
    }
}