:root{ /* ── Brand: The Annuity Finder (default theme) ───────────────── */ --af-blue:#0953AA; --af-navy:#05346A; --af-navy-dark:#003068; --af-green:#2EC894; --af-green-light:#49D5A6; /* Darkened emeralds, derived for text/fills that must carry contrast. #2EC894 is a graphic colour only — it never carries white text. */ --af-green-700:#0B7A57; --af-green-800:#085C42; /* ── Brand: IFW ──────────────────────────────────────────────── */ --ifw-blue:#0062A9; --ifw-blue-dark:#2F5D92; --ifw-blue-mid:#2176BC; --ifw-mint:#6AC7B4; --ifw-teal:#68C0B0; --ifw-orange:#FF7D11; --ifw-blue-700:#00518C; /* derived: IFW blue dark enough for white text */ --ifw-mint-800:#276A5C; /* derived: mint dark enough for text on white */ --ifw-orange-text:#8A3F00;/* derived: orange dark enough for body text */ /* ── Neutrals ────────────────────────────────────────────────── */ --neutral-0:#FFFFFF; --neutral-50:#FAFAFA; --neutral-100:#F0F0F5; --neutral-200:#E2E6EE; --neutral-300:#C7CEDA; --neutral-400:#9AA5B6; /* non-text only: dividers, disabled borders */ --neutral-500:#5C6B80; /* secondary text, 5.4:1 on white */ --neutral-600:#4A5568; /* 7.2:1 on white */ --neutral-700:#2E3B4E; --neutral-800:#1B2739; --neutral-900:#0B1524; /* ── Status. Never the only signal: always paired with text + icon ── */ --status-success:#0B7A57; --status-success-bg:#E8F6F0; --status-danger:#A3160D; --status-danger-bg:#FCECEA; --status-warning:#8A5300; --status-warning-bg:#FDF3E2; --status-info:#0953AA; --status-info-bg:#EAF1FA; /* ── Semantic aliases (theme-swappable) ──────────────────────── */ --brand:var(--af-blue); --brand-deep:var(--af-navy); --brand-deepest:var(--af-navy-dark); --accent:var(--af-green); --accent-light:var(--af-green-light); --accent-strong:var(--af-green-700); --accent-stronger:var(--af-green-800); --surface:var(--neutral-0); --surface-card:var(--neutral-0); --surface-sunken:var(--neutral-100); --bg-page:var(--neutral-50); --bg-inverse:var(--af-navy-dark); --text-body:var(--neutral-800); --text-strong:var(--neutral-900); --text-secondary:var(--neutral-500); --text-on-brand:var(--neutral-0); --text-on-inverse:var(--neutral-0); --text-inverse-secondary:#C9D8EC; --text-link:var(--af-blue); --text-link-hover:var(--af-navy); --text-eyebrow:var(--accent-strong); --text-eyebrow-inverse:var(--accent-light); --border:var(--neutral-300); --border-strong:var(--neutral-600); --border-field:var(--neutral-600); --action-primary-bg:var(--accent-strong); --action-primary-bg-hover:var(--accent-stronger); --action-primary-text:var(--neutral-0); --action-secondary-bg:var(--neutral-0); --action-secondary-text:var(--brand-deep); --action-secondary-border:var(--brand-deep); --action-tertiary-text:var(--text-link); --action-destructive-bg:var(--status-danger); --action-destructive-text:var(--neutral-0); --focus-ring:var(--af-navy); --focus-ring-inverse:var(--af-green-light); } /* ── IFW theme variant. Same tokens, spacing and type scale. ───── Apply with
or on . Mint or blue is the primary action; orange is emphasis only, never a primary button. */ [data-theme="ifw"]{ --brand:var(--ifw-blue); --brand-deep:var(--ifw-blue-700); --brand-deepest:#003A63; --accent:var(--ifw-mint); --accent-light:#8FD8C9; --accent-strong:var(--ifw-mint-800); --accent-stronger:#1D5148; --bg-inverse:var(--ifw-blue-700); --text-link:#00518C; --text-link-hover:#003A63; --text-eyebrow:var(--ifw-mint-800); --text-eyebrow-inverse:#A6E2D6; --text-inverse-secondary:#CFE4F2; --action-primary-bg:var(--ifw-blue-700); --action-primary-bg-hover:#003A63; --action-secondary-text:var(--ifw-blue-700); --action-secondary-border:var(--ifw-blue-700); --focus-ring:#003A63; --focus-ring-inverse:#A6E2D6; }