/* ============================================================ MORTGAGE PTSD — DESIGN TOKENS (single source of truth) Every page loads this FIRST, before site-1.css and chrome.css. Nothing else may declare a bare `:root` block. Why this file exists -------------------- The full token set used to be declared FIVE times: inline in option-1.html, loan-1.html, morgageloanindex.html and reason-1.html, and again in assets/site-1.css. Each copy carried a comment claiming it mirrored the others. They had already drifted — --shadow-lg was rgba(22,33,62,0.18) in four places and 0.16 in option-1.html — and a two-token change meant five edits in two languages, which is exactly how the drift happened. One declaration, one edit. A page may still override a single token in its own `:root` when it genuinely differs (morgageloanindex.html re-points --navy-card at the navy so its loan panels are solid). Override the one token; never re-declare the block. Load order: tokens.css → site-1.css / specialty.css → chrome.css. chrome.css must stay LAST so it wins on equal specificity. vercel.json serves /assets/**.css as max-age=0, must-revalidate, so this file needs no cache-buster to reach returning visitors — see CACHING.md before changing that. ============================================================ */ :root { /* ---- OPTION 1 LIGHT THEME ---- Names kept as --navy-* so every existing rule keeps working; the values are light surfaces and --light is the dark ink text colour. */ --navy: #ffffff; --navy-deep: #f5f6f7; /* page background, neutral light grey (no blue/pink tint) */ --navy-soft: #edeef0; /* neutral grey surface */ --navy-card: #ffffff; /* cards */ /* ================= THE PALETTE ================= There is exactly ONE navy on this site, ONE pink family and ONE gold. Nothing may introduce a new blue, purple, green or teal. --ink the single navy. Text ink AND every navy surface (tiles, loan panels, calculator, footer, stat cards). --ink-hi the ONLY "raised" surface inside a navy panel. It is white at low alpha, i.e. the same navy, lifted, never a second blue. --accent* the pink ramp — fills, borders, dots, the payment donut (so the chart reads as one hue, not a rainbow), and pink TEXT sitting on a navy panel. --gold star ratings and the playbook pitfall note. The only warm colour on the page. The multi-colour Google "G" in the reviews is a third-party trademark and is deliberately left in Google's own colours. ---- The accent is SPLIT BY SURFACE, not by role ---- The palette was inverted from a dark theme to a white one and the pink came along at its original value. #ff4d8d is 5.07:1 on the navy panels — correct — but only 2.90:1 on the #f5f6f7 page, which fails AA at every size. Darkening the one token would have dulled every fill and pushed the pink-on-navy text the other way. So there are three pinks from the SAME family, split by JOB: --accent #ff4d8d the brand pink. Fills, borders, dots, the payment donut, and pink INK on navy (5.07). --accent-text #c81a58 pink INK on a light surface (5.18 on the page background). #d1215f was the first pick and clears the page background at 4.74, but pink ink lands on pink-WASHED grounds all over this site — the specialty hero glow, the glossary tip box — and those dragged it to 4.0-4.4. #c81a58 holds 4.5 on the strongest wash the site actually uses. SURFACE-AWARE: every navy scope re-points it back at --accent locally, the same way it re-points --light — see .navy-tile / .loan-panel / .footer / .sp-col / .hero-door-text. So `color: var(--accent-text)` is always right: dark pink on white, bright pink on navy. Never write `color: var(--accent)` for text again. --accent-fill #d1215f a pink GROUND that a white label sits on (white on it is 5.13). Same value, NOT the same token: this one must never flip, because a white label needs the dark pink under it no matter which surface the chip is sitting on. A preset chip inside the navy calculator proved the point — it inherited the flipped --accent-text and went back to 3.14. --accent-fill-deep #c81a58 the darker end of that ramp. --cta-fill the primary-button gradient, declared once. It used to be --accent-soft → --accent, where a white label is 2.60 at the top and 3.14 at the bottom. --accent-pale #ffb3d2 already in the ramp; it is also the only pink that survives on a pink-TINTED navy chip. The tint lifts the ground far enough that even --accent lands at 3.8–4.3 there. --gold is split the same way: #e8a020 is 2.05:1 on the light page. Stars are a graphic, so the bar is 3.0 (WCAG 1.4.11), not 4.5 — --gold-text #c07d00 gives 3.14:1 and still reads as gold. Pushing it to a 4.5 value turns it brown. --gold-text flips back to --gold on navy alongside --accent-text. =============================================== */ --ink: #16213e; --ink-hi: rgba(255, 255, 255, 0.07); /* --ink-hi-2 and --ink-line were in both old copies and referenced by neither. Merging the copies made that visible; they are not carried over. A navy panel's inner rule is --line, which the panel already re-points to white-on-navy locally. */ --accent: #ff4d8d; --accent-soft: #ff6fa6; --accent-deep: #f23d7e; --accent-pale: #ffb3d2; --accent-mist: #ffd9ea; --accent-text: #c81a58; /* flips to --accent on navy scopes */ --accent-fill: #d1215f; /* never flips — white labels sit on it */ --accent-fill-deep: #c81a58; --cta-fill: linear-gradient(180deg, var(--accent-fill), var(--accent-fill-deep)); --gold: #e8a020; --gold-text: #c07d00; --light: #16213e; /* primary text = dark navy ink */ --light-dim: rgba(22, 33, 62, 0.80); /* 0.68, not the original 0.55. Navy ink at 0.55 composites to 3.65:1 on the page background — it read fine as white-on-navy in the dark theme and was never re-checked after the flip. 0.68 gives 5.39:1. The .footer scope in chrome.css redefines --light-mute as WHITE on navy at 0.50, which is 4.99:1 and already passes. Different scope, different maths — leave it alone. */ --light-mute: rgba(22, 33, 62, 0.68); --line: rgba(22, 33, 62, 0.12); --line-strong: rgba(22, 33, 62, 0.22); --shadow-lg: 0 24px 55px -26px rgba(22, 33, 62, 0.18); --shadow-card: 0 22px 60px -26px rgba(22, 33, 62, 0.16); --ease: cubic-bezier(0.22, 1, 0.36, 1); --container: 1200px; /* Type system. Every page loads Montserrat + Nunito Sans; the old 'Sora' stack was never linked, so pages using it were silently falling back to system-ui. */ --font-display: 'Montserrat', system-ui, sans-serif; --font-body: 'Nunito Sans', system-ui, sans-serif; }