/********************************
 * CSS Variables — Glassmorphism Design System
 ********************************/
:root {
    /* ─── Primary Colors — Indigo/Purple Spectrum ─── */
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;

    /* ─── Secondary Colors — Violet/Purple Spectrum ─── */
    --secondary-50: #faf5ff;
    --secondary-100: #f3e8ff;
    --secondary-200: #e9d5ff;
    --secondary-300: #d8b4fe;
    --secondary-400: #c084fc;
    --secondary-500: #a855f7;
    --secondary-600: #9333ea;
    --secondary-700: #7c3aed;
    --secondary-800: #6b21a8;
    --secondary-900: #581c87;

    /* ─── Accent Colors — Blue/Cyan Spectrum ─── */
    --accent-50: #ecfeff;
    --accent-100: #cffafe;
    --accent-200: #a5f3fc;
    --accent-300: #67e8f9;
    --accent-400: #22d3ee;
    --accent-500: #06b6d4;
    --accent-600: #0891b2;
    --accent-700: #0e7490;
    --accent-800: #155e75;
    --accent-900: #164e63;

    /* ─── Neutral Colors ─── */
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;

    /* ─── Semantic Colors ─── */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --error-100: #fee2e2;
    --error-600: #dc2626;
    --info: #3b82f6;

    /* ─── Background & Surface (Light Mode) ─── */
    --bg: #f8fafc;
    --bg-secondary: #f1f5f9;
    --surface: #ffffff;
    --surface-hover: #f8fafc;
    --surface-active: #f1f5f9;
    --surface-glass: rgba(255, 255, 255, 0.72);
    --surface-glass-hover: rgba(255, 255, 255, 0.90);

    /* ─── UI Frame Tokens (Light Mode) ─── */
    --ui-frame-bg:        linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(238, 242, 255, 0.1) 100%);
    --ui-frame-border:    rgba(255, 255, 255, 0.4);
    --ui-frame-header:    rgba(255, 255, 255, 0.2);
    --ui-frame-sidebar:   rgba(255, 255, 255, 0.1);
    --ui-frame-text:      var(--text-primary);
    --ui-frame-text-dim:  var(--neutral-600);
    --ui-frame-line:      rgba(99, 102, 241, 0.15);
    --ui-frame-shadow:    0 40px 80px rgba(99, 102, 241, 0.12);
    --ui-frame-inner-bg:  rgba(255, 255, 255, 0.05);
    --ui-frame-accent:    var(--primary-600);
    --ui-frame-glow:      0 0 10px rgba(99, 102, 241, 0.2);

    /* ─── Glassmorphism Tokens (Light Mode) ─── */
    --glass-bg: rgba(255, 255, 255, 0.60);
    --glass-bg-hover: rgba(255, 255, 255, 0.80);
    --glass-border: rgba(255, 255, 255, 0.70);
    --glass-border-glow: rgba(99, 102, 241, 0.30);
    --glass-blur: 16px;
    --glass-saturation: saturate(180%);

    /* ─── Glow Tokens (Light Mode – subtler) ─── */
    --glow-primary: 0 0 24px rgba(99, 102, 241, 0.20);
    --glow-secondary: 0 0 32px rgba(168, 85, 247, 0.15);
    --glow-card: 0 8px 32px rgba(99, 102, 241, 0.10);
    --glow-btn: 0 4px 20px rgba(99, 102, 241, 0.35);
    --glow-icon: 0 0 20px rgba(99, 102, 241, 0.40);
    --glow-text: 0 0 12px rgba(99, 102, 241, 0.30);

    /* ─── Ambient Background Blobs (Light) ─── */
    --blob-primary: rgba(99, 102, 241, 0.08);
    --blob-secondary: rgba(168, 85, 247, 0.06);

    /* ─── Text Colors ─── */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-inverse: #ffffff;
    --text-accent: #6366f1;

    /* ─── Border & Shadow ─── */
    --border: #e2e8f0;
    --border-hover: #cbd5e1;
    --border-focus: #a5b4fc;

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
    --shadow-glow-lg: 0 0 40px rgba(99, 102, 241, 0.25);
    --shadow-glass: 0 8px 32px rgba(99, 102, 241, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.60);

    /* ─── Gradients ─── */
    --gradient-primary: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-600), var(--secondary-500));
    --gradient-accent: linear-gradient(135deg, var(--accent-600), var(--accent-500));
    --gradient-hero: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #ede9fe 100%);
    --gradient-card: linear-gradient(135deg, var(--surface), var(--surface-hover));
    --gradient-text: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 100%);
    --gradient-button: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.08));
    --gradient-bg: linear-gradient(135deg, #f8fafc, #f1f5f9);
    --gradient-badge: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    --gradient-glow: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
    --gradient-stat: linear-gradient(135deg, var(--primary-500), var(--secondary-400));

    /* ─── Border Radius ─── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* ─── Spacing ─── */
    --space-1: 0.25rem;
    --space-2: 0.50rem;
    --space-3: 0.75rem;
    --space-4: 1.00rem;
    --space-5: 1.25rem;
    --space-6: 1.50rem;
    --space-8: 2.00rem;
    --space-10: 2.50rem;
    --space-12: 3.00rem;
    --space-16: 4.00rem;
    --space-20: 5.00rem;
    --space-24: 6.00rem;
    --space-32: 8.00rem;

    /* ─── Typography ─── */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --font-display: "Outfit", system-ui, sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1.00rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.50rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3.00rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.50rem;

    --line-height-tight: 1.25;
    --line-height-normal: 1.50;
    --line-height-relaxed: 1.75;

    /* ─── Transitions ─── */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ─── Layout ─── */
    --max-width: 1280px;
    --container-padding: var(--space-6);
    --section-gap: var(--space-20);
    --header-height: 72px;
}