/**
 * ROKCAT Theme System - Molecular Finance
 *
 * Design Philosophy:
 * - Golden Ratio (φ = 1.618) for spacing and typography
 * - Molecular aesthetics with glassmorphism
 * - macOS-inspired polish and animations
 * - Dynamic theme switching support
 */

:root {
    /* ============================================
       GOLDEN RATIO SCALE (φ = 1.618)
       ============================================ */
    --phi: 1.618;
    --phi-2: 2.618;  /* φ² */
    --phi-3: 4.236;  /* φ³ */
    --phi-inv: 0.618; /* 1/φ */

    /* Spacing Scale (φ-based) */
    --space-xs: 0.382rem;   /* φ⁻² ≈ 6px */
    --space-sm: 0.618rem;   /* φ⁻¹ ≈ 10px */
    --space-md: 1rem;       /* base = 16px */
    --space-lg: 1.618rem;   /* φ ≈ 26px */
    --space-xl: 2.618rem;   /* φ² ≈ 42px */
    --space-2xl: 4.236rem;  /* φ³ ≈ 68px */
    --space-3xl: 6.854rem;  /* φ⁴ ≈ 110px */

    /* Typography Scale (φ-based) */
    --text-xs: 0.618rem;    /* 10px */
    --text-sm: 0.809rem;    /* 13px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.618rem;    /* 26px */
    --text-xl: 2.618rem;    /* 42px */
    --text-2xl: 4.236rem;   /* 68px */

    /* Line Heights (φ-based) */
    --leading-tight: 1.272;  /* φ⁻¹ × 2 */
    --leading-normal: 1.618; /* φ */
    --leading-loose: 2.058;  /* φ × 1.272 */

    /* Border Radius (φ-based) */
    --radius-sm: 0.382rem;   /* 6px */
    --radius-md: 0.618rem;   /* 10px */
    --radius-lg: 1rem;       /* 16px */
    --radius-xl: 1.618rem;   /* 26px */
    --radius-full: 9999px;

    /* ============================================
       THEME: DARK MATTER (Default)
       ============================================ */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a28;

    /* Molecular Glass Effects */
    --glass-bg: rgba(18, 18, 26, 0.75);
    --glass-bg-hover: rgba(26, 26, 40, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.15);

    /* Molecular Glow Effects */
    --glow-primary: rgba(99, 102, 241, 0.5);
    --glow-success: rgba(16, 185, 129, 0.5);
    --glow-warning: rgba(251, 146, 60, 0.5);
    --glow-danger: rgba(239, 68, 68, 0.5);

    /* Color Palette - Molecular */
    --color-primary: #6366f1;
    --color-primary-light: #818cf8;
    --color-primary-dark: #4f46e5;

    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-success-dark: #059669;

    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-warning-dark: #d97706;

    --color-danger: #ef4444;
    --color-danger-light: #f87171;
    --color-danger-dark: #dc2626;

    --color-info: #3b82f6;
    --color-info-light: #60a5fa;
    --color-info-dark: #2563eb;

    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.65);
    --text-tertiary: rgba(255, 255, 255, 0.45);
    --text-disabled: rgba(255, 255, 255, 0.25);

    /* Gradient Overlays - Molecular */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
    --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-info) 100%);
    --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-warning) 100%);
    --gradient-aurora: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 100%);

    /* Mesh Gradients - Molecular Background */
    --mesh-gradient:
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(251, 146, 60, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(59, 130, 246, 0.15) 0px, transparent 50%);

    /* Shadows (φ-based) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 16px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 20px 26px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px var(--glow-primary);

    /* Blur Effects (φ-based) */
    --blur-sm: 10px;
    --blur-md: 16px;
    --blur-lg: 26px;
    --blur-xl: 42px;

    /* Animations */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   THEME: LIGHT MATTER
   ============================================ */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;

    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-hover: rgba(248, 250, 252, 0.9);
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-border-hover: rgba(15, 23, 42, 0.15);

    --text-primary: rgba(15, 23, 42, 0.95);
    --text-secondary: rgba(15, 23, 42, 0.65);
    --text-tertiary: rgba(15, 23, 42, 0.45);
    --text-disabled: rgba(15, 23, 42, 0.25);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 16px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 26px rgba(0, 0, 0, 0.12);
}

/* ============================================
   THEME: AURORA
   ============================================ */
