/* K3 Ingenieria -- design tokens Source of truth: DESIGN-PLAN.md. Colors are LOCKED brand values -- do not alter. Every other value here is either a locked color, a documented mathematical mix of --navy with white/black, or a measurement pulled directly from the plan's type scale / grid / motion sections. */ :root { /* ---- Color: locked ---- */ --navy: #003a50; /* primary -- all body copy, headlines, links */ --teal: #009faf; /* structural only: rules, ticks, underlines, focus. Never body text color, never a background behind text. */ /* ---- Color: derived neutrals (navy mixed with white/black) ---- */ --paper: #f7f9fa; /* page ground -- navy 3% / white */ --surface: #ffffff; /* panels, cards, form fields */ --rule-soft: #e0e7ea; /* navy 12% / white */ --rule: #c7d4d8; /* navy 22% / white */ --text-secondary: #4d7584; /* navy 70% / white -- 5.01:1 on white */ --text-muted: #8ca6b0; /* navy 45% / white -- decorative/non-essential only, 2.56:1, never carries meaning */ --teal-tint: #d9f1f3; /* teal 15% / white -- for text ON navy backgrounds only */ --navy-deep: #00202c; /* navy 55% / black -- layering surface only */ /* ---- Typography: families (served via Google Fonts CDN , see each page ) ---- */ --font-display: "Archivo", system-ui, sans-serif; --font-body: "Source Serif 4", Georgia, serif; /* ---- Fluid type scale ---- clamp(min, preferred, max), fluid between 400px and 1440px viewports. Line-heights are HARD CONSTRAINTS (see DESIGN-PLAN.md Sec.2): Archivo's tallest accented capital sits 5 units below its ascender, so display line-height must never drop below ~1.10. */ --fs-h1: clamp(2.5rem, 1.73rem + 3.08vw, 4.5rem); /* 40 -> 72px */ --lh-h1: 1.10; --fs-h2: clamp(1.75rem, 1.37rem + 1.54vw, 2.75rem); /* 28 -> 44px */ --lh-h2: 1.15; --fs-h3: clamp(1.25rem, 1.15rem + 0.38vw, 1.5rem); /* 20 -> 24px */ --lh-h3: 1.25; --fs-standfirst: clamp(1.25rem, 1.20rem + 0.19vw, 1.375rem); /* 20 -> 22px */ --lh-standfirst: 1.5; --fs-body: 1.0625rem; /* 17px -- mobile default, see breakpoint override below */ --lh-body: 1.65; --fs-eyebrow: 0.8125rem; /* 13px -- keep label content <=18 characters */ --lh-eyebrow: 1.2; --fs-table: 1rem; /* 16px */ --lh-table: 1.45; --fs-caption: 0.875rem; /* 14px */ --lh-caption: 1.45; /* ---- Measure ---- */ --measure-standfirst: 62ch; --measure-body: 66ch; /* ---- Grid ---- */ --container-max: 1280px; --container-pad: clamp(20px, 5vw, 72px); --grid-cols: 12; --grid-gap: 24px; /* ---- Motion ---- */ --motion-fast: 120ms; /* moment 3: link/nav underline */ --motion-base: 200ms; /* moment 1: panel hover (business-line rows, equipment tiles) */ --motion-panel: 220ms; /* moment 2: mobile nav panel */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* ---- Radius ---- */ --radius: 2px; /* square-cornered system: buttons, inputs, panels all share this */ } /* Body text steps from 17px to 18px at the tablet breakpoint -- a flat step per the plan, not a fluid clamp (the plan specifies two discrete values, not a range). */ @media (min-width: 760px) { :root { --fs-body: 1.125rem; } } /* Below 760px the frame inset is a flat 20px rather than the fluid clamp used at wider viewports (the plan calls this out as its own tier). */ @media (max-width: 759.98px) { :root { --container-pad: 20px; } } /* Grid column count per the plan's three named tiers. */ @media (max-width: 1099.98px) { :root { --grid-cols: 8; } } @media (max-width: 759.98px) { :root { --grid-cols: 1; } }