/* ==============================
           DESIGN TOKENS
        ============================== */
        :root {
            /* Colors */
            --bg: #f6f8fb;
            --surface: #ffffff;
            --surface2: #f1f3f7;
            --text: #111827;
            --text-secondary: #6b7280;
            --primary: #2563eb;
            --primary-light: rgba(37, 99, 235, 0.08);
            --primary-glow: rgba(37, 99, 235, 0.2);
            --border: rgba(0, 0, 0, 0.06);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
            --font-main: 'Sora', sans-serif;
            --font-bible: 'Spectral', serif;
            --accent: #f59e0b;
            --accent-light: rgba(245, 158, 11, 0.1);
            --accent-glow: rgba(245, 158, 11, 0.2);
            --radius-xs: 6px;
            --radius-sm: 10px;
            --radius-md: 14px;
            --radius-lg: 20px;
            --radius-xl: 28px;
            --radius-full: 9999px;
            --danger: #ef4444;
            --danger-dark: #dc2626;
            --success: #10b981;
            --info: #3b82f6;

            /* Fluid Typography */
            --text-xs: clamp(0.6rem, 0.55rem + 0.25vw, 0.7rem);
            --text-sm: clamp(0.68rem, 0.64rem + 0.2vw, 0.78rem);
            --text-base: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
            --text-md: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
            --text-lg: clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem);
            --text-xl: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
            --text-2xl: clamp(1.3rem, 1.15rem + 0.75vw, 1.7rem);
            --text-3xl: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);

            /* Spacing Scale */
            --space-2xs: 2px;
            --space-xs: 4px;
            --space-sm: 4px;
            --space-md: 12px;
            --space-lg: 16px;
            --space-xl: 20px;
            --space-2xl: 24px;
            --space-3xl: 32px;
            --space-4xl: 40px;
            --space-5xl: 48px;

            /* Easing */
            --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --ease-snap-out: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
            --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

            /* Transitions */
            --transition-fast: 0.15s var(--ease-standard);
            --transition-normal: 0.25s var(--ease-standard);
            --transition-slow: 0.4s var(--ease-standard);
            --transition-spring: 0.4s var(--ease-spring);

            /* Z-index Scale */
            --z-base: 1;
            --z-header: 200;
            --z-modal-backdrop: 800;
            --z-modal: 900;
            --z-chat-fab: 998;
            --z-chat-overlay: 999;
            --z-chat-panel: 1000;
            --z-toast: 1000;
            --z-notification: 1100;
            --z-splash: 9999;
        }

        [data-theme="dark"] {
            --bg: #0a0a0f;
            --surface: #141420;
            --surface2: #1e1e2e;
            --text: #f1f5f9;
            --text-secondary: #94a3b8;
            --primary: #60a5fa;
            --primary-light: rgba(96, 165, 250, 0.1);
            --primary-glow: rgba(96, 165, 250, 0.2);
            --border: rgba(255, 255, 255, 0.08);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
            --accent: #fbbf24;
            --accent-light: rgba(251, 191, 36, 0.12);
            --accent-glow: rgba(251, 191, 36, 0.2);
        }

        [data-theme="sepia"] {
            --bg: #f8f0e3;
            --surface: #f0e6d3;
            --surface2: #e6dac5;
            --text: #2c1810;
            --text-secondary: #8b7355;
            --primary: #92400e;
            --primary-light: rgba(146, 64, 14, 0.08);
            --primary-glow: rgba(146, 64, 14, 0.18);
            --border: rgba(139, 115, 85, 0.2);
            --shadow-sm: 0 1px 3px rgba(100, 60, 20, 0.06), 0 1px 2px rgba(100, 60, 20, 0.08);
            --shadow-md: 0 4px 6px -1px rgba(100, 60, 20, 0.08), 0 2px 4px -2px rgba(100, 60, 20, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(100, 60, 20, 0.1), 0 4px 6px -4px rgba(100, 60, 20, 0.06);
            --shadow-xl: 0 20px 25px -5px rgba(100, 60, 20, 0.12), 0 8px 10px -6px rgba(100, 60, 20, 0.08);
            --accent: #b45309;
            --accent-light: rgba(180, 83, 9, 0.12);
            --accent-glow: rgba(180, 83, 9, 0.2);
        }