/* ================================================================= SafeMinds Design System - Token Definitions Brand palette. Changes require brand approval. See safeminds-design-system.md for roles and contrast pairings. ================================================================= */ :root { /* ============================================================ COLOUR TOKENS - Use ONLY these values ============================================================ */ /* SafeMinds brand palette */ --navy: #2d3d52; /* Primary dark. Headings, dark surfaces, footer. */ --ink: #111827; /* Body text. */ --teal: #067984; /* Interactive accent on light. Links, focus ring. */ --oat: #f6f2ea; /* Warm background. Alternating sections, card offset. */ --coral: #ff6469; /* Accent 1. Primary action, active state, numerals. */ --aqua: #6cd6dd; /* Accent 2. Interactive accent on dark only. */ --mint: #e3f5ed; /* Highlight background. Callouts. */ --storm: #7d8696; /* Dividers, hairlines, icon strokes. NOT body text. */ --white: #ffffff; /* Light background. */ /* Channel tokens for alpha tints. Never hardcode the triplet. */ --navy-rgb: 45, 61, 82; --ink-rgb: 17, 24, 39; --coral-rgb: 255, 100, 105; --aqua-rgb: 108, 214, 221; --teal-rgb: 6, 121, 132; --white-rgb: 255, 255, 255; /* Secondary text. Not a brand colour, but the only secondary value that clears WCAG AA (8.6:1 on white). Storm fails at 3.67:1. */ --smoke: #3e4d62; /* Legacy aliases. Retained so existing var() references resolve. Do not use in new code. */ --dark-blue: var(--navy); --dark-azure: var(--navy); --dark-teal: var(--teal); --pure-white: var(--white); --azure: var(--teal); --incheq-blue: var(--teal); --incheq-green: var(--teal); --incheq-aqua: var(--aqua); --mist: var(--oat); --fog: #e4ddd0; /* Warm hairline / offset, pairs with oat. */ /* Data Visualization Only. risk-critical is deliberately deeper than --coral so a primary CTA never reads as a critical-risk indicator on a dashboard. */ --risk-critical: #b3322a; --risk-elevated: #f39c12; --risk-optimal: #5fc392; --predictive-purple: #7d77eb; --historical-gray: #95a5a6; /* Functional Colours */ --success: #5fc392; --warning: #f39c12; --error: #b3322a; --info: var(--aqua); /* ============================================================ TYPOGRAPHY TOKENS ============================================================ */ /* Font Families */ --font-heading: Georgia, "Times New Roman", serif; --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Font Weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Font Sizes - Fixed (for body text and small elements) */ --text-xs: 0.875rem; /* 14px */ --text-sm: 0.9375rem; /* 15px */ --text-base: 1rem; /* 16px - minimum */ --text-lg: 1.125rem; /* 18px - lead paragraphs */ /* Font Sizes - Fluid (for headings, scales with viewport) */ --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 18px → 20px */ --text-2xl: clamp(1.25rem, 1rem + 1vw, 1.5rem); /* 20px → 24px */ --text-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem); /* 24px → 30px */ --text-4xl: clamp(1.75rem, 1.5rem + 1.5vw, 2.25rem); /* 28px → 36px */ --text-5xl: clamp(2rem, 1.5rem + 2.5vw, 3rem); /* 32px → 48px */ --text-6xl: clamp(2.5rem, 2rem + 3vw, 3.75rem); /* 40px → 60px */ /* Line Heights */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.75; /* ============================================================ SPACING SCALE ============================================================ */ /* Fixed spacing tokens (for precise control) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ /* Fluid spacing tokens (scales proportionally with viewport) */ --space-fluid-xs: clamp(0.5rem, 1vw, 0.75rem); /* 8px → 12px */ --space-fluid-sm: clamp(0.75rem, 2vw, 1.5rem); /* 12px → 24px */ --space-fluid-md: clamp(1rem, 3vw, 2rem); /* 16px → 32px */ --space-fluid-lg: clamp(1.5rem, 4vw, 3rem); /* 24px → 48px */ --space-fluid-xl: clamp(2rem, 6vw, 4rem); /* 32px → 64px */ --space-fluid-2xl: clamp(3rem, 8vw, 6rem); /* 48px → 96px */ /* ============================================================ BORDER RADIUS ============================================================ */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px - maximum for enterprise */ --radius-lg: 0.5rem; /* 8px */ /* ============================================================ SHADOWS ============================================================ */ --shadow-sm: 0 1px 2px 0 rgba(var(--navy-rgb), 0.05); --shadow-md: 0 4px 6px -1px rgba(var(--navy-rgb), 0.08), 0 2px 4px -1px rgba(var(--navy-rgb), 0.04); --shadow-lg: 0 10px 15px -3px rgba(var(--navy-rgb), 0.08), 0 4px 6px -2px rgba(var(--navy-rgb), 0.04); --shadow-xl: 0 20px 25px -5px rgba(var(--navy-rgb), 0.08), 0 10px 10px -5px rgba(var(--navy-rgb), 0.04); /* ============================================================ CONTAINER & LAYOUT ============================================================ */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* Fixed section padding (legacy, for precise control) */ --section-padding-xs: var(--space-8); /* 32px - Tight sections */ --section-padding-sm: var(--space-12); /* 48px - Compact */ --section-padding-md: var(--space-16); /* 64px - Standard */ --section-padding-lg: var(--space-20); /* 80px - Emphasis */ --section-padding-xl: var(--space-24); /* 96px - Hero / Major */ /* Fluid section padding (scales with viewport) */ --section-padding-fluid-compact: clamp(2rem, 5vh, 3rem); /* 32px → 48px */ --section-padding-fluid-normal: clamp(3rem, 8vh, 4rem); /* 48px → 64px */ --section-padding-fluid-spacious: clamp(4rem, 10vh, 6rem); /* 64px → 96px */ --section-padding-fluid-hero: clamp(4rem, 12vh, 8rem); /* 64px → 128px */ /* ============================================================ BREAKPOINTS (for reference in media queries) ============================================================ */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* ============================================================ TRANSITIONS ============================================================ */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* ============================================================ Z-INDEX LAYERS ============================================================ */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-fixed: 1200; --z-modal-backdrop: 1300; --z-modal: 1400; --z-popover: 1500; --z-tooltip: 1600; }