/* WiHire.ai design tokens -- Phase 0a
Additive only. Import FIRST on every re-shelled page, before any other style.
Carries: tokens, base element rules (body, a, focus, scrollbar), and
dark-surface partial scoping (.topbar). Scoped surface rules live HERE,
not in per-page styles.
Companion font URL (must be in each importing page's , before this file):
URL is byte-identical to index.html:66. Do not add weight 400 without also
updating body{font-weight} below. Do not remove 500 without the same.
*/
:root {
/* -- Dark surfaces: topbar, hero bands, footer bg -- */
--navy-deep: #0F1E38; /* deepest dark surface. Also the ONLY navy allowed as CTA text on --gold (6.56:1) */
--navy: #1B3A6B; /* mid-navy for hero bands and dark-band accents. NEVER as CTA text on gold -- 4.45:1 fails AA */
/* -- Text on --canvas -- */
--text-body: #2A3441; /* body copy on cream. Aim for >=7:1 on --canvas */
--text-secondary: #4A5568; /* secondary text on cream. Lightest gray permitted for words */
/* -- Text on dark surfaces -- */
--on-dark: #EAF0F5; /* text on --navy-deep and --navy surfaces (topbar nav, footer). 13.9:1 on --navy-deep */
--muted-dark: #93A6B8; /* secondary text on dark surfaces only */
/* -- Canvas + card -- */
--canvas: #F5F2EC; /* THE canvas cream. Body background on every re-shelled page */
--card: #FFFFFF; /* card surface on --canvas */
--surface-alt: #ECE7DC; /* footer and secondary surfaces, one notch below --canvas */
/* -- CTA + accent -- */
--gold: #D4973A; /* primary CTA and cost display only. CTA text on gold is ALWAYS --navy-deep #0F1E38 (6.56:1). Never --navy #1B3A6B, which measures 4.45:1 and fails AA */
--gold-hover: #D7AD63; /* CTA hover state only. Lighter than --gold so --navy-deep text stays >= 4.5:1 (measured 8.07:1). Equals landing --gold-soft, so future index.html sync inherits it for free. */
--gold-text: #6D4A17; /* dark-gold text on gold-tinted surfaces. Selection cue for gold-family cards and the legal-consent badge. 7.21:1 on rgba(212, 151, 58, .12) over --card, 7.95:1 on --card, 7.12:1 on --canvas. Distinct from --warn -- decorative dark-gold, not warning semantics */
--teal: #0D7377; /* Zeyla, success, links, focus ring. 5.03:1 on --canvas, 5.62:1 on --card, both above 3:1 non-text threshold */
--teal-dark: #0A5A5D; /* link hover only */
--sage: #8FCA9F; /* accent on dark surfaces ONLY -- 8.80:1 on --navy-deep, 1.69:1 on --canvas which is unreadable. Never place sage on cream. */
/* -- Semantic -- */
--danger: #C0392B; /* validation errors, destructive confirms. 4.87:1 on --canvas. NOT for REQUIRED badges or any non-error state */
--warn: #8A5A00; /* warning text and short labels. 5.31:1 on --canvas, 4.87:1 on --warn-surface -- AA pass, not AAA. Label-scale UI only, never body copy */
--warn-surface: #F6E7CD; /* warning band and badge background. Gold family, not Tailwind amber */
--warn-border: #D4973A; /* warning band border. Coincides with --gold by value, not by meaning -- if gold shifts, re-decide this, do not alias. 2.08:1 on --warn-surface, decorative only */
/* -- Borders -- */
--border-strong: #B8BAB5; /* card borders, dividers on cream */
/* -- Scrollbar -- */
--scrollbar-track: #ECE7DC; /* one shade below --canvas for visibility */
/* -- Radii -- */
--radius-sm: 8px;
--radius-md: 12px;
--radius-pill: 999px;
/* -- Type -- */
--font-body: 'Manrope', system-ui, sans-serif; /* 500/600/700/800 loaded */
--font-display: 'Cormorant Garamond', serif; /* headings and display only */
}
body {
font-family: var(--font-body);
font-size: 16px;
font-weight: 500; /* explicit; do not inherit 400. Font URL loads 500/600/700/800 -- 400 would resolve up to 500 anyway, so declare it */
line-height: 1.5;
color: var(--text-body);
background: var(--canvas);
-webkit-font-smoothing: antialiased;
}
a {
color: var(--teal);
}
a:hover {
color: var(--teal-dark);
}
.topbar a, .topbar button {
color: var(--on-dark); /* dark-surface partials own their link color via the partial's class. Global teal measures 2.96:1 on --navy-deep and fails. Component rules like .topbar-actions a are more specific and still win. Teal on --surface-alt is 4.56:1 -- passes, thin margin, keep footer text at label scale or larger */
}
:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
html {
scrollbar-color: var(--border-strong) var(--scrollbar-track); /* thumb, track */
scrollbar-gutter: stable; /* reserve the gutter so layout does not shift when content grows past the fold */
scroll-padding-top: 80px; /* 60px sticky topbar + 20px gap. nextStepStrip is in-flow (not sticky), so no extra allowance */
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 6px;
}