/* ================================================================= InCheq Design System - Token Definitions LOCKED DESIGN SYSTEM - Do not modify without brand approval ================================================================= */ :root { /* ============================================================ COLOUR TOKENS - Use ONLY these values ============================================================ */ /* Core Dark Palette */ --ink: #1b1d26; --dark-azure: #1c4553; --dark-teal: #185668; --dark-blue: #2d3d52; --smoke: #3e4d62; /* Neutrals - Light Palette */ --mist: #f5f5f5; --mint: #e3f5ed; --fog: #d6e1e6; --pure-white: #ffffff; /* Brand Accents (restrained use) */ --incheq-blue: #05aeb5; --incheq-green: #128b95; --incheq-aqua: #6cd6dd; --azure: #067984; /* Data Visualization Only */ --risk-critical: #d9574f; --risk-elevated: #f39c12; --risk-optimal: #5fc392; --predictive-purple: #7d77eb; --historical-gray: #95a5a6; /* Functional Colours */ --success: #5fc392; --warning: #f39c12; --error: #d9574f; --info: #6cd6dd; /* ============================================================ 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(27, 29, 38, 0.05); --shadow-md: 0 4px 6px -1px rgba(27, 29, 38, 0.08), 0 2px 4px -1px rgba(27, 29, 38, 0.04); --shadow-lg: 0 10px 15px -3px rgba(27, 29, 38, 0.08), 0 4px 6px -2px rgba(27, 29, 38, 0.04); --shadow-xl: 0 20px 25px -5px rgba(27, 29, 38, 0.08), 0 10px 10px -5px rgba(27, 29, 38, 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; }