/* ========================================================================== Student Verse — Theme Tokens Three themes swapped via [data-theme] on : light | dark | neon ========================================================================== */ :root { --font-ui: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Manrope", "Inter", system-ui, sans-serif; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --sidebar-w: 248px; --sidebar-w-collapsed: 76px; --topbar-h: 64px; --transition-fast: 140ms ease; --transition-med: 220ms cubic-bezier(0.22, 1, 0.36, 1); } /* ---------------------------------- Light --------------------------------- */ [data-theme="light"] { --bg: #f7f6fb; --surface: #ffffff; --surface-2: #f0eef9; --border: #e6e3f2; --text: #17151f; --text-muted: #635f74; --accent: #6c4cf1; --accent-2: #8f6bff; --accent-contrast: #ffffff; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --glow: none; --shadow-card: 0 1px 2px rgba(23, 21, 31, 0.04), 0 8px 24px rgba(23, 21, 31, 0.06); } /* ----------------------------------- Dark ---------------------------------- */ [data-theme="dark"] { --bg: #0b0c17; --surface: #12142455; --surface: #131526; --surface-2: #1b1e33; --border: #262a45; --text: #f2f1fb; --text-muted: #a4a1c2; --accent: #d4af37; --accent-2: #8f6bff; --accent-contrast: #0b0c17; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --glow: 0 0 24px rgba(212, 175, 55, 0.18); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.35); } /* ----------------------------------- Neon ---------------------------------- */ [data-theme="neon"] { --bg: #08060f; --surface: #120f22; --surface-2: #1a1530; --border: #2c2450; --text: #f5f0ff; --text-muted: #b3a4e0; --accent: #c04bff; --accent-2: #38e8ff; --accent-contrast: #0a0714; --success: #39ffb0; --warning: #ffcf4b; --danger: #ff5d8f; --glow: 0 0 18px rgba(192, 75, 255, 0.45), 0 0 36px rgba(56, 232, 255, 0.15); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 32px rgba(139, 44, 255, 0.18); } /* Base reset that relies on the tokens above */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; transition: background var(--transition-med), color var(--transition-med); } a { color: inherit; } ::selection { background: var(--accent); color: var(--accent-contrast); }