[data-theme="aurora"] {
    --bg-primary: #0f0518;
    --bg-secondary: #1a0b2e;
    --bg-tertiary: #2d1b4e;

    --color-primary: #a78bfa;
    --color-primary-light: #c4b5fd;
    --color-primary-dark: #8b5cf6;

    --glass-bg: rgba(26, 11, 46, 0.75);
    --glass-bg-hover: rgba(45, 27, 78, 0.85);

    --glow-primary: rgba(167, 139, 250, 0.6);

    --mesh-gradient:
        radial-gradient(at 0% 0%, rgba(167, 139, 250, 0.2) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(244, 114, 182, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(139, 92, 246, 0.2) 0px, transparent 50%);
}

/* ============================================
   THEME: MATRIX
   ============================================ */
[data-theme="matrix"] {
    --bg-primary: #000000;
    --bg-secondary: #0a1a0a;
    --bg-tertiary: #0f2e0f;

    --color-primary: #00ff41;
    --color-primary-light: #39ff14;
    --color-primary-dark: #00cc33;

    --color-success: #00ff41;
    --color-info: #00ffff;

    --glass-bg: rgba(10, 26, 10, 0.75);
    --glass-bg-hover: rgba(15, 46, 15, 0.85);
    --glass-border: rgba(0, 255, 65, 0.15);

    --glow-primary: rgba(0, 255, 65, 0.5);

    --text-primary: rgba(0, 255, 65, 0.95);
    --text-secondary: rgba(0, 255, 65, 0.65);
    --text-tertiary: rgba(0, 255, 65, 0.45);
}

/* ============================================
   MOLECULAR GLASS COMPONENTS
   ============================================ */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.glass:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-lg);
}

.glass-intense {
    background: var(--glass-bg-hover);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
}

/* ============================================
   MOLECULAR GLOW EFFECTS
   ============================================ */
.glow-primary {
    box-shadow: 0 0 var(--space-lg) var(--glow-primary);
}

.glow-success {
    box-shadow: 0 0 var(--space-lg) var(--glow-success);
}

.glow-warning {
    box-shadow: 0 0 var(--space-lg) var(--glow-warning);
}

.glow-danger {
    box-shadow: 0 0 var(--space-lg) var(--glow-danger);
}

/* Animated Glow - pulse-glow moved to design-tokens.css */
.glow-pulse {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* ============================================
   GRADIENT TEXT
   ============================================ */
.text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

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

/* ============================================
   GOLDEN RATIO UTILITIES
   ============================================ */
.phi-container {
    max-width: calc(1000px * var(--phi-inv)); /* 618px - golden ratio section */
}

.phi-grid {
    display: grid;
    grid-template-columns: var(--phi-inv)fr 1fr; /* 38.2% / 61.8% */
    gap: var(--space-lg);
}

.phi-grid-reverse {
    grid-template-columns: 1fr var(--phi-inv)fr; /* 61.8% / 38.2% */
}

/* ============================================
   MOLECULAR BUTTONS
   ============================================ */
.btn-molecular {
    position: relative;
    padding: var(--space-sm) var(--space-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--text-base);
    backdrop-filter: blur(var(--blur-md));
    transition: all var(--transition-base);
    overflow: hidden;
}

.btn-molecular::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left var(--transition-slow);
}

.btn-molecular:hover::before {
    left: 100%;
}

.btn-molecular:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.btn-molecular:active {
    transform: translateY(0);
}

.btn-molecular-primary {
    background: var(--gradient-primary);
    border: none;
    box-shadow: 0 0 var(--space-md) var(--glow-primary);
}

.btn-molecular-primary:hover {
    box-shadow: 0 0 var(--space-lg) var(--glow-primary);
}

/* ============================================
   MOLECULAR CARDS
   ============================================ */
.card-molecular {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
}

.card-molecular:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--glass-border-hover);
}

.card-molecular-glow {
    position: relative;
}

.card-molecular-glow::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-xl);
    background: var(--gradient-primary);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--transition-base);
}

.card-molecular-glow:hover::after {
    opacity: 0.15;
}

/* ============================================
   MACOS-INSPIRED ELEMENTS
   ============================================ */
.macos-window {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.macos-titlebar {
    height: 52px;
    background: var(--glass-bg-hover);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    padding: 0 var(--space-lg);
}

.macos-dots {
    display: flex;
    gap: var(--space-xs);
}

.macos-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.macos-dot:hover {
    opacity: 1;
}

.macos-dot.close { background: #ff5f56; }
.macos-dot.minimize { background: #ffbd2e; }
.macos-dot.maximize { background: #27c93f; }

/* ============================================
   PARTICLE EFFECTS
   ============================================ */
@keyframes float-particle {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    33% {
        transform: translateY(-20px) translateX(10px);
    }
    66% {
        transform: translateY(-10px) translateX(-10px);
    }
}

.particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
    opacity: 0.3;
    animation: float-particle 6s ease-in-out infinite;
}

/* ============================================
   MESH BACKGROUND
   ============================================ */
.mesh-background {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    background-image: var(--mesh-gradient);
    z-index: -2;
}

.mesh-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        );
    opacity: 0.5;
}