/* ============================================================================
Roofing Collective NZ — design tokens
Source of truth: docs/09-design-system.md (v1, 2026-10-26). Direction: "B · Charcoal hero".
Every colour here was measured against WCAG 2.2 AA; see that document, chapter 3.5, before changing a value.
HOW TO USE
- Load this file first in every app (public static sites, Directory Worker HTML, partner portal, admin/caller app).
- Fonts are NOT imported here. Outfit (500, 700) and Figtree (400, 500, 600, 700) are SELF-HOSTED as woff2
under /assets/fonts/ in every app (SIL OFL; the CSP of docs/13 SC-33 allows font-src 'self' only, docs/13 P8).
Put this in : (the @font-face file and the woff2
files ship in packages/ui/fonts/ and are copied by each app's build; no request to fonts.googleapis.com).
- Themes: light is the default (launch). Dark applies when the OS prefers dark and no explicit choice is set,
or when . forces light.
- Never use a raw hex in component CSS. If a value you need is missing, add a token here and document it in 09.
- Naming: --rc--[-]. Semantic tokens (what it is for) sit on top of a small set of primitives.
========================================================================== */
:root {
color-scheme: light;
/* ---------- Primitives (the logo's colours and neutrals) ---------- */
--rc-orange: #D4552B; /* logo left slope. Non-text marks only (fails AA under text) */
--rc-rust: #B33A1E; /* logo right slope. Fills that carry white text */
--rc-rust-ink: #A83C1C; /* orange family as text or icon on light surfaces */
--rc-charcoal: #202020; /* logo wordmark */
--rc-charcoal-band: #232323; /* hero / nav band, as in the logo's dark artboard */
/* ---------- Surfaces ---------- */
--rc-bg: #FFFFFF; /* page */
--rc-surface: #FFFFFF; /* cards, inputs, modals */
--rc-surface-2: #F5F4F2; /* table header, hover row, secondary panels (warm, slight grey) */
--rc-surface-3: #ECEBE8; /* pressed row, skeleton base, disabled fill */
--rc-band: #232323; /* dark band: top nav on public site, homepage hero, app sidebar */
--rc-band-fg: #FFFFFF;
--rc-band-muted: #C9C7C3;
--rc-overlay: rgba(32, 32, 32, 0.55); /* behind modals */
/* ---------- Text ---------- */
--rc-text: #202020; /* 16.3:1 on bg */
--rc-text-muted: #5C5B59; /* 6.8:1 on bg, 6.2:1 on surface-2: labels, helper text, captions */
--rc-text-subtle: #8B8A86; /* 3.5:1: placeholders and decorative icons only, never for information */
--rc-text-on-accent:#FFFFFF;
--rc-text-on-primary:#FFFFFF;
--rc-text-disabled: #9C9A96;
/* ---------- Borders and focus ---------- */
--rc-border: #E3E2DF; /* dividers, card edges (decorative, not a control boundary) */
--rc-border-strong: #8B8A86; /* inputs, checkboxes, outlined buttons: 3.5:1 on bg, 3.1:1 on surface-2 */
--rc-focus: #A83C1C; /* focus ring, 2 px, offset 2 px */
--rc-focus-width: 2px;
--rc-focus-offset: 2px;
/* ---------- Actions ---------- */
--rc-primary: #202020; /* default button: charcoal */
--rc-primary-hover: #3A3A3A;
--rc-primary-active: #0F0F0F;
--rc-accent: #B33A1E; /* the ONE emphasised action per screen: buy pack, send enquiry, assign */
--rc-accent-hover: #9C3219;
--rc-accent-active: #87290F;
--rc-accent-bright: #D4552B; /* progress bars, selected borders, trust dots, highlighted card edge: no text on it */
--rc-accent-ink: #A83C1C; /* links, checkmarks, orange text */
--rc-accent-tint: #FBEDE8; /* light fill behind selected choice cards and accent alerts */
--rc-link: #A83C1C;
--rc-link-hover: #87290F;
--rc-disabled-bg: #EDECEA;
--rc-disabled-fg: #9C9A96;
/* ---------- Status (shared vocabulary across all apps; never colour alone) ---------- */
--rc-success: #2F7A4D; --rc-success-bg: #E6F3EA; /* delivered, won, active, paid */
--rc-warning: #9A6400; --rc-warning-bg: #FBF3E0; /* awaiting accept, past_due, verifying */
--rc-error: #C5203E; --rc-error-bg: #FDECEE; /* rejected, lost, cancelled, failed */
--rc-info: #2B5F8A; --rc-info-bg: #E8F0F7; /* new, approved, assigned, contacted, quoted */
--rc-neutral: #5C5B59; --rc-neutral-bg: #F5F4F2; /* draft, archived, unknown */
/* ---------- Membership tiers ---------- */
--rc-gold: #8A6A00; --rc-gold-bg: #FBF3D6;
--rc-platinum: #3D4A5C; --rc-platinum-bg: #E9EDF2;
/* ---------- Typography ---------- */
--rc-font-display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--rc-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--rc-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* lead IDs, codes */
/* Type scale (px via rem; base 16). Line-height is unitless. */
--rc-text-xs: 0.75rem; --rc-leading-xs: 1.4; /* 12 captions, badges */
--rc-text-sm: 0.8125rem;--rc-leading-sm: 1.45; /* 13 table cells, helper text */
--rc-text-md: 0.875rem; --rc-leading-md: 1.5; /* 14 app UI default */
--rc-text-base: 1rem; --rc-leading-base: 1.55; /* 16 public-site body, form inputs on phone */
--rc-text-lg: 1.125rem; --rc-leading-lg: 1.5; /* 18 lead-in paragraph */
--rc-text-xl: 1.25rem; --rc-leading-xl: 1.3; /* 20 card title, form step title */
--rc-text-2xl: 1.5rem; --rc-leading-2xl: 1.25; /* 24 section title (app) */
--rc-text-3xl: 1.875rem; --rc-leading-3xl: 1.2; /* 30 price, page title (app) */
--rc-text-4xl: 2.25rem; --rc-leading-4xl: 1.1; /* 36 section title (public) */
--rc-text-5xl: 2.75rem; --rc-leading-5xl: 1.05; /* 44 hero (phone) */
--rc-text-6xl: 3.5rem; --rc-leading-6xl: 1.02; /* 56 hero (desktop) */
--rc-tracking-display: -0.02em; /* Outfit headings */
--rc-tracking-label: 0.08em; /* uppercase labels and eyebrows */
--rc-weight-regular: 400; --rc-weight-medium: 500; --rc-weight-semibold: 600; --rc-weight-bold: 700;
/* ---------- Spacing (4 px base) ---------- */
--rc-space-0: 0; --rc-space-1: 0.25rem; --rc-space-2: 0.5rem; --rc-space-3: 0.75rem;
--rc-space-4: 1rem; --rc-space-5: 1.25rem; --rc-space-6: 1.5rem; --rc-space-8: 2rem;
--rc-space-10: 2.5rem;--rc-space-12: 3rem; --rc-space-16: 4rem; --rc-space-20: 5rem;
--rc-gutter: max(16px, env(safe-area-inset-left, 0px)); /* page side padding, phone-safe */
--rc-content-max: 72rem; /* 1152 px: public page content */
--rc-prose-max: 65ch; /* running text */
--rc-form-max: 30rem; /* 480 px: enquiry form and auth forms */
/* ---------- Radii (direction B: rounded) ---------- */
--rc-radius-sm: 6px; /* badges, chips, small inputs */
--rc-radius-md: 8px; /* buttons, inputs, choice cards */
--rc-radius-lg: 12px; /* cards, modals, toasts */
--rc-radius-xl: 16px; /* hero panels, phone-width sheets */
--rc-radius-full: 999px; /* pills, avatars */
/* ---------- Elevation ---------- */
--rc-shadow-sm: 0 1px 2px rgba(32, 32, 32, 0.06);
--rc-shadow-md: 0 4px 12px rgba(32, 32, 32, 0.10);
--rc-shadow-lg: 0 12px 32px rgba(32, 32, 32, 0.16);
/* ---------- Sizes ---------- */
--rc-control-sm: 2rem; /* 32 px: table row actions */
--rc-control-md: 2.5rem; /* 40 px: app default */
--rc-control-lg: 2.75rem; /* 44 px: public site and phone: minimum touch target */
--rc-icon-sm: 1rem; --rc-icon-md: 1.25rem; --rc-icon-lg: 1.5rem;
--rc-sidebar-w: 15rem; /* admin / portal sidebar */
--rc-topbar-h: 3.5rem;
/* ---------- Motion ---------- */
--rc-duration-fast: 120ms; --rc-duration-base: 200ms; --rc-duration-slow: 320ms;
--rc-ease: cubic-bezier(0.2, 0, 0, 1);
/* ---------- Layers ---------- */
--rc-z-sticky: 10; --rc-z-dropdown: 20; --rc-z-overlay: 30; --rc-z-modal: 40; --rc-z-toast: 50;
/* ---------- Breakpoints (for reference in JS; CSS cannot read vars in @media) ----------
sm 480px · md 768px · lg 1024px · xl 1280px */
}
/* ============================================================================
DARK THEME. Same semantics, measured separately (docs/09, 3.3).
Applied when the OS prefers dark and the page has not forced light, and whenever data-theme="dark".
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--rc-bg: #161616; --rc-surface: #202020; --rc-surface-2: #2A2A2A; --rc-surface-3: #343434;
--rc-band: #161616; --rc-band-fg: #F2F1EF; --rc-band-muted: #A9A7A3; --rc-overlay: rgba(0, 0, 0, 0.65);
--rc-text: #F2F1EF; --rc-text-muted: #A9A7A3; --rc-text-subtle: #7E7C78; --rc-text-disabled: #6F6D69;
--rc-text-on-primary: #202020;
--rc-border: #353432; --rc-border-strong: #8B8A86; --rc-focus: #F08A72;
--rc-primary: #F2F1EF; --rc-primary-hover: #DCDAD6; --rc-primary-active: #FFFFFF;
--rc-accent: #B33A1E; --rc-accent-hover: #C94A2C; --rc-accent-active: #9C3219;
--rc-accent-bright: #D4552B; --rc-accent-ink: #F08A72; --rc-accent-tint: #3A221C;
--rc-link: #F08A72; --rc-link-hover: #F6A892;
--rc-disabled-bg: #2A2A2A; --rc-disabled-fg: #6F6D69;
--rc-success: #5FBF86; --rc-success-bg: #1C3327;
--rc-warning: #E0B04B; --rc-warning-bg: #3A2E12;
--rc-error: #F27C8C; --rc-error-bg: #3F1C22;
--rc-info: #7FB3E0; --rc-info-bg: #1B2E3F;
--rc-neutral: #A9A7A3; --rc-neutral-bg: #2A2A2A;
--rc-gold: #E5C35A; --rc-gold-bg: #3A3112;
--rc-platinum: #B8C4D3; --rc-platinum-bg: #283140;
--rc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--rc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--rc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--rc-bg: #161616; --rc-surface: #202020; --rc-surface-2: #2A2A2A; --rc-surface-3: #343434;
--rc-band: #161616; --rc-band-fg: #F2F1EF; --rc-band-muted: #A9A7A3; --rc-overlay: rgba(0, 0, 0, 0.65);
--rc-text: #F2F1EF; --rc-text-muted: #A9A7A3; --rc-text-subtle: #7E7C78; --rc-text-disabled: #6F6D69;
--rc-text-on-primary: #202020;
--rc-border: #353432; --rc-border-strong: #8B8A86; --rc-focus: #F08A72;
--rc-primary: #F2F1EF; --rc-primary-hover: #DCDAD6; --rc-primary-active: #FFFFFF;
--rc-accent: #B33A1E; --rc-accent-hover: #C94A2C; --rc-accent-active: #9C3219;
--rc-accent-bright: #D4552B; --rc-accent-ink: #F08A72; --rc-accent-tint: #3A221C;
--rc-link: #F08A72; --rc-link-hover: #F6A892;
--rc-disabled-bg: #2A2A2A; --rc-disabled-fg: #6F6D69;
--rc-success: #5FBF86; --rc-success-bg: #1C3327;
--rc-warning: #E0B04B; --rc-warning-bg: #3A2E12;
--rc-error: #F27C8C; --rc-error-bg: #3F1C22;
--rc-info: #7FB3E0; --rc-info-bg: #1B2E3F;
--rc-neutral: #A9A7A3; --rc-neutral-bg: #2A2A2A;
--rc-gold: #E5C35A; --rc-gold-bg: #3A3112;
--rc-platinum: #B8C4D3; --rc-platinum-bg: #283140;
--rc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--rc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--rc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}
/* ============================================================================
BASE RULES that every app inherits (kept minimal; components live in packages/ui/components).
========================================================================== */
html { font-family: var(--rc-font-body); font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--rc-bg); color: var(--rc-text);
font-size: var(--rc-text-base); line-height: var(--rc-leading-base);
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--rc-font-display); font-weight: var(--rc-weight-bold); letter-spacing: var(--rc-tracking-display); text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--rc-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--rc-link-hover); }
:focus-visible { outline: var(--rc-focus-width) solid var(--rc-focus); outline-offset: var(--rc-focus-offset); }
:focus:not(:focus-visible) { outline: none; }
/* Numbers that line up (prices, units, dates, phone numbers) */
.rc-num, td.rc-num, .rc-price { font-variant-numeric: tabular-nums; }
/* Uppercase labels */
.rc-label { font-size: var(--rc-text-xs); font-weight: var(--rc-weight-semibold); letter-spacing: var(--rc-tracking-label); text-transform: uppercase; color: var(--rc-text-muted); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
:root { --rc-duration-fast: 0ms; --rc-duration-base: 0ms; --rc-duration-slow: 0ms; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* Print: invoices and lead sheets */
@media print {
:root { --rc-bg: #FFFFFF; --rc-text: #000000; }
body { padding: 0; }
}