/* ═══════════════════════════════════════════════════════════════════════════════ DESIGN TOKENS - SafeStation Design System ═══════════════════════════════════════════════════════════════════════════════ This file centralizes all CSS variables (design tokens) for consistency. Other CSS files should reference these tokens instead of hardcoding values. STRUCTURE: 1. Typography 2. Colors - Base palette 3. Colors - Semantic (text, borders, surfaces) 4. Spacing scale (4px base) 5. Border radius 6. Shadows 7. Component tokens (forms, grids, navigation) 8. Animation & Motion WCAG AA Compliance: - Text contrast ratios verified for dark theme - Muted text uses 0.85 opacity (4.5:1 ratio) instead of 0.7 ═══════════════════════════════════════════════════════════════════════════════ DEVEXPRESS DESIGN SYSTEM TOKEN MAPPING ═══════════════════════════════════════════════════════════════════════════════ For future alignment, here's how our tokens map to DevExpress --dxds-* tokens: SPACING: | Our Token | DevExpress Equivalent | Value | |-------------|------------------------|--------| | --space-1 | --dxds-spacing-040 | 4px | | --space-2 | --dxds-spacing-080 | 8px | | --space-3 | --dxds-spacing-120 | 12px | | --space-4 | --dxds-spacing-160 | 16px | | --space-6 | --dxds-spacing-240 | 24px | | --space-8 | --dxds-spacing-320 | 32px | TYPOGRAPHY: | Our Token | DevExpress Equivalent | Value | |-------------|----------------------------|----------| | --text-xs | --dxds-font-size-caption | 0.7rem | | --text-sm | --dxds-font-size-base-sm | 0.8rem | | --text-base | --dxds-font-size-base-md | 0.875rem | | --text-lg | --dxds-font-size-title-sm | 1.125rem | | --text-xl | --dxds-font-size-title-md | 1.25rem | COLORS (DevExpress uses theme-aware semantic colors): | Our Token | DevExpress Equivalent | Notes | |------------------|----------------------|--------------------------| | --color-success | --dxds-success-90 | Varies by theme | | --color-error | --dxds-danger-90 | Varies by theme | | --color-warning | --dxds-warning-90 | Varies by theme | | --color-info | --dxds-info-90 | Varies by theme | | --color-primary | --dxds-primary-90 | Accent color, theme-aware| BORDER RADIUS: | Our Token | DevExpress Equivalent | Value | |--------------|-------------------------|-------| | --radius-sm | --dxds-border-radius-20 | 4px | | --radius-md | --dxds-border-radius-40 | 6px | | --radius-lg | --dxds-border-radius-60 | 8px | NOTE: DevExpress doesn't expose animation timing tokens publicly. Our --transition-* tokens are custom extensions. Last Updated: 2026-01-27 ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════════════════ 1. TYPOGRAPHY ═══════════════════════════════════════════════════════════════════════════ */ --font-family-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-mono: 'Roboto Mono', monospace; /* Type scale */ --text-xs: 0.7rem; /* 11.2px - labels, badges */ --text-sm: 0.8rem; /* 12.8px - secondary text */ --text-base: 0.875rem; /* 14px - body text */ --text-md: 1rem; /* 16px - emphasized */ --text-lg: 1.125rem; /* 18px - section headers */ --text-xl: 1.25rem; /* 20px - page titles */ --text-2xl: 1.5rem; /* 24px - major headings */ /* ═══════════════════════════════════════════════════════════════════════════ 2. COLORS - Base Palette ═══════════════════════════════════════════════════════════════════════════ */ /* Primary blue scale */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-light: #60a5fa; --color-primary-muted: rgba(59, 130, 246, 0.15); --color-primary-glow: rgba(59, 130, 246, 0.35); /* Slate scale (dark theme base) */ --color-slate-900: #0f172a; --color-slate-800: #1e293b; --color-slate-700: #334155; --color-slate-600: #475569; --color-slate-500: #64748b; --color-slate-400: #94a3b8; --color-slate-300: #cbd5e1; --color-slate-200: #e2e8f0; --color-slate-100: #f1f5f9; /* Semantic colors */ --color-success: #22c55e; --color-success-muted: rgba(34, 197, 94, 0.15); --color-warning: #f59e0b; --color-warning-muted: rgba(245, 158, 11, 0.15); --color-error: #ef4444; --color-error-muted: rgba(239, 68, 68, 0.15); --color-info: #0ea5e9; --color-info-muted: rgba(14, 165, 233, 0.15); /* ═══════════════════════════════════════════════════════════════════════════ 3. COLORS - Semantic (surfaces, text, borders) ═══════════════════════════════════════════════════════════════════════════ */ /* Surfaces */ --surface-background: #0f172a; --surface-card: rgba(30, 41, 59, 0.95); --surface-elevated: rgba(51, 65, 85, 0.9); --surface-hover: rgba(51, 65, 85, 0.5); --surface-active: rgba(59, 130, 246, 0.15); /* Text - WCAG AA compliant */ --text-primary: #e2e8f0; --text-secondary: rgba(148, 163, 184, 0.85); /* 0.85 for WCAG AA (was 0.7) */ --text-muted: rgba(148, 163, 184, 0.85); /* 0.85 for WCAG AA (was 0.7) */ --text-placeholder: rgba(148, 163, 184, 0.5); --text-inverse: #0f172a; --text-white: #ffffff; /* Borders */ --border-default: rgba(148, 163, 184, 0.2); --border-hover: rgba(148, 163, 184, 0.35); --border-focus: rgba(59, 130, 246, 0.5); --border-subtle: rgba(148, 163, 184, 0.12); /* ═══════════════════════════════════════════════════════════════════════════ 4. SPACING SCALE (4px base) ═══════════════════════════════════════════════════════════════════════════ Use these tokens for all padding, margin, and gap values. Fractional values (0.5, 1.5, etc.) provide fine control. */ --space-0: 0; --space-px: 1px; /* 1px - borders, fine adjustments */ --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ /* ═══════════════════════════════════════════════════════════════════════════ 5. BORDER RADIUS ═══════════════════════════════════════════════════════════════════════════ */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-full: 9999px; /* ═══════════════════════════════════════════════════════════════════════════ 6. SHADOWS ═══════════════════════════════════════════════════════════════════════════ */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.3); --shadow-glow-primary: 0 0 20px rgba(59, 130, 246, 0.3); --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.3); --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.3); /* ═══════════════════════════════════════════════════════════════════════════ 7. COMPONENT TOKENS ═══════════════════════════════════════════════════════════════════════════ These provide backward compatibility with existing component CSS. New code should prefer semantic tokens above. */ /* Forms */ --form-font: var(--font-family-base); --form-bg: rgba(51, 65, 85, 0.4); --form-bg-hover: rgba(51, 65, 85, 0.5); --form-border: var(--border-default); --form-border-hover: var(--border-hover); --form-border-focus: var(--border-focus); --form-text: var(--text-white); --form-text-muted: var(--text-muted); --form-placeholder: var(--text-placeholder); --form-accent: var(--color-primary); --form-radius: var(--radius-md); --form-height: 38px; /* Grids */ --grid-font: var(--font-family-base); --grid-header-text: rgba(148, 163, 184, 0.85); /* WCAG AA fix */ --grid-border: var(--border-subtle); --grid-row-hover: rgba(59, 130, 246, 0.06); --grid-text: var(--text-primary); --grid-text-muted: var(--text-muted); /* Navigation */ --nav-midnight: var(--color-slate-900); --nav-primary: var(--color-primary-hover); --nav-azure: var(--color-primary); --nav-surface: transparent; --nav-surface-hover: rgba(255, 255, 255, 0.04); --nav-surface-active: var(--surface-active); --nav-icon-bg: var(--color-primary-muted); --nav-icon-bg-hover: rgba(59, 130, 246, 0.22); --nav-icon-bg-active: var(--color-primary); --nav-icon-color: rgba(255, 255, 255, 0.9); --nav-icon-color-active: var(--text-white); --nav-text-muted: var(--text-muted); --nav-text-default: rgba(226, 232, 240, 0.88); --nav-text-hover: rgba(248, 250, 252, 0.95); --nav-text-active: var(--color-primary); --nav-card-radius: var(--radius-3xl); /* Cards */ --card-header-height: 56px; --card-radius: var(--radius-lg); --card-padding: var(--space-4); /* ═══════════════════════════════════════════════════════════════════════════ 8. ANIMATION & MOTION ═══════════════════════════════════════════════════════════════════════════ */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; } /* ═══════════════════════════════════════════════════════════════════════════════ REDUCED MOTION SUPPORT Respects user's system preference for reduced motion ═══════════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0s; --transition-base: 0s; --transition-slow: 0s; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }