/* ================================================================ CiteGap Design Tokens Light theme = default (:root) Dark theme = .dark class on ================================================================ */ :root { /* --- Backgrounds --- */ --bg: hsl(60 10% 97%); --bg-card: hsl(60 10% 94%); --bg-surface: hsl(60 10% 92%); --bg-surface-hover: hsl(60 10% 88%); /* --- Foregrounds --- */ --fg: hsl(220 20% 10%); --fg-muted: hsl(220 10% 40%); --fg-dim: hsl(220 10% 55%); /* --- Primary (deeper olive-green for light backgrounds) --- */ --primary: hsl(72 90% 35%); --primary-fg: hsl(0 0% 100%); --primary-hover: hsl(72 80% 30%); --primary-active: hsl(72 70% 25%); /* --- Borders --- */ --border: hsl(220 10% 85%); --border-hover: hsl(72 90% 35% / 0.3); /* --- Semantic --- */ --destructive: hsl(0 84% 45%); /* --- Shadows / Glows (subtle on light) --- */ --glow: 0 0 40px -10px hsl(72 90% 35% / 0.15); --glow-sm: 0 0 20px -5px hsl(72 90% 35% / 0.1); --glow-text: 0 0 30px hsl(72 90% 35% / 0.2); /* --- Contextual (component-specific) --- */ --nav-bg: hsl(60 10% 97% / 0.85); --hero-gradient: hsl(72 90% 35% / 0.06); --grid-line: hsl(220 10% 85% / 0.6); --features-bg: hsl(60 10% 94% / 0.5); --prompt-color: hsl(72 90% 35% / 0.7); /* --- Flash messages --- */ --flash-success-bg: hsl(72 90% 35% / 0.08); --flash-success-border: hsl(72 90% 35% / 0.2); --flash-success-fg: hsl(72 60% 28%); --flash-info-bg: hsl(72 90% 35% / 0.05); --flash-info-fg: hsl(72 50% 30%); --flash-info-border: hsl(72 90% 35% / 0.15); --flash-error-bg: hsl(0 84% 45% / 0.06); --flash-error-border: hsl(0 84% 45% / 0.15); /* --- Component-specific --- */ --step-glow-gradient: hsl(72 90% 35% / 0.15); --score-ring-shadow: hsl(72 90% 35% / 0.25); --focus-border: hsl(72 90% 35% / 0.5); --focus-ring: hsl(72 90% 35% / 0.08); /* --- Layout --- */ --radius: 8px; --radius-sm: 4px; /* --- Typography --- */ --font: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* ---- Dark theme overrides ---- */ .dark { --bg: hsl(220 20% 7%); --bg-card: hsl(220 18% 10%); --bg-surface: hsl(220 18% 12%); --bg-surface-hover: hsl(220 18% 16%); --fg: hsl(60 10% 92%); --fg-muted: hsl(220 10% 65%); --fg-dim: hsl(220 10% 50%); --primary: hsl(72 100% 50%); --primary-fg: hsl(220 20% 7%); --primary-hover: hsl(72 90% 45%); --primary-active: hsl(72 80% 38%); --border: hsl(220 15% 18%); --border-hover: hsl(72 100% 50% / 0.3); --destructive: hsl(0 84% 60%); --glow: 0 0 40px -10px hsl(72 100% 50% / 0.3); --glow-sm: 0 0 20px -5px hsl(72 100% 50% / 0.2); --glow-text: 0 0 30px hsl(72 100% 50% / 0.4); --nav-bg: hsl(220 20% 7% / 0.8); --hero-gradient: hsl(72 100% 50% / 0.06); --grid-line: hsl(220 15% 18% / 0.5); --features-bg: hsl(220 18% 10% / 0.5); --prompt-color: hsl(72 100% 50% / 0.7); --flash-success-bg: hsl(72 100% 50% / 0.1); --flash-success-border: hsl(72 100% 50% / 0.2); --flash-success-fg: hsl(72 100% 50%); --flash-info-bg: hsl(72 100% 50% / 0.06); --flash-info-fg: hsl(72 80% 60%); --flash-info-border: hsl(72 100% 50% / 0.15); --flash-error-bg: hsl(0 84% 60% / 0.08); --flash-error-border: hsl(0 84% 60% / 0.15); --step-glow-gradient: hsl(72 100% 50% / 0.2); --score-ring-shadow: hsl(72 100% 50% / 0.4); --focus-border: hsl(72 100% 50% / 0.5); --focus-ring: hsl(72 100% 50% / 0.08); }