/* ================================================================ * BUILD CAMP TRAINING - SHARED CSS VARIABLES * Single source of truth for all design tokens. * Change values here to update the entire project. * ================================================================ */ :root { /* ---- Brand Colors - Primary ---- */ --primary: #009999; --primary-light: #00B8B8; --primary-glow: #33ADAD; --secondary: #00587C; --secondary-dark: #003D56; /* ---- Accent Colors ---- */ --accent-orange: #FF8C42; --accent-green: #00875A; --accent-purple: #6554C0; /* ---- Status Colors ---- */ --success: #00875A; --warning: #FF991F; --danger: #DE350B; --info: #6554C0; /* ---- Neutral Colors ---- */ --white: #FFFFFF; --gray-100: #F4F5F7; --gray-200: #DFE1E6; --gray-300: #B3BAC5; --gray-400: #5E6C84; --gray-500: #42526E; --black: #000000; /* ---- Background Colors (dark mode default) ---- */ --bg-page: #0d0d1a; --bg-card: #1a1a2e; --bg-surface: #0a1628; /* ---- Text Colors ---- */ --text-primary: #ffffff; --text-secondary: #c0c0d0; --text-muted: #9090a5; /* ---- Borders ---- */ --border-color: #3d3d5c; --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 16px; --border-radius-xl: 20px; /* ---- Typography ---- */ --font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --line-height-base: 1.6; --line-height-tight: 1.3; /* ---- Spacing Scale ---- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* ---- Layout ---- */ --container-max: 1200px; /* ---- Transitions ---- */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* ---- Shadows ---- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); } /* ================================================================ * LIGHT MODE OVERRIDES * Applied when is set. * Only override variables that change between themes. * ================================================================ */ [data-theme="light"] { /* Backgrounds */ --bg-page: #f5f5f7; --bg-card: #ffffff; --bg-surface: #f0f0f5; /* Text */ --text-primary: #1a1a2e; --text-secondary: #5a5a6a; --text-muted: #8a8a9a; /* Borders */ --border-color: #d0d0e0; /* Shadows (lighter for light mode) */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); }