/* ==========================================================================
   Design tokens
   Everything themable lives here as a custom property on [data-theme].
   ========================================================================== */

:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --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);
}

[data-theme="dark"] {
    --bg-primary: #0a0a0f;
    --bg-secondary: #111118;
    --bg-header: rgba(17, 17, 24, 0.8);
    --bg-sidebar: rgba(17, 17, 24, 0.9);
    --bg-card: rgba(22, 22, 32, 0.6);
    --bg-card-hover: rgba(30, 30, 45, 0.8);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-hover: rgba(255, 255, 255, 0.08);
    --bg-code: rgba(0, 0, 0, 0.4);
    --bg-code-inline: rgba(139, 92, 246, 0.15);
    --bg-glass: rgba(255, 255, 255, 0.03);
    --bg-key-topics: rgba(139, 92, 246, 0.08);
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b5;
    --text-muted: #6b6b80;
    --text-code: #e0e0f0;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --accent-color: #8b5cf6;
    --accent-hover: #a78bfa;
    --accent-light: rgba(139, 92, 246, 0.15);
    --accent-glow: rgba(139, 92, 246, 0.4);
    --gradient-accent: linear-gradient(135deg, #8b5cf6, #6366f1);
    --gradient-card: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.02));
    --gradient-shine: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.15);
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --keyword-color: #c084fc;
    --string-color: #34d399;
    --comment-color: #6b7280;
    --number-color: #60a5fa;
    --annotation-color: #fbbf24;
    --tag-color: #f87171;
    --attribute-color: #a78bfa;
    --diagram-bg: rgba(139, 92, 246, 0.05);
    --diagram-border: #6366f1;
    --diagram-node: rgba(139, 92, 246, 0.2);
    --diagram-text: #a78bfa;
    --diagram-arrow: #8b5cf6;
}

[data-theme="light"] {
    --bg-primary: #fafafa;
    --bg-secondary: #ffffff;
    --bg-header: rgba(255, 255, 255, 0.85);
    --bg-sidebar: rgba(255, 255, 255, 0.92);
    --bg-card: rgba(255, 255, 255, 0.8);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --bg-input: rgba(0, 0, 0, 0.04);
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-code: rgba(0, 0, 0, 0.03);
    --bg-code-inline: rgba(139, 92, 246, 0.1);
    --bg-glass: rgba(255, 255, 255, 0.6);
    --bg-key-topics: rgba(139, 92, 246, 0.06);
    --text-primary: #111118;
    --text-secondary: #555566;
    --text-muted: #888899;
    --text-code: #1a1a2e;
    --border-color: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);
    --accent-color: #7c3aed;
    --accent-hover: #6d28d9;
    --accent-light: rgba(124, 58, 237, 0.1);
    --accent-glow: rgba(124, 58, 237, 0.2);
    --gradient-accent: linear-gradient(135deg, #7c3aed, #4f46e5);
    --gradient-card: linear-gradient(135deg, rgba(124, 58, 237, 0.03), rgba(79, 70, 229, 0.01));
    --gradient-shine: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 60%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 30px rgba(124, 58, 237, 0.08);
    --success-color: #059669;
    --warning-color: #d97706;
    --error-color: #dc2626;
    --keyword-color: #7c3aed;
    --string-color: #059669;
    --comment-color: #6b7280;
    --number-color: #2563eb;
    --annotation-color: #d97706;
    --tag-color: #dc2626;
    --attribute-color: #7c3aed;
    --diagram-bg: rgba(124, 58, 237, 0.04);
    --diagram-border: #7c3aed;
    --diagram-node: rgba(124, 58, 237, 0.1);
    --diagram-text: #4f46e5;
    --diagram-arrow: #7c3aed;
}

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--text-muted) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }