/* ========================================================================= LAYER 2 — SEMANTIC ROLES · theme: "navy" ========================================================================= THIS IS THE FILE YOU SWAP TO RESTYLE THE PRODUCT. Every role below answers "what is this colour FOR" — a surface, body text, a border, an amount of money. Components read these and only these. Because nothing downstream knows a hex, replacing this one file with a different set of role→primitive assignments re-skins the entire application, both themes, without touching a component. Structure: :root light mode [data-bs-theme="dark"] dark mode Anything not restated in the dark block inherits from :root, so the dark block lists only what genuinely differs. That is deliberate — a short dark block is a sign the roles are named well. TO ADD A NEW THEME 1. Copy this file to rq-theme-.css. 2. Wrap the two blocks in [data-rq-theme=""] and [data-rq-theme=""][data-bs-theme="dark"]. 3. Reassign roles to different primitives. Add primitives to rq-tokens.css if the palette needs hues we don't have. 4. Set data-rq-theme on . Done — no component touched. TO CHANGE THE BRAND COLOUR Reassign --rq-accent (and its family) here. One edit. RULES · A role's value must be var(--rq-). No hex literals. · Never point a role at another role's *component* usage. · If a component needs a colour no role expresses, add the role here rather than reaching into layer 1 from the component. FILL vs FOREGROUND — the distinction that keeps status colours legible. A status hue used as a BACKGROUND and the same hue used as TEXT cannot be the same value. Green-600 on white is 3.3:1 — correct for a filled badge or a 3px border, and illegal for body text. --rq-success the fill. Use for backgrounds, bars, dots. --rq-success-text the foreground. Use whenever it is a letterform. Reach for -text any time the colour lands on type. The pairs below are measured in the browser, not estimated: pair light dark text on surface 18.9 15.9 sub on surface 6.2 9.9 accent on surface 4.5 7.5 money on surface 4.9 11.8 success-text on surface 5.0 8.3 warning-text on surface 5.0 8.8 danger-text on surface 4.8 5.0 on-accent on accent 4.5 7.8 on-warning on warning 5.9 8.8 money inside .rq-inverse 11.8 11.8 One value sits below 4.5 on purpose: --rq-faint is 3.8 in light mode. It is the de-emphasised tier — placeholders, disabled hints, the third line of a card — and clears the 3.0 large-text threshold. Do not put body copy in it; if a string matters enough to read, it is --rq-sub. Gold is why the money role splits by mode at all: brand gold #e9c98a scores 1.6:1 on white. It is legible on navy and nowhere else, which is also why .rq-inverse re-points the role below. ========================================================================= */ :root { /* ============ SURFACES ============ */ --rq-page: var(--rq-paper-300); /* body background */ --rq-surface: var(--rq-paper-100); /* cards, panels, menus */ --rq-surface-raised: var(--rq-paper-100); /* hover / popover / modal */ --rq-surface-sunken: var(--rq-paper-200); /* wells, table headers */ --rq-muted: var(--rq-navy-50); /* tertiary fills, chips */ /* The inverted decorative panel (editorial hero, dark KPI card). Stays dark in BOTH modes — it is a deliberate inversion, not a surface that follows the theme. */ --rq-inverse: var(--rq-navy-900); --rq-inverse-2: var(--rq-navy-800); --rq-inverse-3: var(--rq-navy-700); --rq-on-inverse: var(--rq-on-dark-92); --rq-on-inverse-sub: var(--rq-on-dark-72); --rq-on-inverse-faint: var(--rq-on-dark-52); /* ============ TEXT ============ */ --rq-text: var(--rq-navy-900); --rq-sub: var(--rq-on-light-66); --rq-faint: var(--rq-on-light-52); --rq-on-accent: var(--rq-paper-100); /* label on an accent fill */ /* Amber is too light to carry white text in either mode (white on amber-600 is 3.0:1, under AA). Warning fills always take dark ink, which is why this role does not flip with the theme. */ --rq-on-warning: var(--rq-navy-900); /* ============ BORDERS ============ */ --rq-border: var(--rq-on-light-08); --rq-border-med: var(--rq-on-light-12); --rq-border-strong: var(--rq-navy-200); /* ============ ACCENT — interactive ============ Links, primary buttons, selection, focus. The one axis a user can act on. Reassign these four to rebrand. */ --rq-accent: var(--rq-blue-500); --rq-accent-hover: var(--rq-blue-600); --rq-accent-mid: var(--rq-blue-200); /* borders on soft fills */ --rq-accent-soft: var(--rq-blue-100); /* tinted backgrounds */ /* ============ MONEY & STATUS — gold ============ Reserved. Amounts, payouts, balances, verified/tier badges. Never a button, never a link, never a general accent. */ --rq-money: var(--rq-gold-700); /* the amount itself */ --rq-money-strong: var(--rq-gold-800); /* emphasised amount */ --rq-money-mid: var(--rq-gold-300); --rq-money-soft: var(--rq-gold-100); /* ============ SEMANTIC STATUS ============ */ --rq-success: var(--rq-green-600); --rq-success-hover: var(--rq-green-700); --rq-success-mid: var(--rq-green-200); --rq-success-soft: var(--rq-green-100); --rq-warning: var(--rq-amber-600); --rq-warning-hover: var(--rq-amber-700); --rq-warning-mid: var(--rq-amber-200); --rq-warning-soft: var(--rq-amber-100); --rq-danger: var(--rq-red-600); --rq-danger-hover: var(--rq-red-700); --rq-danger-mid: var(--rq-red-200); --rq-danger-soft: var(--rq-red-100); --rq-info: var(--rq-cyan-600); --rq-info-hover: var(--rq-cyan-700); --rq-info-mid: var(--rq-cyan-200); --rq-info-soft: var(--rq-cyan-100); /* Foreground variants. The base hues above are tuned to be read as FILLS; on a light surface they land at 3.2–3.3:1, which is correct for a badge background and fails outright for text. These are the same hues stepped dark enough to carry letterforms (5.0:1+). Whenever the colour becomes type, use these. */ --rq-success-text: var(--rq-green-700); --rq-warning-text: var(--rq-amber-700); /* red-700, not red-600. The 600 clears 4.83:1 on plain surface but only 3.95:1 on --rq-danger-soft — and a "voided" chip is precisely the pairing that puts danger text on a danger tint. 700 takes that pairing to 5.30:1 and stays 6.47:1 on surface. */ --rq-danger-text: var(--rq-red-700); --rq-info-text: var(--rq-cyan-700); /* Accent was the one hue in this family with no foreground variant, so a chip tinted --rq-accent-soft had nothing legible to reach for and used --rq-accent itself at 3.89:1. blue-600 gives 5.46:1 on that tint. */ --rq-accent-text: var(--rq-blue-600); /* A saturated danger SURFACE that carries near-white text — the impersonation bar, and anything else that must read as an alert rather than a tint. Deliberately the same value in both themes, and the reason is worth stating: --rq-danger and --rq-danger-hover both step lighter on dark so that fills and hovers stay visible there, which is right for them and wrong here. A red light enough to sit on a dark panel is too light to put white type on. Mirrors the existing --rq-money-strong. */ --rq-danger-strong: var(--rq-red-700); /* ============ AFFINITY ============ A saved / favourited listing. Its own role rather than a reuse of danger, because the two mean opposite things and only look alike. Same value in both themes — the heart is a fixed brand mark. */ --rq-favorite: var(--rq-rose-500); /* ============ ELEVATION ============ Shadow colour is a role because it must darken with the surface. */ --rq-shadow-color: var(--rq-on-light-12); --rq-elev-1: var(--rq-shadow-1) var(--rq-shadow-color); --rq-elev-2: var(--rq-shadow-2) var(--rq-shadow-color); --rq-elev-3: var(--rq-shadow-3) var(--rq-shadow-color); /* ============ FOCUS ============ */ --rq-focus-ring: var(--rq-accent); /* ============ RGB CHANNEL ROLES ============ Same roles, as bare "r,g,b" channels, for the rgba(var(--x), .5) idiom Bootstrap and Modernize rely on. Keep each one pointing at the triplet twin of whatever hex the role above resolves to — the token discipline test checks that these stay paired. */ --rq-accent-rgb: var(--rq-blue-500-rgb); --rq-money-rgb: var(--rq-gold-700-rgb); --rq-success-rgb: var(--rq-green-600-rgb); --rq-warning-rgb: var(--rq-amber-600-rgb); --rq-danger-rgb: var(--rq-red-600-rgb); --rq-info-rgb: var(--rq-cyan-600-rgb); --rq-text-rgb: var(--rq-navy-900-rgb); --rq-surface-rgb: var(--rq-paper-100-rgb); /* ===================================================================== LEGACY ALIASES ~150 views and 11 stylesheets already read these names. They were previously declared on .rq-layout and pointed at Bootstrap; they now point at the roles above and live on :root, which is what finally makes the brand palette exist inside the app rather than only on .editorial-page. Do not use these in new code — they are here so the migration needed no view edits. They can be retired file by file. ===================================================================== */ /* Old accent names (--rq-blue was the accent before it had a role). */ --rq-blue: var(--rq-accent); --rq-blue-hover: var(--rq-accent-hover); --rq-blue-mid: var(--rq-accent-mid); --rq-blue-soft: var(--rq-accent-soft); --rq-blue-2: var(--rq-blue-400); /* Old status short names. */ --rq-green: var(--rq-success); --rq-green-soft: var(--rq-success-soft); --rq-amber: var(--rq-warning); --rq-amber-soft: var(--rq-warning-soft); --rq-red: var(--rq-danger); --rq-red-soft: var(--rq-danger-soft); /* --rq-fg was a typo for --rq-text in several views; keep it resolving. */ --rq-fg: var(--rq-text); /* Editorial names. --rq-navy previously held three different values in three files; it now means one thing: the inverted panel. */ --rq-navy: var(--rq-inverse); --rq-navy-2: var(--rq-inverse-2); --rq-navy-3: var(--rq-inverse-3); --rq-gold: var(--rq-gold-400); --rq-paper: var(--rq-paper-300); --rq-line-d: var(--rq-on-dark-12); --rq-line-l: var(--rq-on-light-12); --rq-sub-d: var(--rq-on-dark-72); --rq-faint-d: var(--rq-on-dark-52); --rq-sub-l: var(--rq-on-light-66); } /* ========================================================================= DARK MODE Only what actually differs. Status hues, the inverse panel, and every non-colour token are inherited from :root above. ========================================================================= */ [data-bs-theme="dark"] { --rq-page: var(--rq-navy-950); --rq-surface: var(--rq-navy-900); --rq-surface-raised: var(--rq-navy-800); --rq-surface-sunken: var(--rq-navy-950); --rq-muted: var(--rq-navy-800); /* The inverse panel must stay distinguishable from a now-dark page, so it steps *up* rather than down. */ --rq-inverse: var(--rq-navy-800); --rq-inverse-2: var(--rq-navy-700); --rq-inverse-3: var(--rq-navy-600); --rq-text: var(--rq-on-dark-92); --rq-sub: var(--rq-on-dark-72); --rq-faint: var(--rq-on-dark-52); --rq-border: var(--rq-on-dark-08); --rq-border-med: var(--rq-on-dark-12); --rq-border-strong: var(--rq-navy-500); /* Accent steps one stop lighter: blue-500 is 4.13:1 on navy-900, under AA. blue-400 is 7.35:1. */ --rq-accent: var(--rq-blue-400); --rq-accent-hover: var(--rq-blue-300); --rq-accent-mid: var(--rq-navy-600); --rq-accent-soft: var(--rq-blue-a14); --rq-on-accent: var(--rq-navy-950); /* Gold finally gets to be brand gold — 11.6:1 on navy-900. This is the pairing the identity was designed for. */ --rq-money: var(--rq-gold-400); --rq-money-strong: var(--rq-gold-300); --rq-money-mid: var(--rq-gold-700); --rq-money-soft: var(--rq-gold-a12); /* Status: light fills invert to translucent tints so they sit on a dark surface without glowing. Foreground hues step lighter. */ --rq-success: var(--rq-green-500); --rq-success-hover: var(--rq-green-600); --rq-success-mid: var(--rq-green-a32); --rq-success-soft: var(--rq-green-a14); --rq-warning: var(--rq-amber-500); --rq-warning-hover: var(--rq-amber-600); --rq-warning-mid: var(--rq-amber-a32); --rq-warning-soft: var(--rq-amber-a14); --rq-danger: var(--rq-red-500); --rq-danger-hover: var(--rq-red-600); --rq-danger-mid: var(--rq-red-a32); --rq-danger-soft: var(--rq-red-a14); --rq-info: var(--rq-cyan-500); --rq-info-hover: var(--rq-cyan-600); --rq-info-mid: var(--rq-cyan-a32); --rq-info-soft: var(--rq-cyan-a14); /* On dark surfaces the 500s already clear 8:1, so the foreground variants are the base hues rather than a darker step — stepping DOWN here would make them harder to read, not easier. */ --rq-success-text: var(--rq-green-500); --rq-warning-text: var(--rq-amber-500); --rq-danger-text: var(--rq-red-500); --rq-info-text: var(--rq-cyan-500); /* Dark needs no darker step for accent either — the 400 already reads at 6.4:1 on --rq-accent-soft, so this matches --rq-accent here. */ --rq-accent-text: var(--rq-blue-400); /* Held at red-700 on dark too — see the light-theme note. This is the one danger step that must NOT lighten. */ --rq-danger-strong: var(--rq-red-700); /* Black shadows vanish on dark surfaces; deepen and lean on the darkest primitive instead. */ --rq-shadow-color: var(--rq-ink-a55); /* RGB channels follow their roles one stop lighter, same as above. */ --rq-accent-rgb: var(--rq-blue-400-rgb); --rq-money-rgb: var(--rq-gold-400-rgb); --rq-success-rgb: var(--rq-green-500-rgb); --rq-warning-rgb: var(--rq-amber-500-rgb); --rq-danger-rgb: var(--rq-red-500-rgb); --rq-info-rgb: var(--rq-cyan-500-rgb); --rq-text-rgb: var(--rq-paper-100-rgb); --rq-surface-rgb: var(--rq-navy-900-rgb); /* Editorial legacy that must flip with the mode. */ --rq-paper: var(--rq-navy-900); }