/* ============================================================================ DocOrder — house theme (single source of truth) ---------------------------------------------------------------------------- The canonical palette is the landing page (loan_engine/pricing): warm cream grounds, deep FOREST-GREEN "dark", antique gold, and USD money-greens. This file is the ONE place colors + fonts are defined. Every page links it (/theme.css) and should NOT redeclare its own :root palette. Because pages historically used several different token NAMES for the same concept, this file also defines ALIASES (e.g. --f-serif, --panel, --teal, --navy-as-green) so existing var() references resolve to the house palette without rewriting every rule. Per-lender skins override these tokens at RUNTIME via document.documentElement.style.setProperty('--token', value) — see the branding apply layer. Everything here is just the default DocOrder look. Light (default) = cream + forest-green. Dark = deep forest-green. Toggle dark by stamping data-theme="dark" on . ========================================================================== */ :root{ /* ── Warm cream grounds + green-biased ink (from the landing) ── */ --bg:#f6efdf; --surface:#fffdf6; --surface2:#efe6d1; --ink:#16221b; --ink2:#3e4a41; --ink3:#7a8378; --ink4:#aab0a2; /* ── Antique gold accent ── */ --gold:#93701a; --gold2:#b8933a; --gold-lt:#c8a24a; --gold-bg:#f4ecd9; --gold-brd:#e0cfa0; /* ── Deep forest green = the brand "dark". Kept as --navy so pages that used --navy (some as literal navy-blue) re-skin to the house green. ── */ --navy:#071c14; --navy2:#0c281d; --navy3:#123528; --sage:#4a6b57; /* ── USD money greens (positive cash-flow / success) ── */ --grn:#1f7a4d; --grn-bg:#e5f0e8; --money:#1f7a4d; --money2:#2fa06a; --money-bg:#e6f2ea; /* ── Secondary semantic accents ── */ --blue:#3a6ea5; --blue-bg:#e8eef5; --red:#8b1c1c; --red-bg:#f4e6e4; --orange:#b5771a; --orange-bg:#f6ecd8; --yellow:#9a7d10; --yellow-bg:#f4eecf; /* ── Borders + shadows ── */ --brd:#e3d8bf; --brd2:#d3c7a7; --brd3:#c3b48f; --shadow:0 24px 60px rgba(13,42,32,.16); --shadow-sm:0 8px 24px rgba(13,42,32,.09); /* ── Type ── */ --serif:'Cormorant Garamond',Georgia,serif; --sans:'DM Sans',system-ui,-apple-system,sans-serif; --mono:'DM Mono',ui-monospace,monospace; /* ───────────────────────────────────────────────────────────────────────── ALIASES — map the other pages' token names onto the house palette so their existing var() references keep working. Remove a page's local :root and these take over. ───────────────────────────────────────────────────────────────────────── */ /* font-name variants */ --f-serif:var(--serif); --f-sans:var(--sans); --f-mono:var(--mono); --f-disp:var(--serif); /* background-name variants (admin --bg2..4, dashboards --panel, ui --paper) */ --bg2:var(--surface); --bg3:var(--surface2); --bg4:var(--surface2); --panel:var(--surface); --panel2:var(--surface2); --paper:var(--bg); --paper2:var(--surface); --paper3:var(--surface2); --card:var(--surface); /* ink variants */ --ink-hi:var(--ink); /* accent variants: teal → money-green, amber/brand → gold */ --teal:var(--money); --teal-bg:var(--money-bg); --amber:var(--gold); --amber-bg:var(--gold-bg); --brand:var(--gold); --grn2:var(--money2); --gold-hi:var(--gold2); --blue-brd:var(--blue); --line:var(--brd); --muted:var(--ink3); --teal-lt:var(--money2); --sh:var(--shadow-sm); } /* ── Dark = deep forest green (the "deep dark green as per the landing"). ── */ :root[data-theme="dark"]{ --bg:#071c14; --surface:#0c281d; --surface2:#123528; --ink:#f0ede8; --ink2:#cdd6cd; --ink3:#8fa596; --ink4:#5c7266; --gold:#c8a24a; --gold2:#d8b968; --gold-lt:#d8b968; --gold-bg:rgba(200,162,74,.10); --gold-brd:rgba(200,162,74,.28); --grn:#2fa06a; --grn-bg:rgba(47,160,106,.12); --money:#2fa06a; --money2:#48c286; --money-bg:rgba(47,160,106,.12); --blue:#5b9bd5; --blue-bg:rgba(91,155,213,.12); --red:#e07a72; --red-bg:rgba(224,122,114,.12); --orange:#e0a24a; --orange-bg:rgba(224,162,74,.12); --yellow:#d8bf5a; --yellow-bg:rgba(216,191,90,.12); --brd:rgba(240,237,232,.10); --brd2:rgba(240,237,232,.17); --brd3:rgba(240,237,232,.26); --shadow:0 24px 60px rgba(0,0,0,.45); --shadow-sm:0 8px 24px rgba(0,0,0,.3); }