/* ============================================================================ ReadyAED Design System — Tokens Single source of truth. Every value in the product comes from here. Do not hard-code hex values, px sizes, or radii in components. ---------------------------------------------------------------------------- LIGHT ONLY. There is no dark theme and no [data-theme] attribute. Every surface — app, marketing, and email — is light. To add dark later, add one block that redefines the section-3 semantic tokens; components only read semantic tokens and will not need to change. ---------------------------------------------------------------------------- Brand anchors (taken from the ReadyAED logo, do not change): Navy #021C52 - trust, structure, primary action Red #E7071E - brand mark + critical / emergency Slate #414551 - wordmark tagline, secondary voice ============================================================================ */ :root { /* Tell the browser to render built-in controls light, and stop it from inverting the page when the operating system prefers dark. */ color-scheme: light; /* -------------------------------------------------------------------------- 1. RAW PALETTE Reference ramps. Components should prefer the semantic tokens in section 3. -------------------------------------------------------------------------- */ /* Navy — the structural brand color */ --navy-50: #F0F4FC; --navy-100: #DEE7F8; --navy-200: #BCCFF0; --navy-300: #8FAEE4; --navy-400: #5B84D3; --navy-500: #2F5CB8; --navy-600: #1B4193; --navy-700: #0E3075; --navy-800: #07255F; --navy-900: #021C52; /* brand */ --navy-950: #010E2E; /* Signal Red — brand mark, critical states. Use sparingly. */ --red-50: #FEF2F3; --red-100: #FDE1E4; --red-200: #FBC3C9; --red-300: #F7939E; --red-400: #F2586A; --red-500: #E92338; --red-600: #E7071E; /* brand */ --red-700: #C00518; /* accessible text red */ --red-800: #970312; --red-900: #6E020D; --red-950: #450108; /* Slate — neutral UI. Cool gray, tuned to the wordmark gray #414551. */ --slate-0: #FFFFFF; --slate-50: #F7F8FA; --slate-100: #EEF0F4; --slate-200: #DFE3EA; --slate-300: #C6CCD8; --slate-400: #9AA2B4; --slate-500: #6E778C; /* 4.05:1 — large text & non-essential only */ --slate-600: #4E566B; /* 6.8:1 — secondary text */ --slate-700: #3A4152; --slate-800: #272D3B; --slate-900: #181C27; --slate-950: #0C0F16; /* Success / Ready */ --green-50: #E9F7EF; --green-100: #CDEEDC; --green-200: #9BDCBA; --green-500: #16A05C; --green-600: #0F7A46; /* 4.9:1 on white */ --green-700: #0A5C34; --green-900: #063A21; /* Warning / Attention */ --amber-50: #FFF7E6; --amber-100: #FDEBC2; --amber-400: #F0A81C; --amber-500: #D98A0B; --amber-700: #B45309; --amber-800: #92400E; /* accessible text amber */ --amber-900: #5C2A08; /* Informational (uses navy ramp, declared for semantic symmetry) */ --info-50: var(--navy-50); --info-600: var(--navy-600); --info-700: var(--navy-700); /* Focus */ --focus-ring-color: #2F5CB8; /* -------------------------------------------------------------------------- 2. DATA-VIZ PALETTE Categorical series for charts. Ordered for maximum separation. Always pair with a legend + direct labels; never color-only. -------------------------------------------------------------------------- */ --viz-1: #021C52; --viz-2: #E7071E; --viz-3: #0F7A46; --viz-4: #B45309; --viz-5: #5B84D3; --viz-6: #6E778C; /* Sequential ramp for intensity: heatmaps, utilisation, coverage. Runs low to high; always include a scale legend with the numeric bounds. */ --viz-seq-1: var(--navy-100); --viz-seq-2: var(--navy-300); --viz-seq-3: var(--navy-500); --viz-seq-4: var(--navy-700); --viz-seq-5: var(--navy-900); /* -------------------------------------------------------------------------- 3. SEMANTIC COLOR TOKENS (light theme — default) -------------------------------------------------------------------------- */ --color-bg: var(--slate-50); --color-bg-sunken: var(--slate-100); --color-surface: var(--slate-0); --color-surface-raised: var(--slate-0); --color-surface-subtle: var(--slate-50); --color-border: var(--slate-200); --color-border-strong: var(--slate-300); --color-border-inverse: rgba(255, 255, 255, 0.16); --color-text: var(--slate-900); --color-text-secondary: var(--slate-600); --color-text-muted: var(--slate-500); /* large text only */ --color-text-inverse: var(--slate-0); --color-text-inverse-dim: rgba(255, 255, 255, 0.72); --color-brand: var(--navy-900); --color-brand-strong: var(--navy-950); --color-brand-soft: var(--navy-50); /* Brand surface = large navy areas (hero, tagline panels, email headers) */ --color-brand-surface: var(--navy-900); --color-brand-surface-text: var(--slate-0); --color-brand-surface-dim: rgba(255, 255, 255, 0.72); --color-brand-surface-border: var(--navy-800); --color-accent: var(--red-600); --color-accent-strong: var(--red-700); --color-accent-soft: var(--red-50); /* Action (buttons, links). navy = default action so red keeps its meaning. */ --color-action: var(--navy-900); --color-action-hover: var(--navy-800); --color-action-active: var(--navy-950); --color-action-text: var(--slate-0); --color-link: var(--navy-700); --color-link-hover: var(--red-700); /* Destructive action surface. Separate from --color-critical so that a solid red button always keeps AA contrast with white in both themes. */ --color-danger-bg: var(--red-600); --color-danger-bg-hover: var(--red-700); --color-danger-text: var(--slate-0); /* Status — always accompanied by an icon and a text label, never color alone */ --color-ready: var(--green-600); --color-ready-text: var(--green-700); --color-ready-bg: var(--green-50); --color-ready-border: var(--green-200); --color-attention: var(--amber-700); --color-attention-text: var(--amber-800); --color-attention-bg: var(--amber-50); --color-attention-border: var(--amber-100); --color-critical: var(--red-600); --color-critical-text: var(--red-700); --color-critical-bg: var(--red-50); --color-critical-border: var(--red-200); --color-offline: var(--slate-500); --color-offline-text: var(--slate-600); --color-offline-bg: var(--slate-100); --color-offline-border: var(--slate-300); --color-info: var(--navy-600); --color-info-text: var(--navy-700); --color-info-bg: var(--navy-50); --color-info-border: var(--navy-200); /* Categorical tints — pastel chip and tinted-card surfaces for labels, categories, and people. These are NOT status colours: status always uses the four status tokens above, with an icon and a word. */ --tint-gray: var(--slate-100); --tint-gray-text: var(--slate-700); --tint-blue: var(--navy-100); --tint-blue-text: var(--navy-800); --tint-green: var(--green-100); --tint-green-text: var(--green-900); --tint-amber: var(--amber-100); --tint-amber-text: var(--amber-900); --tint-red: var(--red-100); --tint-red-text: var(--red-900); --tint-purple: #E9E3FB; --tint-purple-text: #3B2A6B; --tint-teal: #D3EFEE; --tint-teal-text: #0B4A48; --tint-orange: #FDE7D2; --tint-orange-text: #7A3A08; --color-text-on-tint: var(--tint-gray-text); /* -------------------------------------------------------------------------- 4. TYPOGRAPHY Public Sans is the workhorse (civic trust, high legibility). IBM Plex Mono marks machine data (serials, dates, counts) so the eye can tell "human sentence" from "system value". Source Serif is an editorial accent for long-form policy / knowledge pages. -------------------------------------------------------------------------- */ --font-sans: "Public Sans", "Noto Sans", "Noto Sans Devanagari", "Noto Sans JP", "Noto Sans KR", "Noto Sans Thai", "Noto Sans Arabic", "Noto Sans Hebrew", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; /* Type scale. root = 16px. Body text defaults to 17px, not 16px: a large share of facility and safety staff are 40+. */ --text-xs: 0.75rem; /* 12px — legal, timestamps in dense tables only */ --text-sm: 0.875rem; /* 14px — captions, helper text */ --text-base: 1rem; /* 16px — absolute floor for body copy */ --text-md: 1.0625rem; /* 17px — default body */ --text-lg: 1.1875rem; /* 19px — lead paragraphs */ --text-xl: 1.375rem; /* 22px — card titles */ --text-2xl: 1.75rem; /* 28px — section headings */ --text-3xl: 2.25rem; /* 36px — page headings */ --text-4xl: 2.875rem; /* 46px — marketing display */ --text-5xl: 3.75rem; /* 60px — hero display */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; /* default body reading */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* -------------------------------------------------------------------------- 5. SPACE — 4px base unit -------------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* -------------------------------------------------------------------------- 6. RADIUS — precise, not pill-happy. Pills are reserved for status. -------------------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 999px; /* -------------------------------------------------------------------------- 7. ELEVATION — borders do the work; shadows are for true overlays only -------------------------------------------------------------------------- */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(12, 15, 22, 0.06); --shadow-sm: 0 1px 3px rgba(12, 15, 22, 0.08), 0 1px 2px rgba(12, 15, 22, 0.04); --shadow-md: 0 4px 12px rgba(12, 15, 22, 0.10), 0 2px 4px rgba(12, 15, 22, 0.06); --shadow-lg: 0 12px 32px rgba(12, 15, 22, 0.14), 0 4px 8px rgba(12, 15, 22, 0.06); --shadow-focus: 0 0 0 3px rgba(47, 92, 184, 0.35); /* -------------------------------------------------------------------------- 8. BORDER WIDTHS -------------------------------------------------------------------------- */ --border-thin: 1px; --border-thick: 2px; --border-accent: 3px; /* -------------------------------------------------------------------------- 9. LAYOUT -------------------------------------------------------------------------- */ --container-sm: 640px; --container-md: 820px; --container-lg: 1080px; --container-xl: 1240px; --container-max: 1400px; --gutter: var(--space-6); --page-margin: var(--space-5); --content-reading: 68ch; /* max measure for prose */ /* -------------------------------------------------------------------------- 10. MOTION — short, calm, never decorative -------------------------------------------------------------------------- */ --duration-instant: 80ms; --duration-fast: 140ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0, 1); --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); /* -------------------------------------------------------------------------- 11. Z-INDEX -------------------------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* -------------------------------------------------------------------------- 12. FIELD / ACCESSIBILITY Tuned for a 40+ audience and for use during an emergency. -------------------------------------------------------------------------- */ --tap-target-min: 44px; /* iOS minimum */ --control-height-sm: 36px; --control-height-md: 44px; --control-height-lg: 52px; }