/* ============================================================================
TradeWorth — brand.css
The single source of truth for brand colour, type and shared primitives.
WHY this file exists: brand values used to be duplicated in public/style.css
(the logged-in app) and public/site/site.css (the marketing site), plus ~60
hardcoded hex literals across the HTML. Two copies drift. This file is the
only place a brand value is authored; both stylesheets @import it and every
page reads tokens through var().
HOW TO CONSUME
From a stylesheet: @import url('/brand.css'); <- must be the 1st line
From an HTML page:
(after)
Ordering matters: brand.css must load FIRST so page/app CSS can override its
primitives, and so any :root re-declaration downstream wins on purpose.
==========================================================================*/
/* Self-hosted Oswald + Inter. Must precede all rules (CSS @import ordering).
Self-hosted because the CSP in middleware/securityHeaders.js is
`font-src 'self' data:` — a Google Fonts would be blocked. */
@import url('/fonts/fonts.css');
:root {
/* ==========================================================================
1. RAW BRAND PALETTE — the only authored colours in the product.
========================================================================*/
--navy: #0F1E2E; /* primary dark: nav, footers, headings, body text */
--orange: #F97316; /* Trade Orange: CTAs, "WORTH", accents, active state */
--steel: #5B6573; /* secondary/muted text (4.9:1 on white — body OK, not tiny) */
--light: #F1F3F5; /* light surface fill, card backs, dividers */
--white: #FFFFFF;
/* --- Navy ramp (derived): lighter as the number drops -------------------- */
--navy-900: #0A1520; /* deepest — footer base, pressed dark buttons */
--navy-800: #16293C; /* raised navy — hover on navy fills, cards on dark */
--navy-700: #23374B; /* borders / hairlines on dark surfaces */
--navy-600: #33485E; /* dividers on dark, disabled dark-surface text */
/* --- Steel ramp (derived) ------------------------------------------------ */
--steel-600: #4A535F; /* slightly darker muted text */
--steel-400: #8A929D; /* placeholders, muted text ON dark backgrounds */
--steel-200: #C3C8CF; /* strong border on light (inputs, outlined buttons) */
--steel-100: #E3E6EA; /* default hairline border on light */
/* --- Light ramp (derived) ------------------------------------------------ */
--light-100: #F8F9FA; /* faintest tint — page background, zebra rows */
/* --- Orange ramp (derived) ----------------------------------------------- */
--orange-600: #EA6407; /* button hover fill */
--orange-700: #C2540B; /* "ink" orange — 4.6:1 on white, the ONLY orange
safe for small text / links on a light bg */
--orange-300: #FDBA74; /* soft borders, focus rings on light */
--orange-soft: #FFF1E6; /* subtle tinted fill: active nav, orange badges */
--orange-ink: var(--orange-700); /* readable-orange alias, use for links */
/* CONTRAST RULE (not optional): --orange on --white is ~2.9:1 and FAILS AA
for normal body copy. Use --orange for 24px+ bold display type, button
FILLS (white on orange is fine), icons and rules. For orange text on a
light background use --orange-ink. */
/* ==========================================================================
2. SEMANTIC ALIASES — what pages should reach for first.
========================================================================*/
--bg: var(--light-100); /* default page background */
--surface: var(--white); /* cards, panels, table bodies */
--surface-alt: var(--light); /* recessed fill: table heads, wells */
--text: var(--navy); /* ~15:1 on white — the workhorse */
--text-muted: var(--steel); /* secondary copy, labels, timestamps */
--text-on-dark: var(--white);
--text-muted-dark: var(--steel-400); /* muted copy ON navy */
--border: var(--steel-100);
--border-strong: var(--steel-200);
--border-dark: var(--navy-700); /* hairlines on navy surfaces */
--accent: var(--orange);
--accent-hover: var(--orange-600);
--accent-contrast: var(--white); /* text colour that sits ON --accent */
--header-bg: var(--white); /* marketing + app top bar */
--footer-bg: var(--navy);
--focus-ring: 0 0 0 3px rgba(249,115,22,.35); /* orange focus halo */
/* ==========================================================================
3. TYPOGRAPHY
========================================================================*/
--font-heading: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--fs-xs: 12px; /* badges, table meta */
--fs-sm: 13px; /* labels, secondary copy */
--fs-base: 15px; /* app body */
--fs-md: 17px; /* marketing body / lead-in */
--fs-lg: 20px; /* h4 / card titles */
--fs-xl: 26px; /* h3 */
--fs-2xl: 34px; /* h2 */
--fs-3xl: 46px; /* h1 */
--fs-hero: clamp(34px, 5.2vw, 56px); /* marketing hero only — fluid */
--lh-tight: 1.08; /* Oswald headings; the face already sits tall */
--lh-snug: 1.35; /* sub-heads, multi-line buttons */
--lh-body: 1.6; /* Inter paragraphs */
--ls-tight: -0.01em; /* Oswald caps want negative tracking */
--ls-wide: 0.14em; /* .eyebrow / KNOW YOUR WORTH lockup */
/* ==========================================================================
4. SHAPE, DEPTH, SPACE
========================================================================*/
--radius: 10px; /* app default (matches the old app value) */
--radius-sm: 8px;
--radius-lg: 14px; /* marketing cards (matches the old site value) */
--radius-pill: 999px;
/* Shadows are navy-tinted rather than neutral black so elevation reads as
part of the palette instead of a grey wash. */
--shadow: 0 1px 3px rgba(15,30,46,.10), 0 1px 2px rgba(15,30,46,.06);
--shadow-lg: 0 20px 45px -20px rgba(15,30,46,.30), 0 8px 20px -12px rgba(15,30,46,.16);
--shadow-accent: 0 6px 16px -6px rgba(249,115,22,.55); /* lift under orange CTAs */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--maxw: 1120px; /* marketing container width */
/* ==========================================================================
5. STATUS COLOURS — deliberately OUTSIDE the brand ramp.
Status must stay legible as status: a "completed" badge turning orange
would be a regression. These keep the app's existing green/red semantics.
========================================================================*/
--success: #16A34A;
--success-bg: #E6F6EC;
--success-ink: #1A7F43;
--danger: #C0392B;
--danger-bg: #FDEAEA;
--danger-ink: #C0392B;
--danger-border: #F0C4C0;
--warn: #D97706;
--warn-bg: #FEF3C7;
--warn-ink: #92400E;
--info: #1A5FB4;
--info-bg: #E8F0FE;
--info-ink: #1A5FB4;
/* ==========================================================================
6. BACKWARD-COMPATIBILITY ALIASES
public/style.css, public/site/site.css and dozens of inline page styles
still reference these legacy names. Mapping them here means the entire UI
shifts to the brand palette the moment brand.css loads — including pages
nobody has migrated yet. Do not add new usages; prefer the semantic names
above. Delete an alias only once `grep -r 'var(--name'` in public/ is empty.
NOTE: the legacy grey ramp is rebuilt out of Navy / Steel / Light Gray, so
"grey" is now brand-tinted, never neutral.
========================================================================*/
--orange-dark: var(--orange-700); /* was #d96e10; used as link + active-nav TEXT,
so it maps to the AA-safe ink orange */
/* --orange -> redefined above as #F97316 (was #f6841f) */
/* --orange-soft -> redefined above as #FFF1E6 (was #fff1e3) */
/* --white -> #FFFFFF, unchanged */
--grey-50: var(--light-100); /* was #f7f8fa — page bg */
--grey-100: var(--light); /* was #eef0f3 — hover fills, grey badge bg */
--grey-200: var(--steel-100); /* was #e2e5ea — hairline borders */
--grey-300: var(--steel-200); /* was #cbd0d8 — input/outline borders */
--grey-500: var(--steel); /* was #7c848f — muted text */
--grey-600: var(--steel-600); /* was implicit — column labels */
--grey-700: #3A4553; /* was #454b54 — nav links, strong secondary text */
--grey-800: #1B2E42; /* was implicit — emphasised figures */
--grey-900: var(--navy); /* was #1f2329 — primary text, dark footer */
--muted: var(--steel); /* site pages use var(--muted, #6b7280) */
--line: var(--border); /* site pages use var(--line, #e5e7eb) */
--green: var(--success); /* usage.html / document.html inline styles */
--red: var(--danger);
/* --shadow, --shadow-lg, --radius, --maxw, --accent -> redefined above */
}
/* ============================================================================
BRAND PRIMITIVES
Shared building blocks so four agents don't invent four wordmarks. Every
page and both stylesheets may rely on these class names.
==========================================================================*/
/* --- base type ------------------------------------------------------------ */
/* Inter for everything that is read as prose. */
body { font-family: var(--font-body); }
/* Oswald, all caps, tight tracking — the brand's heading voice. */
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
color: var(--text);
margin: 0 0 .5em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: 500; letter-spacing: 0; }
/* Escape hatch: sentence-case a heading that carries user data (a customer
name, a job title) where SHOUTING would mangle it. */
.normal-case { text-transform: none; letter-spacing: 0; }
/* --- wordmark ------------------------------------------------------------- */
/* .brand-lockup — badge + wordmark on one baseline. Use as the in a nav. */
.brand-lockup {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
white-space: nowrap;
}
.brand-lockup:hover { text-decoration: none; }
/* .brand-mark — the hexagonal shield logo. Sized as a square box; drop the
inline