/**
* Design Token System
*
* This file defines all CSS variables used throughout the application.
* These tokens enable real-time customization through the Customization Engine.
*
* Requirements: 1.1, 1.3, 1.4, 1.5, 1.6
*/
:root {
/* ========================================
* Typography Tokens (Requirement 1.6)
* Multiple font families for customization
* ======================================== */
--font-default: "Inter", sans-serif;
--font-corporate: "Roboto", sans-serif;
--font-fun: "Quicksand", sans-serif;
--font-nerd: "Fira Code", monospace;
--font-quirky: "Space Grotesk", sans-serif;
/* ========================================
* Color Tokens (Requirement 1.3)
* Primary, background, text, and status colors
* ======================================== */
/* Primary Colors */
--primary: #6b73ff;
--primary-rgb: 107, 115, 255;
--primary-dark: #5a63e0;
--primary-gradient: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
--secondary-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
--secondary-rgb: 255, 154, 158;
/* Status Colors */
--success: #2ed573;
--warning: #ffa502;
--error: #ff4757;
--info: #3498db;
/* Status Background/Text Colors */
--status-success-bg: #e6f4ea;
--status-success-text: #1e8e3e;
--status-warning-bg: #fef7e0;
--status-warning-text: #f9ab00;
--status-error-bg: #fce8e6;
--status-error-text: #d93025;
--status-info-bg: #e8f0fe;
--status-info-text: #1967d2;
/* ========================================
* Spacing Tokens (Requirement 1.5)
* Consistent scale using 4px base unit
* space-n = n * 4px
* ======================================== */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
/* ========================================
* Background Colors (Light Theme Default)
* ======================================== */
--bg-app: #f0f2f5;
--bg-surface: #ffffff;
--bg-surface-hover: #f8f9fa;
--bg-glass: rgba(255, 255, 255, 0.7);
/* Text Colors - Enhanced contrast for light themes */
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-tertiary: #6b6b6b;
/* Border Colors */
--border: rgba(0, 0, 0, 0.1);
--border-light: rgba(0, 0, 0, 0.05);
--border-glass: rgba(255, 255, 255, 0.3);
/* Shadow Colors */
--shadow-color: rgba(0, 0, 0, 0.05);
--shadow: rgba(0, 0, 0, 0.1);
/* Progress Bar - Enhanced contrast for light themes */
--progress-bar-bg: rgba(0, 0, 0, 0.15);
--progress-bar-empty-bg: rgba(0, 0, 0, 0.08);
--progress-bar-empty-border: rgba(0, 0, 0, 0.15);
/* Scrollbar */
--scrollbar-thumb: rgba(107, 115, 255, 0.4);
--scrollbar-thumb-hover: rgba(107, 115, 255, 0.6);
--scrollbar-thumb-active: rgba(107, 115, 255, 0.8);
/* ========================================
* Effect Tokens (Requirement 1.4)
* Glass, glow, grain, parallax, animation
* ======================================== */
/* Glass Effect */
--glass-opacity: 0.7;
--glass-blur: 10px;
--glass-border-opacity: 0.3;
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.3);
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
/* Glow Effect */
--glow-strength: 50;
--glow-primary: rgba(107, 115, 255, 0.15);
--glow-success: rgba(46, 213, 115, 0.15);
--glow-warning: rgba(255, 165, 2, 0.15);
--glow-danger: rgba(255, 71, 87, 0.15);
/* Grain Effect */
--grain-opacity: 0.05;
/* Parallax Effect */
--parallax-depth: 25;
--parallax-strength: 25;
/* Animation Speed */
--animation-speed: 1;
--duration-fast: 0.15s;
--duration-normal: 0.3s;
--duration-slow: 0.5s;
/* Shadow Strength */
--shadow-strength: 40;
/* Border Radius */
--border-radius: 12px;
--fab-radius: 14px;
/* ========================================
* Shadow Presets
* ======================================== */
--shadow-sm: 0 2px 4px var(--shadow);
--shadow-md: 0 4px 12px var(--shadow);
--shadow-lg: 0 8px 24px var(--shadow);
}
/* ========================================
* Dark Theme Overrides
* ======================================== */
[data-theme="dark"] {
/* Background Colors */
--bg-app: #0f1115;
--bg-surface: #1e2128;
--bg-surface-hover: #2a2e38;
--bg-glass: rgba(30, 33, 40, 0.7);
/* Text Colors */
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--text-tertiary: #666666;
/* Border Colors */
--border: rgba(255, 255, 255, 0.12);
--border-light: rgba(255, 255, 255, 0.06);
--border-glass: rgba(255, 255, 255, 0.1);
/* Shadow Colors */
--shadow-color: rgba(0, 0, 0, 0.3);
--shadow: rgba(0, 0, 0, 0.3);
/* Progress Bar - Dark theme values */
--progress-bar-bg: rgba(255, 255, 255, 0.1);
--progress-bar-empty-bg: rgba(255, 255, 255, 0.05);
--progress-bar-empty-border: rgba(255, 255, 255, 0.12);
/* Scrollbar */
--scrollbar-thumb: rgba(107, 115, 255, 0.3);
--scrollbar-thumb-hover: rgba(107, 115, 255, 0.5);
--scrollbar-thumb-active: rgba(107, 115, 255, 0.7);
/* Glass Effect (Dark) */
--glass-bg: rgba(30, 33, 40, 0.7);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
/* Glow Effect (Dark - slightly more visible) */
--glow-primary: rgba(107, 115, 255, 0.2);
--glow-success: rgba(46, 213, 115, 0.2);
--glow-warning: rgba(255, 165, 2, 0.2);
--glow-danger: rgba(255, 71, 87, 0.2);
}
