/* ============================================================ DESTINITO — LEGACY THEME BRIDGE Maps the app's legacy --iig-* variables onto the Destinito design-system tokens, per the PWA styling guide at /design/pwa-styling-guide (Guideline V4, July 2026). HOW IT WORKS theme-destinito.css still ships its original :root block. Every declaration below re-declares the same custom property at the same specificity, so the later (token-backed) value wins. Nothing in theme-destinito.css needs to be edited, and the ~345 call sites that already read var(--iig-*) pick up brand values for free. LOAD ORDER (see Pages/Shared/_LayoutDestinito.cshtml) theme-destinito.css → [brand override] → ds/tokens/*.css → THIS FILE CONTRACT Values only. No selectors, no component rules, no new properties. Deleting the one that pulls this file in reverts the app to the legacy palette exactly — that is the rollback. NOT COVERED (by design — these are markup/rule changes, not values) - Colours hard-coded as hex in .cshtml or in theme-destinito.css rules rather than read from a token. - The gradient at Pages/Directory/Index.cshtml:218, which the guide's kill list wants as a solid fill, not a gradient of any hue. - The §7 focus ring, which is a :focus-visible rule. ============================================================ */ :root { /* ---- Brand core (§1) -------------------------------------------- navy / orange / white are already correct — the flyers were right. The -dark / -light siblings were ad-hoc mixes; they now resolve to real navy tints and orange states. */ --iig-primary: var(--navy); /* #003366 unchanged */ --iig-primary-dark: var(--navy-900); /* #002244 → #002247 */ --iig-primary-light: var(--navy-700); /* #004d99 → #14477a */ --iig-accent: var(--orange); /* #FF7F0E unchanged */ --iig-accent-dark: var(--orange); /* #CC6600 → #FF7F0E — brand call: */ /* orange stays bright in every state */ --iig-accent-light: var(--orange-100); /* #FFB347 → #ffe2c2 */ /* ---- Surfaces (§1, §3) ------------------------------------------ "Grey-blue washed section backgrounds → white, or --navy-050 at most." The two wash levels collapse onto the navy tint ramp. */ --iig-bg: var(--white); /* #FFFFFF unchanged */ --iig-bg-light: var(--navy-050); /* #F5F8FA → #eef2f7 */ --iig-bg-dark: var(--navy-100); /* #E8EEF3 → #dbe3ec */ /* ---- Text (§1, §2) ---------------------------------------------- Consumer body copy is navy, not near-black. -muted and -light both land on --navy-400: it is the only muted-text tint the guide names, and it raises contrast on white from ~2.5:1 to ~3.5:1. */ --iig-text: var(--navy); /* #1A1A2E → #003366 */ --iig-text-muted: var(--navy-400); /* #6B7280 → #6d88a8 */ --iig-text-light: var(--navy-400); /* #9CA3AF → #6d88a8 */ /* ---- Greys → navy tints (§1) ------------------------------------ "Navy tints are the only greys." Mapped by role, preserving the light→dark ordering of the legacy ramp: 050 tinted surface · 100 hairlines · 200 input borders · 400 muted text */ --iig-gray-50: var(--navy-050); /* #FAFBFC → #eef2f7 */ --iig-gray-100: var(--navy-050); /* #F3F4F6 → #eef2f7 */ --iig-gray-200: var(--navy-100); /* #E5E7EB → #dbe3ec */ --iig-gray-300: var(--navy-200); /* #D1D5DB → #b9c7d6 */ --iig-gray-400: var(--navy-400); /* #9CA3AF → #6d88a8 */ --iig-gray-500: var(--navy-400); /* #6B7280 → #6d88a8 */ /* ---- Status (§1) ------------------------------------------------- "Status colours mean status — nothing else." The Tailwind-default triad is replaced by the brand's functional colours. There is no brand "info" hue: navy carries neutral information. */ --iig-success: var(--success); /* #10B981 → #1f8a54 */ --iig-warning: var(--warning); /* #F59E0B → #b8860b */ --iig-error: var(--danger); /* #EF4444 → #c0392b */ --iig-info: var(--navy); /* #3B82F6 → #003366 */ /* ---- Type (§2) --------------------------------------------------- One family. Plus Jakarta Sans leads, Inter stays as the fallback. Weight 800 must be in the layout's Google Fonts request or the guide's display weight synthesises. */ --iig-font: var(--font-sans); /* ---- Radii (§3) -------------------------------------------------- "Radius 12px; large cards 16px; sheets/hero panels 24px." The legacy ramp sat one step small; only -sm actually moves (4px → 6px). */ --iig-radius-sm: var(--radius-xs); /* 4px → 6px */ --iig-radius-md: var(--radius-sm); /* 8px unchanged */ --iig-radius-lg: var(--radius-md); /* 12px unchanged */ --iig-radius-xl: var(--radius-lg); /* 16px unchanged */ --iig-radius-full: var(--radius-pill); /* 9999px → 999px */ /* ---- Elevation (§3) ---------------------------------------------- Navy-based, low alpha. Black shadows read as grey haze over a navy brand; --elev-* are tinted and softer. */ --iig-shadow-sm: var(--elev-1); --iig-shadow-md: var(--elev-2); --iig-shadow-lg: var(--elev-3); /* ---- Spacing — deliberately NOT bridged -------------------------- The legacy scale (0.25/0.5/1/1.5/2/3rem) already equals the base-4 token scale (4/8/16/24/32/48px) at the default root font size, so remapping buys nothing visually. It would, however, convert the app's spacing from rem to px and stop it scaling with the user's browser font-size setting. Left as rem on purpose. */ }