/* ============================================================================= MAGNIFIHIRE — DESIGN TOKENS The single source of truth for colour, type, radius and spacing. The system is LandedUp's rail-and-page app, drawn from the MagnifiHire mock-up: a cream page, white rounded cards in the palette's four tones, a highlighted wordmark, pill controls. There is no decoration: no glows, no gradients, no ornamental shapes. One accent leads; the highlighter (--mark) is the brand's signature. See DESIGN_SYSTEM.md. PALETTE navy #030164 headings, dark surface indigo #363199 the lead accent in light mode (filled actions, links) teal #2D7495 annotation: leading-zero numerals, secondary marks sky #76C0EC the highlighter, and the lead accent in dark mode cream #FFFAE7 the page (a blend of cream #FFF6DC and ivory #FFFDF2) TWO THEMES Light is the default and what screenshots, exports and the marketing site show. Dark is opt-in via the toggle and is stored in localStorage. Neither follows the OS colour-scheme setting, so what a screenshot looks like is never a surprise. The pre-paint script is /theme-boot.js (an external file: the app's Content-Security-Policy forbids inline script). FONTS Open Sans (SIL OFL), self-hosted from /public/fonts as one variable file. Light (300) carries large headlines, bold (700) carries the phrase that matters. It must not be loaded from a CDN: next.config.ts sets font-src 'self' and style-src 'self' 'unsafe-inline', which blocks cross-origin faces outright. Locked by src/lib/design-system.test.ts. ========================================================================== */ /* ---- BRAND FACE (self-hosted): Open Sans, one variable file, weights 300-800 ---- */ @font-face { font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-stretch:100%; font-display:swap; src:url('/fonts/open-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { color-scheme:light; /* ========================================================================= CANONICAL — the palette. Everything else derives from these. ====================================================================== */ --navy:#030164; /* deep navy */ --indigo:#363199; /* indigo: the lead accent, light mode */ --teal:#2D7495; /* teal blue: annotation */ --sky:#76C0EC; /* sky: the highlighter */ --cream:#FAFAF8; /* the page */ /* surfaces */ --bg:#FAFAF8; /* page: soft white, barely warm */ --surface:#FFFFFF; /* inputs, raised areas */ --surface2:#F1F1EE; /* the one step above that */ --line:rgba(3,1,100,.12); /* hairline rules. the workhorse */ --line2:rgba(3,1,100,.24); /* button and input borders */ --track:rgba(3,1,100,.10); /* empty bar / meter track */ /* accent. One leads; in light mode that is indigo, in dark it is sky. */ --accent:#363199; --accent-hi:#2A2680; /* hover: darker in light, lighter in dark */ --accent-ink:#FFFAE7; /* text ON an accent fill */ --accent-soft:rgba(54,49,153,.10); --glow-rgb:54,49,153; /* rgba(var(--glow-rgb),a) for shadows and tints */ --accent-2:#2D7495; /* annotation: numerals, secondary marks */ /* cards: white on the cream page, a soft cream frame */ --card:#FFFFFF; --card-line:rgba(3,1,100,.10); /* the call to action: navy in light, sky in dark */ --cta:#030164; --cta-hi:#14125A; --cta-ink:#FFFFFF; /* tones: the palette as four card and avatar fills, each with its readable ink */ --tone-1:#363199; --tone-1-ink:#FFFFFF; /* indigo */ --tone-2:#2D7495; --tone-2-ink:#FFFFFF; /* teal */ --tone-3:#76C0EC; --tone-3-ink:#030164; /* sky */ --tone-4:#030164; --tone-4-ink:#FFFFFF; /* navy */ /* the highlighter: the brand's one flourish */ --mark:#76C0EC; --mark-ink:#030164; --mast-bg:var(--navy); /* the dashboard masthead band */ --mast-ink:#FFFAE7; --mast-link:var(--sky); /* text */ --text:#14125A; --text2:#2A2878; /* long-form body inside callouts */ --muted:#55538A; --dim:#6A6898; /* fine print, labels */ --ghost:#8F8DB5; /* placeholder text only */ /* type */ --display:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif; /* other */ --ease:cubic-bezier(.2,.7,.1,1); --r:12px; /* inputs. buttons are always a pill */ --r-sm:12px; --r-btn:999px; --r-ctl:10px; --r-card:20px; /* a card */ --r-tile:14px; /* a tile or menu inside a card */ --r-bar:3px; /* bars, tracks, the highlighter swipe */ --r-pill:999px; --gutter:10px; --pad:clamp(28px,5vw,84px); --grain:.05; --grain-blend:multiply; /* ========================================================================= STATUS — semantic only, never decoration, never a chart palette. Each role ships a text step (--*-ink) and a pale wash. Always paired with a label: colour never carries state on its own. ====================================================================== */ --ok:#1E7A4A; --ok-ink:#1E7A4A; --ok-pale:rgba(30,122,74,.12); --warn:#8A5B06; --warn-ink:#8A5B06; --warn-pale:rgba(138,91,6,.12); --risk:#B32744; --risk-ink:#B32744; --risk-pale:rgba(179,39,68,.11); /* ------------------------------------------------------------------------- DATA-VIZ CATEGORICAL SERIES — 7 archetypes, fixed order, never cycled. KNOWN LIMIT: seven hues cannot clear the all-pairs colour-vision gate, so the candidate graph relies on secondary encoding (legend, archetype text, hover) for identity, never hue alone. Not a palette bug; do not re-step. ---------------------------------------------------------------------- */ --series-1:#0A6690; /* Sovereign */ --series-2:#A34E32; /* Founder */ --series-3:#23A084; /* Institutional */ --series-4:#8E6C1C; /* Transformation */ --series-5:#CA7594; /* Listed */ --series-6:#4A7A3C; /* Family */ --series-7:#8070B6; /* Innovation */ --series-1-ink:#0A6690; --series-2-ink:#A34E32; --series-3-ink:#14705C; --series-4-ink:#7A5C18; --series-5-ink:#A04E70; --series-6-ink:#3C6631; --series-7-ink:#574A88; /* ========================================================================= LEGACY ALIASES — DEPRECATED. Do not use in new code. magnifihire.js carries ~2,000 var(--legacy) call sites. Each old name points at its replacement above so every call site follows the theme. ====================================================================== */ --ink:var(--text); --ink-2:var(--accent); --deep:var(--text); --paper:var(--surface); --act:var(--accent); --act-lt:var(--mark); --quiet:var(--dim); --mid:var(--text2); --warm:var(--muted); --hair:var(--line); --hair-dark:var(--line); --ink-deep:var(--bg); --act-deep:var(--accent-hi); --act-pale:var(--accent-soft); --hair-soft:var(--line); --quiet-lt:var(--ghost); --warm-ink:var(--dim); --black:var(--text); --slate:var(--text2); --grey:var(--dim); --grey-light:var(--ghost); --divider:var(--line); --divider-light:var(--line); --off-white:var(--surface); --white:var(--surface); --red:var(--accent); /* was a teal named "red": the brand accent */ --red-lt:var(--dim); --red-bright:var(--mark); --red-pale:var(--accent-soft); --red-deep:var(--risk); /* the only genuinely red role */ --green:var(--ok); --amber:var(--warn); --pale-blue:var(--accent-soft); --pale-green:var(--ok-pale); --pale-amber:var(--warn-pale); --reliyant-navy:var(--text); --reliyant-gold:var(--accent); --gold-bright:var(--mark); --gold-pale:var(--accent-soft); --client-blue:var(--accent-2); /* client portal: teal vs recruiter indigo */ --ink-dark:var(--text); } /* ============================================================================= DARK THEME — the same palette printed on a navy page. Not an inversion. Sky leads; navy text sits on every sky fill. Pairs checked >= 4.5:1. ========================================================================== */ html[data-theme=dark] { color-scheme:dark; --bg:#06053D; --surface:#0C0B52; --surface2:#141270; --line:rgba(244,241,228,.11); --line2:rgba(244,241,228,.21); --track:rgba(244,241,228,.13); --card:#0C0B52; --card-line:rgba(244,241,228,.12); --cta:#76C0EC; --cta-hi:#9AD2F1; --cta-ink:#030164; --tone-4:#141270; --accent:#76C0EC; --accent-hi:#9AD2F1; --accent-ink:#030164; --accent-soft:rgba(118,192,236,.14); --glow-rgb:118,192,236; --accent-2:#6FB4CF; --mark:#76C0EC; --mark-ink:#030164; --mast-bg:#100F72; --mast-ink:#FFFAE7; --mast-link:#76C0EC; --text:#F4F1E4; --text2:#D9D6EA; --muted:#ABA9D2; --dim:#9694C2; --ghost:#6F6DA3; --grain:.04; --grain-blend:screen; --ok:#6FDCA0; --ok-ink:#7BD8A0; --ok-pale:rgba(111,220,160,.14); --warn:#F0C25E; --warn-ink:#F0C25E; --warn-pale:rgba(240,194,94,.14); --risk:#FF93AA; --risk-ink:#FF93AA; --risk-pale:rgba(255,147,170,.14); --series-1:#3FA7D6; --series-2:#D9805F; --series-3:#3CC2A3; --series-4:#C99A2E; --series-5:#E093B4; --series-6:#7DB86A; --series-7:#A292DC; --series-1-ink:#7CC4EA; --series-2-ink:#E8A58C; --series-3-ink:#6FD3B8; --series-4-ink:#DDB75A; --series-5-ink:#E8A3C0; --series-6-ink:#9CCB8A; --series-7-ink:#B9AEE6; } /* ============================================================================= TYPE PRIMITIVES One face, Open Sans. Light for big headlines, bold for the phrase that matters. ========================================================================== */ /* The label idiom: small, bold, wide-tracked, uppercase. Eyebrows, column heads, stat labels, meta rows. Never applied to a sentence. */ .mono { font-family:var(--body); font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; } /* Display type: headings, figures. */ .zk { font-family:var(--display); font-weight:300; letter-spacing:-.02em; } /* Tabular figures for anything that must align down a column. */ .tnum { font-variant-numeric:tabular-nums; } ::selection { background:var(--mark); color:var(--mark-ink); }