/** * SIMS Design System — Token File * Single source of truth for all SIMS design tokens. * Load this file FIRST in before any page-specific stylesheets. * * Requirements: 1.1, 1.2, 1.3, 1.6 */ :root { /* ========================================================= Brand Colors ========================================================= */ --c-primary: #044E27; --c-secondary: #ffa202; --c-amber: #FAA31B; --c-blue: #1E73BE; --c-white: #ffffff; --c-black: #000000; /* ========================================================= Neutral Palette ========================================================= */ --c-body-text: #333333; --c-caption: #666666; --c-border: #e0e0e0; --c-bg-light: #f8f9fa; /* ========================================================= Gradients ========================================================= */ --bg-primary: linear-gradient(90deg, #044e27, #056633, #067f3f); --bg-primary-reverse: linear-gradient(90deg, #067f3f, #056633, #044e27); --bg-secondary: linear-gradient(90deg, #ffb732, #ffa202, #ff8800); --bg-gradient: linear-gradient(90deg, #0E7E43, #FAA31B); --bg-gradient-reverse: linear-gradient(90deg, #FAA31B, #0E7E43); /* ========================================================= Typography ========================================================= */ --font-base: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif; /* ========================================================= Fluid Font Scale (vw-based) Designed for desktop viewports; override with mobile scale inside @media (max-width: 992px) blocks in page CSS. ========================================================= */ --f-14: 0.8vw; --f-15: 0.85vw; --f-16: 0.9vw; --f-17: 0.95vw; --f-18: 1vw; --f-20: 1.1vw; --f-22: 1.2vw; --f-24: 1.3vw; --f-28: 1.5vw; --f-30: 1.6vw; --f-32: 1.7vw; --f-34: 1.8vw; --f-36: 1.9vw; --f-38: 2vw; --f-40: 2.1vw; --f-44: 2.3vw; --f-48: 2.5vw; --f-50: 2.6vw; --f-56: 2.9vw; --f-60: 3.1vw; --f-70: 3.7vw; --f-80: 4.2vw; --f-96: 5vw; --f-100: 5.2vw; }