/* ═══════════════════════════════════════════════════════════════════════════
   ZYPHERIUS — Premium Design System
   A premium AI platform for everyone
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────────────────
       BRAND COLORS — Zypherius Identity
       ───────────────────────────────────────────────────────────────────── */
    --brand-primary: #6366f1;      /* Indigo */
    --brand-secondary: #8b5cf6;    /* Violet */
    --brand-accent: #ec4899;       /* Pink */
    --brand-glow: #a855f7;         /* Purple glow */
    
    /* ─────────────────────────────────────────────────────────────────────
       COLORS - Background (Deep Dark)
       ───────────────────────────────────────────────────────────────────── */
    --bg-primary: #030014;
    --bg-secondary: #0a0618;
    --bg-tertiary: #110c24;
    --bg-elevated: #1a1333;
    --bg-hover: #241b42;
    --bg-active: #2e2352;
    --bg-glass: rgba(17, 12, 36, 0.8);
    --bg-glass-light: rgba(26, 19, 51, 0.6);
    
    /* ─────────────────────────────────────────────────────────────────────
       COLORS - Text
       ───────────────────────────────────────────────────────────────────── */
    --text-primary: #ffffff;
    --text-secondary: #c4b5fd;
    --text-muted: #8b7fba;
    --text-dim: #6b5b95;
    --text-disabled: #4a3f6b;
    
    /* ─────────────────────────────────────────────────────────────────────
       COLORS - Accent Palette
       ───────────────────────────────────────────────────────────────────── */
    --accent-indigo: #6366f1;
    --accent-violet: #8b5cf6;
    --accent-purple: #a855f7;
    --accent-pink: #ec4899;
    --accent-rose: #f43f5e;
    --accent-blue: #3b82f6;
    --accent-cyan: #06b6d4;
    --accent-green: #10b981;
    --accent-yellow: #f59e0b;
    --accent-orange: #f97316;
    --accent-red: #ef4444;
    
    /* ─────────────────────────────────────────────────────────────────────
       COLORS - Semantic
       ───────────────────────────────────────────────────────────────────── */
    --color-success: var(--accent-green);
    --color-warning: var(--accent-yellow);
    --color-error: var(--accent-red);
    --color-info: var(--accent-cyan);
    
    /* ─────────────────────────────────────────────────────────────────────
       BORDERS
       ───────────────────────────────────────────────────────────────────── */
    --border-subtle: rgba(139, 92, 246, 0.1);
    --border-default: rgba(139, 92, 246, 0.2);
    --border-strong: rgba(139, 92, 246, 0.3);
    --border-accent: rgba(99, 102, 241, 0.5);
    --border-glow: rgba(168, 85, 247, 0.4);
    
    /* ─────────────────────────────────────────────────────────────────────
       GRADIENTS — Premium
       ───────────────────────────────────────────────────────────────────── */
    --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --gradient-brand-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 50%, rgba(236, 72, 153, 0.2) 100%);
    --gradient-text: linear-gradient(135deg, #c4b5fd 0%, #f0abfc 50%, #fda4af 100%);
    --gradient-glow: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    --gradient-hero: radial-gradient(ellipse at 50% 30%, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.1) 30%, transparent 70%);
    --gradient-card: linear-gradient(180deg, rgba(26, 19, 51, 0.8) 0%, rgba(17, 12, 36, 0.9) 100%);
    --gradient-button: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-button-hover: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    
    /* ─────────────────────────────────────────────────────────────────────
       SHADOWS — Depth & Glow
       ───────────────────────────────────────────────────────────────────── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.3);
    --shadow-glow-strong: 0 0 80px rgba(139, 92, 246, 0.4);
    --shadow-glow-brand: 0 0 60px rgba(99, 102, 241, 0.4);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    
    /* ─────────────────────────────────────────────────────────────────────
       GLASS EFFECTS
       ───────────────────────────────────────────────────────────────────── */
    --glass-blur: blur(20px);
    --glass-blur-heavy: blur(40px);
    --glass-background: rgba(17, 12, 36, 0.7);
    --glass-border: rgba(139, 92, 246, 0.15);
    
    /* ─────────────────────────────────────────────────────────────────────
       SPACING
       ───────────────────────────────────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    
    /* ─────────────────────────────────────────────────────────────────────
       RADIUS
       ───────────────────────────────────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-4xl: 32px;
    --radius-full: 9999px;
    
    /* ─────────────────────────────────────────────────────────────────────
       TYPOGRAPHY — Premium
       ───────────────────────────────────────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    --text-6xl: 60px;
    --text-7xl: 72px;
    
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    
    /* ─────────────────────────────────────────────────────────────────────
       TRANSITIONS — Smooth
       ───────────────────────────────────────────────────────────────────── */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;
    --duration-slowest: 700ms;
    
    /* ─────────────────────────────────────────────────────────────────────
       Z-INDEX
       ───────────────────────────────────────────────────────────────────── */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-max: 999;
    
    /* ─────────────────────────────────────────────────────────────────────
       LAYOUT
       ───────────────────────────────────────────────────────────────────── */
    --header-height: 64px;
    --sidebar-width: 280px;
    --preview-width: 50%;
    --max-content-width: 1400px;
    --max-chat-width: 800px;
}