/* ============================================================================ Contlant design tokens — single source of truth ---------------------------------------------------------------------------- This shared contract is mirrored, byte-identical, at: apps/website/public/tokens.css (linked before styles.css) apps/platform/src/app/tokens.css (imported at the top of globals.css) Palette derives from the Scope Space Constitution and the approved 28 August 2026 navy migration recorded in docs/design/DESIGN-CONTRACT.md. Every text/background pairing below has been checked against WCAG 2.1 AA. THREE RULES THAT MUST NOT BE BROKEN 1. No raw hex outside this file. 2. No font-size below 12px, anywhere, ever. 3. On --c-pale, text is --c-ink or --c-navy only. Nothing else passes AA. Enforced by .stylelintrc.json. GOLD — FOUR TOKENS, FOUR JOBS (added 13 Aug 2026, see docs/DESIGN-CONTRACT.md) --c-gold is a FILL, never a text colour and never a border on a light ground: it measures 2.91:1 on white, which fails AA normal text (4.5:1) and also fails the 3:1 non-text minimum. Use --c-gold-text to write in gold, --c-gold-line to draw in gold, --c-gold-on-dark on navy or deeper. Gold is capped at 5% of painted area on any screen. ========================================================================== */ :root{ /* ---- Brand ------------------------------------------------------------ */ --c-navy: #1C1C62; /* 15.1:1 on white — headings, dark surfaces */ --c-blue: #426FD4; /* 4.7:1 on white — primary action */ --c-blue-strong: #2E56B5; /* 6.7:1 on white — hover, accents on tints */ --c-ink: #17223B; /* 15.8:1 on white — body text */ --c-pale: #DCE7FF; /* selected rows, active nav, quiet panels */ --c-white: #FFFFFF; /* ---- Neutrals — three, not four hundred ------------------------------- */ --c-muted: #526478; /* 6.1:1 on white, 4.9:1 on --c-pale */ --c-line: #C3D4E8; /* hairlines. NEVER text on light grounds. */ --c-canvas: #F5F8FC; /* page background */ --c-sky: #EAF1FF; /* tinted panels one step warmer than canvas */ --c-ink-deep: #0F1B33; /* deepest surface, for inverted panels */ /* ---- Gold accent — the one want the brand palette had no answer for ---- PROJECT-COMMAND-NOTES asked for #BF9000 as "small highlights, key metrics, badges and chart emphasis". Measured, #BF9000 carries none of those jobs on a light ground. It is kept for the one job it does carry — a filled area with dark text on it — and split into three siblings that each clear the threshold their job requires. All figures measured with the WCAG 2.1 relative-luminance formula, truncated, not rounded up. --- */ --c-gold: #BF9000; /* FILL ONLY. --c-ink on it 5.4:1, --c-ink-deep 5.8:1. As text: 2.9:1 white / 2.7:1 canvas — fails. As a 1px edge on white: 2.9:1 — fails 3:1. */ --c-gold-text: #876600; /* 5.3:1 white, 5.0:1 canvas, 4.7:1 sky, 5.0:1 on --c-gold-pale. The only gold that may carry words. NOT legal on --c-pale (4.3). */ --c-gold-line: #A97E00; /* 3.7:1 white, 3.4:1 canvas, 3.2:1 sky, 3.4:1 on --c-gold-pale. Rules, borders, underlines, icon strokes. Never text. NOT legal on --c-pale (2.9 — under 3:1). */ --c-gold-on-dark:#DEA700; /* 6.9:1 on --c-navy, 7.8:1 on --c-ink-deep. The CTA band and footer detail. On white it is 2.1:1 — it must never appear on a light ground. */ --c-gold-pale: #FFF8E1; /* gold tint surface. --c-ink on it 14.8:1, --c-navy 14.2:1, --c-muted 5.7:1. It is 1.00:1 against --c-canvas — on canvas it is invisible without a --c-gold-line border. */ /* ---- Status — status only. Never decoration. All >=5:1 on white. ------ */ --c-success: #1B6E47; /* 6.2:1 on white, 5.0:1 on --c-pale */ --c-success-pale: #E4F3EB; --c-warning: #9C5F0D; /* 5.2:1 — note #A9680F measures 4.49 and fails */ --c-warning-pale: #FDF3E3; --c-danger: #B23142; /* 6.2:1 */ --c-danger-pale: #FCEDEF; /* ---- Semantic text — use these, not the raw colours above -------------- */ --text: var(--c-ink); --text-muted: var(--c-muted); --text-accent: var(--c-blue); /* on white only */ --text-accent-tinted: var(--c-blue-strong); /* on canvas / sky / pale */ --text-on-brand: var(--c-white); /* on --c-blue and --c-navy */ --text-muted-on-brand:var(--c-line); /* 10.0:1 on navy */ --text-gold: var(--c-gold-text); /* white / canvas / sky / gold-pale */ --text-gold-on-dark: var(--c-gold-on-dark);/* --c-navy and --c-ink-deep only */ --text-on-gold: var(--c-ink); /* 5.4:1 on a --c-gold fill */ --border-gold: var(--c-gold-line); /* the only legal gold border */ /* ---- Type ------------------------------------------------------------- */ --font-sans: Inter, ui-sans-serif, "Segoe UI", system-ui, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; --t-xs: 12px; /* absolute floor. captions, chips, table headers */ --t-sm: 14px; /* table body, form labels, dense UI */ --t-base: 16px; /* default body */ --t-lg: 18px; --t-xl: 20px; /* lead paragraphs */ --t-2xl: 24px; /* h3, app page titles */ --t-3xl: 30px; /* stat figures */ --t-4xl: 38px; --h1: clamp(38px, 4.5vw, 56px); --h2: clamp(30px, 3.2vw, 40px); --h3: var(--t-2xl); --w-regular: 400; --w-medium: 500; --w-bold: 700; /* the heaviest weight the webfont actually ships */ --lh-display: 1.1; --lh-body: 1.55; --lh-tight: 1.35; /* dense UI, table cells */ --track-display: -0.02em; /* not -0.045em */ --track-caps: 0.08em; /* the one uppercase tracking value */ /* ---- Space — 4px base ------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 96px; /* ---- Radius — five ---------------------------------------------------- */ --r-sm: 4px; /* chips, tags */ --r-md: 8px; /* buttons, inputs */ --r-lg: 12px; /* cards */ --r-xl: 20px; /* full-bleed panels, hero */ --r-pill: 999px; /* ---- Elevation — three ------------------------------------------------ */ --e-1: 0 1px 2px rgba(23,34,59,.06); --e-2: 0 4px 12px rgba(23,34,59,.08); --e-3: 0 12px 32px rgba(23,34,59,.10); /* ---- Controls --------------------------------------------------------- */ --control-h: 44px; /* buttons and inputs. Also the touch-target floor. */ --control-h-sm: 36px; --focus-ring: 0 0 0 3px rgba(66,111,212,.45); /* ---- Layout ----------------------------------------------------------- */ --container: 1200px; --gutter: var(--s-6); --section-y: var(--s-8); /* ONE value. Sections never set their own. */ } /* Breakpoints — three, shared by both properties. CSS custom properties cannot be used in media queries, so these are the canonical numbers, written out by hand everywhere: 640px phone -> tablet 900px tablet -> small desktop 1200px small -> large desktop No other breakpoint may be introduced. */ @media (max-width: 900px){ :root{ --section-y: var(--s-7); --gutter: var(--s-5); } } @media (max-width: 640px){ :root{ --section-y: var(--s-6); --gutter: var(--s-4); } } :root { /* ---- Product accents — identity for the workspace micro-app grid ------- Deliberately chosen in ONE narrow luminance band (0.103-0.118, a 1.15x spread) so five products read as one family rather than five brands. Every accent is >=5.0:1 on white, --c-canvas, --c-sky, --c-pale AND on its own -pale companion, so each is safe as icon stroke AND as label text on any ground the tile grid uses. Do not add a sixth by eye: re-run the contrast check and keep it inside the band. These are IDENTITY, not status. Never use them to mean good/bad. */ --c-prod-payroll: #2E56B5; /* 6.74:1 white · 5.43:1 pale */ --c-prod-payroll-pale: #E7EDFC; --c-prod-books: #0F6A70; /* 6.33:1 white · 5.10:1 pale */ --c-prod-books-pale: #DFF0F1; --c-prod-tax: #5A46BE; /* 6.88:1 white · 5.54:1 pale */ --c-prod-tax-pale: #EAE7FA; --c-prod-stock: #8A5210; /* 6.37:1 white · 5.13:1 pale */ --c-prod-stock-pale: #F7EDE0; --c-prod-appts: #1B6E47; /* 6.24:1 white · 5.02:1 pale */ --c-prod-appts-pale: #E4F3EB; }