/* The firm's colour, layered over the shared tokens. * * Navigator's default primary is the teal ramp in `tokens.css`, which the * Foundation wears. The firm wears orange. This file is the only difference * between the two palettes: it redeclares the `--nav-color-*` aliases and * nothing else, so every component, every radius, and every neutral stays * exactly as the shared theme defines them. * * It is loaded by `webapp::public_chrome::PublicFooter` on the firm branch — * the one place in the codebase that already knows which brand a page wears — * so a firm page cannot render without it and a Foundation page cannot render * with it. * * The selector is `:root:root` rather than `:root`. Specificity, not source * order, is what makes this win: stylesheets hoisted into by Dioxus * arrive in render order, and a brand layer that depends on arriving last is a * brand layer that silently loses the day something else hoists after it. * * Contrast, measured against `--nav-color-bg` in each scheme: * 500 on white 5.05:1 600 on white 5.82:1 700 on white 6.81:1 * 400 on #0d1117 8.36:1 950 on 400 6.92:1 * Every pairing clears WCAG AA for normal text. The tightest is the 500 stop * at 5.05:1 — more headroom than the teal 500 it replaces, which sits at * 4.89:1. Orange runs out of contrast faster than teal as it lightens, so a * surface needing more should step to 600 and must never lighten 500. */ :root:root { --nav-orange-400: #fb923c; --nav-orange-500: #b35309; --nav-orange-600: #a54b00; --nav-orange-700: #9a3f00; --nav-orange-950: #431407; --nav-orange-subtle: #ffedd5; --nav-color-primary: var(--nav-orange-500); --nav-color-primary-hover: var(--nav-orange-600); --nav-color-primary-active: var(--nav-orange-700); --nav-color-on-primary: #ffffff; --nav-color-on-brand: #ffffff; --nav-color-link: var(--nav-orange-500); --nav-color-link-hover: var(--nav-orange-700); --nav-color-surface-subtle: var(--nav-orange-subtle); } @media (prefers-color-scheme: dark) { :root:root { /* The ramp lightens against the dark ground for the same reason the teal one does: the 500 stop is 1.53:1 on #0d1117, far under the floor, so primary climbs to 400 and its ink drops to 950. */ --nav-color-primary: var(--nav-orange-400); --nav-color-primary-hover: #fdba74; --nav-color-primary-active: #ffd7ae; --nav-color-on-primary: var(--nav-orange-950); --nav-color-on-brand: var(--nav-orange-950); --nav-color-link: var(--nav-orange-400); --nav-color-link-hover: #fdba74; --nav-color-surface-subtle: #3a1d05; } }