/** * ResponseReady Design Tokens * =========================== * * A comprehensive design token system for the ResponseReady * fire brigade automation platform. * * Features: * - WCAG 2.1 AA compliant color system * - Material Design principles with bold, professional tone * - Consistent spacing, typography, and layout tokens * - Operational status colors for emergency services * * Usage: Import this file before main.css * @import url('tokens.css'); * * @version 2.0.0 * @license MIT */ :root { /* ============================================================ * 1. COLOR SYSTEM * ============================================================ * All colors are WCAG 2.1 AA compliant for their intended use. * Primary colors tested for 4.5:1 contrast ratio on white backgrounds. */ /* ------------------------------------------------------------- * Primary - Fire Service Red * Base: #DC2626 (WCAG AA compliant on white) * Used for: Primary actions, brand identity, critical alerts * ------------------------------------------------------------- */ --color-primary-50: #FEF2F2; --color-primary-100: #FEE2E2; --color-primary-200: #FECACA; --color-primary-300: #FCA5A5; --color-primary-400: #F87171; --color-primary-500: #EF4444; --color-primary-600: #DC2626; /* Primary action color */ --color-primary-700: #B91C1C; --color-primary-800: #991B1B; --color-primary-900: #7F1D1D; /* Semantic aliases for primary */ --color-primary: var(--color-primary-600); --color-primary-hover: var(--color-primary-700); --color-primary-active: var(--color-primary-800); --color-primary-light: var(--color-primary-100); /* ------------------------------------------------------------- * Neutral - Slate Grays * Improved contrast over standard grays * Used for: Text, backgrounds, borders, disabled states * ------------------------------------------------------------- */ --color-neutral-50: #F8FAFC; --color-neutral-100: #F1F5F9; --color-neutral-200: #E2E8F0; --color-neutral-300: #CBD5E1; --color-neutral-400: #94A3B8; --color-neutral-500: #64748B; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1E293B; --color-neutral-900: #0F172A; /* ------------------------------------------------------------- * Semantic Colors * Each color passes WCAG AA for text on white backgrounds * ------------------------------------------------------------- */ --color-success: #16A34A; /* Green 600 - 4.5:1 contrast */ --color-success-light: #DCFCE7; /* Green 100 - backgrounds */ --color-success-dark: #15803D; /* Green 700 - hover states */ --color-warning: #D97706; /* Amber 600 - 4.5:1 contrast */ --color-warning-light: #FEF3C7; /* Amber 100 - backgrounds */ --color-warning-dark: #B45309; /* Amber 700 - hover states */ --color-error: #DC2626; /* Red 600 - matches primary */ --color-error-light: #FEE2E2; /* Red 100 - backgrounds */ --color-error-dark: #B91C1C; /* Red 700 - hover states */ --color-info: #0284C7; /* Sky 600 - 4.5:1 contrast */ --color-info-light: #E0F2FE; /* Sky 100 - backgrounds */ --color-info-dark: #0369A1; /* Sky 700 - hover states */ /* ------------------------------------------------------------- * Operational Status Colors * Specific to fire/emergency service operations * High visibility, distinct from each other * ------------------------------------------------------------- */ --status-available: #22C55E; /* Green 500 - On duty, available */ --status-responding: #F59E0B; /* Amber 500 - En route, responding */ --status-unavailable: #6B7280; /* Gray 500 - Off duty, unavailable */ --status-emergency: #DC2626; /* Red 600 - Active emergency */ /* Status backgrounds (for badges, indicators) */ --status-available-bg: #DCFCE7; --status-responding-bg: #FEF3C7; --status-unavailable-bg: #F3F4F6; --status-emergency-bg: #FEE2E2; /* ------------------------------------------------------------- * Surface Colors * Used for: Cards, modals, panels, overlays * ------------------------------------------------------------- */ --surface-primary: #FFFFFF; --surface-secondary: #F8FAFC; /* Slight gray tint */ --surface-elevated: #FFFFFF; /* Elevated cards, modals */ --surface-overlay: rgba(15, 23, 42, 0.5); /* Modal/drawer backdrops */ --surface-scrim: rgba(15, 23, 42, 0.8); /* Darker overlay for focus */ /* ------------------------------------------------------------- * Border Colors * ------------------------------------------------------------- */ --border-default: var(--color-neutral-200); --border-strong: var(--color-neutral-300); --border-focus: var(--color-primary-600); /* ============================================================ * 2. TYPOGRAPHY * ============================================================ * Inter for UI, JetBrains Mono for code/data * Type scale uses 1.25 ratio (Major Third) */ /* ------------------------------------------------------------- * Font Families * ------------------------------------------------------------- */ --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', monospace; /* ------------------------------------------------------------- * Type Scale (1.25 ratio - Major Third) * Base: 16px * ------------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px - Captions, labels */ --text-sm: 0.875rem; /* 14px - Secondary text, form labels */ --text-base: 1rem; /* 16px - Body text */ --text-lg: 1.125rem; /* 18px - Lead text */ --text-xl: 1.25rem; /* 20px - H5, card titles */ --text-2xl: 1.5rem; /* 24px - H4, section headers */ --text-3xl: 1.875rem; /* 30px - H3, page subtitles */ --text-4xl: 2.25rem; /* 36px - H2, page titles */ --text-5xl: 3rem; /* 48px - H1, hero text */ --text-6xl: 3.75rem; /* 60px - Display text */ /* ------------------------------------------------------------- * Font Weights * ------------------------------------------------------------- */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ------------------------------------------------------------- * Line Heights * ------------------------------------------------------------- */ --leading-none: 1; --leading-tight: 1.25; /* Headings */ --leading-snug: 1.375; /* Compact text */ --leading-normal: 1.5; /* Body text */ --leading-relaxed: 1.625; /* Long-form content */ --leading-loose: 2; /* Extra spacing */ /* ------------------------------------------------------------- * Letter Spacing * ------------------------------------------------------------- */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ============================================================ * 3. SPACING SCALE * ============================================================ * Base unit: 4px (0.25rem) * Consistent spacing for margins, padding, gaps */ --space-0: 0; --space-px: 1px; --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 */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ /* ============================================================ * 4. LAYOUT * ============================================================ * Border radius, shadows, z-index, containers */ /* ------------------------------------------------------------- * Border Radius * ------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 4px; /* Subtle rounding */ --radius-md: 8px; /* Default for cards, buttons */ --radius-lg: 12px; /* Prominent cards, modals */ --radius-xl: 16px; /* Large cards, panels */ --radius-2xl: 24px; /* Extra large elements */ --radius-full: 9999px; /* Pills, avatars, circular elements */ /* ------------------------------------------------------------- * Box Shadows * Subtle, layered shadows for depth * ------------------------------------------------------------- */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); /* Focus ring shadow */ --shadow-focus: 0 0 0 3px rgba(220, 38, 38, 0.2); --shadow-focus-primary: 0 0 0 3px rgba(220, 38, 38, 0.2); --shadow-focus-info: 0 0 0 3px rgba(2, 132, 199, 0.2); /* ------------------------------------------------------------- * Z-Index Scale * Consistent layering for overlapping elements * ------------------------------------------------------------- */ --z-base: 0; --z-dropdown: 1000; /* Dropdown menus, selects */ --z-sticky: 1100; /* Sticky headers, nav */ --z-modal: 1200; /* Modal dialogs */ --z-tooltip: 1300; /* Tooltips, popovers */ --z-toast: 1400; /* Toast notifications */ --z-max: 9999; /* Emergency overlays */ /* ------------------------------------------------------------- * Breakpoints (for reference in comments/documentation) * Use @media queries with these values * ------------------------------------------------------------- */ /* * --breakpoint-sm: 640px - Small devices (phones) * --breakpoint-md: 768px - Medium devices (tablets) * --breakpoint-lg: 1024px - Large devices (desktops) * --breakpoint-xl: 1280px - Extra large (wide screens) * --breakpoint-2xl: 1536px - Ultra wide screens */ /* ------------------------------------------------------------- * Container Widths * Max-width values for content containers * ------------------------------------------------------------- */ --container-xs: 320px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-prose: 65ch; /* Optimal reading width */ /* ============================================================ * 5. ANIMATION / MOTION * ============================================================ * Durations and easing curves for consistent motion */ /* ------------------------------------------------------------- * Durations * ------------------------------------------------------------- */ --duration-instant: 0ms; --duration-fast: 150ms; /* Quick feedback (button press) */ --duration-normal: 250ms; /* Standard transitions */ --duration-slow: 350ms; /* Complex animations */ --duration-slower: 500ms; /* Page transitions */ /* ------------------------------------------------------------- * Easing Curves * ------------------------------------------------------------- */ --ease-linear: linear; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth, natural */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Accelerate */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Decelerate */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth both */ --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */ /* Reduced motion - respect user preferences */ /* Use: @media (prefers-reduced-motion: reduce) { ... } */ /* ============================================================ * 6. COMPONENT-SPECIFIC TOKENS * ============================================================ * Pre-defined values for common UI components */ /* ------------------------------------------------------------- * Touch & Interaction Targets * WCAG 2.1 requires minimum 44x44px touch targets * ------------------------------------------------------------- */ --touch-target-min: 44px; --touch-target-comfortable: 48px; /* ------------------------------------------------------------- * Input Heights * Consistent form element sizing * ------------------------------------------------------------- */ --input-height-xs: 28px; --input-height-sm: 36px; --input-height-md: 44px; /* Default, meets touch target */ --input-height-lg: 52px; --input-height-xl: 60px; /* ------------------------------------------------------------- * Button Sizes * ------------------------------------------------------------- */ --button-height-sm: 32px; --button-height-md: 40px; --button-height-lg: 48px; --button-padding-sm: var(--space-2) var(--space-3); --button-padding-md: var(--space-2-5) var(--space-4); --button-padding-lg: var(--space-3) var(--space-6); /* ------------------------------------------------------------- * Card Styles * ------------------------------------------------------------- */ --card-padding-sm: var(--space-4); --card-padding: var(--space-6); --card-padding-lg: var(--space-8); --card-radius: var(--radius-lg); --card-shadow: var(--shadow-md); /* ------------------------------------------------------------- * Header & Navigation Heights * ------------------------------------------------------------- */ --header-height: 64px; --header-height-mobile: 56px; --nav-height: 48px; --footer-height: 60px; --sidebar-width: 280px; --sidebar-width-collapsed: 64px; --topbar-height: 56px; --sidebar-bg: var(--surface-primary); --sidebar-border: var(--border-default); /* ------------------------------------------------------------- * Modal Sizes * ------------------------------------------------------------- */ --modal-width-sm: 400px; --modal-width-md: 560px; --modal-width-lg: 720px; --modal-width-xl: 960px; --modal-width-full: calc(100vw - var(--space-8)); /* ------------------------------------------------------------- * Table Styles * ------------------------------------------------------------- */ --table-row-height: 52px; --table-header-height: 48px; --table-cell-padding: var(--space-3) var(--space-4); /* ------------------------------------------------------------- * Avatar Sizes * ------------------------------------------------------------- */ --avatar-xs: 24px; --avatar-sm: 32px; --avatar-md: 40px; --avatar-lg: 56px; --avatar-xl: 80px; /* ------------------------------------------------------------- * Badge & Tag Styles * ------------------------------------------------------------- */ --badge-height: 20px; --badge-padding: var(--space-0-5) var(--space-2); --badge-radius: var(--radius-full); --badge-font-size: var(--text-xs); /* ------------------------------------------------------------- * Icon Sizes * ------------------------------------------------------------- */ --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; /* ============================================================ * 7. ACCESSIBILITY * ============================================================ * Tokens specifically for accessibility features */ /* Focus indicators */ --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring-color: var(--color-primary-600); /* High contrast mode adjustments */ /* Use: @media (prefers-contrast: high) { ... } */ /* Minimum target size for pointer interactions */ --pointer-target-min: 24px; /* ============================================================ * 8. COMPATIBILITY ALIASES * ============================================================ * Maps alternative variable names (used by components.css and * EJS templates) to canonical tokens defined above. * These ensure a single source of truth for all design tokens. */ /* ------------------------------------------------------------- * Text Colors * Mapped to Slate neutral palette * ------------------------------------------------------------- */ --text-primary: var(--color-neutral-900); --text-secondary: var(--color-neutral-600); --text-tertiary: var(--color-neutral-500); --text-disabled: var(--color-neutral-400); --text-on-primary: #FFFFFF; --text-on-dark: #FFFFFF; /* ------------------------------------------------------------- * Surface Addition * ------------------------------------------------------------- */ --surface-tertiary: var(--color-neutral-100); /* ------------------------------------------------------------- * Secondary Color (Professional Blue) * ------------------------------------------------------------- */ --color-secondary: #1976D2; --color-secondary-hover: #1565C0; --color-secondary-active: #0D47A1; /* ------------------------------------------------------------- * Success Active * ------------------------------------------------------------- */ --color-success-active: #166534; /* ------------------------------------------------------------- * Typography Aliases * Maps --font-size-*, --font-weight-*, --line-height-* names * to canonical --text-*, --font-*, --leading-* tokens * ------------------------------------------------------------- */ --font-family-base: var(--font-family-sans); --font-size-xs: var(--text-xs); --font-size-sm: var(--text-sm); --font-size-base: var(--text-base); --font-size-lg: var(--text-lg); --font-size-xl: var(--text-xl); --font-weight-normal: var(--font-normal); --font-weight-medium: var(--font-medium); --font-weight-semibold: var(--font-semibold); --font-weight-bold: var(--font-bold); --line-height-tight: var(--leading-tight); --line-height-normal: var(--leading-normal); --line-height-relaxed: var(--leading-relaxed); /* ------------------------------------------------------------- * Transition Shortcuts * Combine duration + easing into shorthand values * ------------------------------------------------------------- */ --transition-fast: var(--duration-fast) ease; --transition-normal: var(--duration-normal) ease; --transition-slow: var(--duration-slow) ease; /* ------------------------------------------------------------- * Z-Index Additions * Using the 1000-based scale from this file * ------------------------------------------------------------- */ --z-fixed: 1050; --z-modal-backdrop: var(--z-modal); } /* * AUTOMATIC DARK MODE DISABLED * ============================ * Dark mode is available via .dark-mode class only (manual toggle). * Automatic detection via prefers-color-scheme caused issues with * components not fully styled for dark mode. * * To re-enable automatic dark mode in the future, uncomment this block * after ensuring ALL components support dark mode properly. * * @media (prefers-color-scheme: dark) { * :root { * --surface-primary: #1E293B; * --surface-secondary: #0F172A; * ... (see .dark-mode class below for full token list) * } * } */ .dark-mode { --surface-primary: #1E293B; --surface-secondary: #0F172A; --surface-elevated: #334155; --surface-overlay: rgba(0, 0, 0, 0.7); --color-neutral-50: #0F172A; --color-neutral-100: #1E293B; --color-neutral-200: #334155; --color-neutral-300: #475569; --color-neutral-400: #64748B; --color-neutral-500: #94A3B8; --color-neutral-600: #CBD5E1; --color-neutral-700: #E2E8F0; --color-neutral-800: #F1F5F9; --color-neutral-900: #F8FAFC; --border-default: #334155; --border-strong: #475569; --color-primary-50: #2D1A1A; --color-primary-100: #4A2020; --color-primary-light: #4A2020; --color-success-light: #14532D; --color-warning-light: #713F12; --color-error-light: #4A2020; --color-info-light: #0C4A6E; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3); } /* ============================================================ * REDUCED MOTION * ============================================================ * Respect user preferences for reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }