/**
 * Lila UI/UX v3.0 - CSS Variables System
 * EK-4: Intelligent Sidebar Panel Architecture
 * 
 * This file defines the foundational design tokens for Lila's adaptive presence,
 * glassmorphism aesthetic, and responsive behavior across 3 modes.
 */

:root {
    /* ============================================================
     PANEL DIMENSIONS - Adaptive Modes
     ============================================================ */

    /* Current active mode width (dynamically set by JavaScript) */
    --lila-panel-width: 0px;

    /* Mode 0: The Orb - Minimal presence when idle */
    --lila-mode-orb: 60px;

    /* Mode 1: Split View - Standard chat interface (30-40% of screen) */
    --lila-mode-split: 450px;

    /* Mode 2: Command Center - Expanded for complex tasks (60-80% of screen) */
    --lila-mode-command: clamp(800px, 60vw, 1200px);

    /* Safe maximum on smaller screens */
    --lila-max-width: min(var(--lila-panel-width), calc(100vw - 300px));


    /* ============================================================
     GLASSMORPHISM 2.0 - Adaptive Theme
     ============================================================ */

    /* Light Mode (Default) */
    --lila-glass-bg: rgba(255, 255, 255, 0.85);
    --lila-glass-bg-secondary: rgba(255, 255, 255, 0.65);
    --lila-glass-blur: 20px;
    --lila-glass-border: rgba(255, 255, 255, 0.18);
    --lila-glass-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);

    /* Text Colors */
    --lila-text-primary: #1e293b;
    --lila-text-secondary: #64748b;
    --lila-text-muted: #94a3b8;


    /* ============================================================
     COLOR PALETTE - Brand & Functional
     ============================================================ */

    /* Primary Brand Colors */
    --lila-primary: #A855F7;
    /* Lila Purple */
    --lila-primary-hover: #9333EA;
    --lila-secondary: #3B82F6;
    /* Electric Blue */
    --lila-secondary-hover: #2563EB;

    /* Gradient (Used for Orb, Buttons, Highlights) */
    --lila-gradient: linear-gradient(135deg, var(--lila-primary), var(--lila-secondary));
    --lila-gradient-vertical: linear-gradient(180deg, var(--lila-primary), var(--lila-secondary));

    /* Functional Colors */
    --lila-success: #22c55e;
    --lila-warning: #f59e0b;
    --lila-error: #ef4444;
    --lila-info: #3b82f6;

    /* Neutral Palette */
    --lila-bg-primary: #ffffff;
    --lila-bg-secondary: #f8fafc;
    --lila-bg-tertiary: #f1f5f9;
    --lila-border: #e2e8f0;
    --lila-border-light: #f0f0f0;


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

    --lila-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lila-font-mono: 'JetBrains Mono', 'Courier New', monospace;

    --lila-font-size-xs: 0.75rem;
    /* 12px */
    --lila-font-size-sm: 0.875rem;
    /* 14px */
    --lila-font-size-base: 0.95rem;
    /* 15.2px */
    --lila-font-size-lg: 1.125rem;
    /* 18px */
    --lila-font-size-xl: 1.25rem;
    /* 20px */


    /* ============================================================
     SPACING & LAYOUT
     ============================================================ */

    --lila-spacing-xs: 4px;
    --lila-spacing-sm: 8px;
    --lila-spacing-md: 16px;
    --lila-spacing-lg: 24px;
    --lila-spacing-xl: 32px;

    --lila-radius-sm: 8px;
    --lila-radius-md: 12px;
    --lila-radius-lg: 16px;
    --lila-radius-full: 9999px;

    /* Z-index layers */
    /* Z-index layers */
    /* Navbar is 1040, Modals are 1055. Lila should be below Navbar dropdowns but above specific content. */
    --lila-z-orb: 1035;
    --lila-z-panel: 1035;
    --lila-z-stage: 1036;
    --lila-z-tooltip: 1037;


    /* ============================================================
     ANIMATION DURATIONS
     ============================================================ */

    --lila-transition-fast: 0.15s;
    --lila-transition-base: 0.3s;
    --lila-transition-slow: 0.4s;
    --lila-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);


    /* ============================================================
     COMPONENT-SPECIFIC TOKENS
     ============================================================ */

    /* The Stage (Media/Visual Area) */
    --lila-stage-max-height: 40vh;
    --lila-stage-bg: rgba(0, 0, 0, 0.02);

    /* The Dialogue (Chat Stream) */
    --lila-dialogue-spacing: 16px;

    /* Multi-Thread Tabs */
    --lila-tab-bg: transparent;
    --lila-tab-bg-active: #ffffff;
    --lila-tab-border-active: var(--lila-primary);

    /* Status Bar */
    --lila-status-bg: rgba(0, 0, 0, 0.03);
    --lila-status-border: rgba(0, 0, 0, 0.05);
}


/* ============================================================
   DARK MODE OVERRIDE
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        /* Glassmorphism */
        --lila-glass-bg: rgba(17, 24, 39, 0.85);
        --lila-glass-bg-secondary: rgba(31, 41, 55, 0.65);
        --lila-glass-border: rgba(255, 255, 255, 0.1);
        --lila-glass-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);

        /* Text Colors */
        --lila-text-primary: #f1f5f9;
        --lila-text-secondary: #cbd5e1;
        --lila-text-muted: #94a3b8;

        /* Brand Colors (Deeper in dark mode) */
        --lila-primary: hsl(270, 85%, 65%);
        --lila-primary-hover: hsl(270, 85%, 60%);
        --lila-secondary: hsl(217, 91%, 60%);
        --lila-secondary-hover: hsl(217, 91%, 55%);

        /* Backgrounds */
        --lila-bg-primary: #1e293b;
        --lila-bg-secondary: #0f172a;
        --lila-bg-tertiary: #1e293b;
        --lila-border: #334155;
        --lila-border-light: #475569;

        /* Stage */
        --lila-stage-bg: rgba(255, 255, 255, 0.02);

        /* Status Bar */
        --lila-status-bg: rgba(255, 255, 255, 0.03);
        --lila-status-border: rgba(255, 255, 255, 0.05);

        /* Tabs */
        --lila-tab-bg-active: rgba(255, 255, 255, 0.05);
    }
}


/* ============================================================
   LOW POWER MODE - Disable Heavy Effects
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        /* Disable blur for performance */
        --lila-glass-blur: 0px;

        /* Faster transitions */
        --lila-transition-fast: 0s;
        --lila-transition-base: 0s;
        --lila-transition-slow: 0s;
    }

    /* Disable all animations */
    * {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet and below: Reduce panel width */
@media (max-width: 1200px) {
    :root {
        --lila-mode-split: 380px;
        --lila-mode-command: clamp(600px, 70vw, 900px);
    }
}

/* Mobile: Force bottom sheet mode (handled by JavaScript) */
@media (max-width: 768px) {
    :root {
        --lila-panel-width: 0px !important;
        /* Mobile uses bottom sheet component instead */
    }
}


/* ============================================================
   UTILITY CLASSES (Optional, for quick prototyping)
   ============================================================ */

.lila-glass {
    background: var(--lila-glass-bg);
    backdrop-filter: blur(var(--lila-glass-blur));
    border: 1px solid var(--lila-glass-border);
}

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

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