/* * Scapetime Design System - Theme Variables * * Usage: Load this file globally. Set data-theme="light" or data-theme="dark" * on or . Default is light. * * Features write their own component CSS using these variables. * Do NOT put component styles in this file. */ /* ============================================ FONTS ============================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* Font families */ --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace; /* Font sizes */ --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 32px; /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ============================================ SPACING (4px base) ============================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* ============================================ BORDER RADIUS ============================================ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ============================================ TRANSITIONS ============================================ */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } /* ============================================ LIGHT THEME (default) Clean white/gray with blue accent - inverse of dark ============================================ */ [data-theme="light"], :root { /* Backgrounds */ --bg-primary: #f0f3f6; --bg-secondary: #ffffff; --bg-tertiary: #e4e8ec; --bg-elevated: #ffffff; /* Text */ --text-primary: #1a1e24; --text-secondary: #505860; --text-muted: #8590a0; /* Borders */ --border-primary: #c8cdd5; --border-secondary: #dfe3e8; /* Accent - blue (mirrors dark theme) */ --accent: #1a6fb5; --accent-hover: #145a94; --accent-light: rgba(26, 111, 181, 0.1); --text-on-accent: #ffffff; /* Status colors */ --status-good: #1a7a3a; --status-good-bg: rgba(26, 122, 58, 0.1); --status-warning: #a16207; --status-warning-bg: rgba(161, 98, 7, 0.1); --status-danger: #c22d2d; --status-danger-bg: rgba(194, 45, 45, 0.1); --status-info: #1a6fb5; --status-info-bg: rgba(26, 111, 181, 0.1); /* Shadows */ --shadow-sm: 0 1px 2px 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.14); /* Overlays */ --overlay-bg: rgba(0, 0, 0, 0.4); --overlay-blur: 4px; } /* ============================================ DARK THEME Extracted from truck manager ============================================ */ [data-theme="dark"] { /* Backgrounds */ --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #21262d; --bg-elevated: #2d333b; /* Text */ --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #6e7681; /* Borders */ --border-primary: #30363d; --border-secondary: #21262d; /* Accent - blue (from truck manager) */ --accent: #58a6ff; --accent-hover: #79b8ff; --accent-light: rgba(88, 166, 255, 0.1); --text-on-accent: #ffffff; /* Status colors */ --status-good: #3fb950; --status-good-bg: rgba(63, 185, 80, 0.15); --status-warning: #d29922; --status-warning-bg: rgba(210, 153, 34, 0.15); --status-danger: #f85149; --status-danger-bg: rgba(248, 81, 73, 0.15); --status-info: #58a6ff; --status-info-bg: rgba(88, 166, 255, 0.15); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* Overlays */ --overlay-bg: rgba(0, 0, 0, 0.6); --overlay-blur: 4px; }