/* ========================================================================== Plek design tokens — v5.2 -------------------------------------------------------------------------- Load AFTER static/css/core.css, and only on surfaces that have migrated (landing/, app/). case_study/ must never load this file — it stays on the Cohere token set in core.css. See DESIGN.md § Coexistence. Every value here is frozen. Ranges live in prose, not in code: if a value is not in this file, it is not in the system. ========================================================================== */ :root { /* ── Ground ─────────────────────────────────────────────────────────── */ --canvas: #FFFFFF; /* app page ground; lifted blocks on marketing */ --ground: #EFEFEF; /* marketing page ground — neutral. Replaces the warm #F7F4ED. Reads clear of both white and --surface (1.15:1 and 1.10:1), so the depth ladder below is wider than the cream gave, not narrower. The app is unaffected: it grounds on --canvas, never on this. */ --surface: #FAFAF8; /* cards, chart panels — must differ from --ground or the depth ladder collapses; 1.10:1 against it, up from 1.05:1 on the cream ground */ --border: #ECEAE5; /* decorative hairlines — 1.20:1 on canvas, rules and chapter divisions ONLY. Held at the canvas value because this is the app's separator lattice; the marketing plane restates it for its own ground in landing/templates/base.html. */ --border-strong: #8F887A; /* 3.5:1 — any boundary that defines an interactive control (inputs, ghost buttons, chips). WCAG 1.4.11. */ --wash-stop: #F7F1E8; /* wash centre stop */ --wash: radial-gradient(60% 60% at 50% 40%, #F7F1E8 0%, rgba(247, 241, 232, 0) 100%); /* hero atmosphere only — never behind text, controls, or charts */ /* ── Ink ────────────────────────────────────────────────────────────── */ --ink: #1F1D1A; /* 16.8:1 — headlines, primary text */ --ink-secondary: #6B6660; /* 5.7:1 — body copy */ --muted: #706B64; /* 5.3:1 on canvas, 4.6:1 on --ground — eyebrows and captions. Darkened with the ground, twice now: #78736C fell to 4.28:1 on the cream, and #736E67 fell to 4.40:1 — under AA — when the ground went neutral. This holds the 4.6:1 the cream gave, and gains contrast on canvas. */ --ink-disabled: #8A857D; /* 3.7:1 — disabled labels only */ /* ── Signal ─────────────────────────────────────────────────────────── */ --signal: #0B87A0; /* 4.2:1 — the mark's thread, chart-1, graphics, headline emphasis. NOT a ground for small white text. */ --signal-strong: #096F84; /* 5.8:1 — ground for filled controls and body-size links */ --signal-strong-hover: #07596B; /* 7.9:1 — hover on filled controls */ --signal-soft: #F0F7F9; /* selected-row / active-chip tint */ /* ── Focus ──────────────────────────────────────────────────────────── */ --focus: #1F1D1A; /* NEVER the accent — a teal ring on a teal button is invisible */ --focus-on-dark: #EFEDE9; --focus-width: 2px; --focus-offset: 2px; /* ── Dark band ──────────────────────────────────────────────────────── */ --dark: #191817; --ink-on-dark: #EFEDE9; /* 15.2:1 */ --ink-on-dark-secondary: #A5A099; /* 6.8:1 */ --terminal-body: #8B867E; /* 4.9:1 on --dark */ --signal-on-dark: #57C1D5; /* 8.4:1 */ --error-on-dark: #E4737F; /* 6.0:1 — --error is only 2.6:1 on dark */ /* ── Status — always with an icon or a word ─────────────────────────── */ --success: #0E7A46; --warning: #8A5410; --error: #B01E2E; --info: #0E6FB0; /* never actionable, never beside teal */ /* ── Charts — fixed order, entity-bound ─────────────────────────────── */ --chart-1: #0B87A0; /* teal */ --chart-2: #946200; /* bronze */ --chart-3: #8A4FD8; /* violet */ --chart-4: #B3436E; /* rose */ --chart-peer: #8F887A; /* 3.4:1 on surface — peers/benchmark */ /* ── The Flow ───────────────────────────────────────────────────────── */ --flow-teal: #0B87A0; --flow-sky: #57C1D5; --flow-pale: #A8D8E2; --flow-sand: #D9C7A9; --flow-stone: #C4BAA8; --flow-ink: #1F1D1A; /* ── Type ───────────────────────────────────────────────────────────── */ --font-sans: Inter, ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* terminal */ --text-display: 48px; /* 32px below --bp-md */ --text-display-mobile: 32px; --text-h2: 32px; --text-h2-mobile: 26px; --text-h3: 17px; --text-lead: 18px; --text-body: 16px; --text-small: 13px; --text-eyebrow: 12px; --text-button: 14px; /* the value v5.0 omitted */ --text-stat: 38px; --text-stat-mobile: 30px; --leading-display: 1.22; --leading-h2: 1.3; --leading-body: 1.75; --leading-lead: 1.7; --leading-small: 1.5; --leading-terminal: 2.2; --tracking-display: -0.012em; --tracking-h2: -0.005em; --tracking-eyebrow: 0.3em; --tracking-wordmark: -0.02em; --weight-light: 300; /* stat figures, dark-band headlines */ --weight-regular: 400; --weight-medium: 500; /* card titles, button labels, wordmark */ --weight-max: 600; /* nothing heavier, ever */ /* ── Space — 4px base ───────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; /* card padding */ --space-12: 48px; --space-16: 64px; /* grid gap */ --space-24: 96px; /* interior section rhythm, mobile */ --space-32: 128px; /* interior section rhythm, desktop */ /* Historical role aliases share core.css --radius-ui (6px). Circles and internal joined corners remain explicit in component CSS. */ /* ── Shape ──────────────────────────────────────────────────────────── */ --radius-xs: var(--radius-ui, 6px); /* swatches, badges, thumbnails */ --radius-sm: var(--radius-ui, 6px); /* chips, tags, small media */ --radius-rail: var(--radius-ui, 6px); /* floating marketing navigation */ --radius-card: var(--radius-ui, 6px); /* cards, chart panels, media cards */ --radius-band: var(--radius-ui, 6px); /* the dark band */ --radius-pill: var(--radius-ui, 6px); /* buttons, the capture field */ /* ── Layout ─────────────────────────────────────────────────────────── */ --container-interior: 1120px; /* success stories, case-study-style pages */ --container-app: 1440px; --measure: 68ch; /* max reading measure */ --gutter: 8vw; /* homepage side padding */ /* Breakpoints are documentation values — CSS custom properties cannot be used inside @media. Keep the literals in sync with these. */ --bp-sm: 640px; --bp-md: 768px; /* canvas/spine/figures hide below this */ --bp-lg: 1024px; --bp-xl: 1440px; /* ── Motion ─────────────────────────────────────────────────────────── */ --dur-hover: 150ms; --dur-panel: 250ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ========================================================================== Required base — the light weights depend on this. Without grayscale antialiasing, HiDPI panels render Inter 300–400 heavier and fuzzier than standard-DPI displays and the type stops being the brand. ========================================================================== */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-secondary); background: var(--canvas); } /* Focus is never removed and never the accent colour. */ :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); } /* Every data context. */ .tabular { font-variant-numeric: tabular-nums; }