/* website/static/css/base/variables.css */ /* ------------------------------------------------------------ GLOBAL DESIGN TOKENS (Master Variable System) website/static/css/base/variables.css ------------------------------------------------------------ PURPOSE: This file defines the *entire* design language of the app. Every component must use these variables instead of hardcoded values. Themes override these tokens to restyle the whole UI. TOKENS INCLUDED: ✓ Color palette (semantic + brand) ✓ Neutral tones ✓ Background layers ✓ Typography system ✓ Spacing scale ✓ Radius scale ✓ Shadow scale ✓ Animation timings ✓ Glass system defaults ------------------------------------------------------------ */ :root { /* ============================================================ 1) BRAND & SEMANTIC COLORS ============================================================ */ --color-primary: #ff9966; --color-secondary: #ff5e62; --color-accent: #ffa07a; --color-gold: #ffd700; --color-success: #28a745; --color-danger: #dc3545; --color-warning: #ffc107; --color-info: #17a2b8; /* ============================================================ 2) NEUTRAL PALETTE ============================================================ */ --color-light: #f0f0f0; --color-dark: #1c1c2b; --color-muted: #aaa; --color-border: rgba(255,255,255,0.18); /* ============================================================ 3) BACKGROUND SYSTEM (Theme overrides these) ============================================================ */ --content-bg: transparent; --section-bg: rgba(255,255,255,0.04); /* Glass system defaults */ --glass-bg: rgba(255,255,255,0.08); --glass-transparent-bg: rgba(255,255,255,0.06); --glass-elevated-bg: rgba(28,28,43,0.9); --glass-border: rgba(255,255,255,0.18); --glass-transparent-border: rgba(255,255,255,0.12); --glass-text: var(--color-light); /* ============================================================ 4) TYPOGRAPHY SYSTEM ============================================================ */ --font-family-base: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'Courier New', monospace; --font-size-small: 0.85rem; --font-size-base: 0.95rem; --font-size-large: 1.1rem; --font-size-xlarge: 1.4rem; /* ============================================================ 5) SPACING SCALE ============================================================ */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; /* ============================================================ 6) RADIUS SCALE ============================================================ */ --radius-small: 6px; --radius-base: 12px; --radius-large: 16px; /* ============================================================ 7) SHADOW SYSTEM ============================================================ */ --shadow-light: 0 4px 12px rgba(0,0,0,0.2); --shadow-medium: 0 10px 28px rgba(0,0,0,0.3); --shadow-heavy: 0 14px 24px rgba(0,0,0,0.35); /* ============================================================ 8) ANIMATION TIMINGS ============================================================ */ --transition-fast: 0.18s ease; --transition-medium: 0.3s ease; --transition-slow: 0.6s ease; } /* ------------------------------------------------------------ DARK THEME OVERRIDES (Applied when ) ------------------------------------------------------------ */ body.dark-theme { --color-light: #ddd; --color-dark: #0f0f1a; /* Glass adjustments */ --glass-bg: rgba(255,255,255,0.06); --glass-elevated-bg: rgba(15,15,26,0.95); --glass-transparent-bg: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.12); /* Background layers */ --section-bg: rgba(255,255,255,0.04); --content-bg: transparent; }