/* ============================================================================
BookedCentral — Design Token Seam (aligned to Design Specification v1.1)
----------------------------------------------------------------------------
The single swap-point for brand / colour / type. Every rule in styles.css
references these variables and nothing else, so dropping in the final design
assets is a token swap, not a rewrite.
Layers (do not collapse them):
1. PRIMITIVES raw palette scale + raw type families (assets edit here)
2. SEMANTIC role tokens (--bg, --ink, --border, …) (styles.css reads these)
3. THEME dark-mode remap of the SEMANTIC layer
Design language (v1.1): "Calm Intelligence" — a 12-step cool-neutral field,
SIGNAL COPPER as the single AI accent (supersedes AI-violet, §0.1 / §2.1.1),
a locked semantic status set, a thin per-engine accent family, and three
type roles (Fraunces serif · Inter sans · IBM Plex Mono data). Plus the four
identity tokens that make the system recognisable with the logo removed:
the 63:37 split (§2.7.1), the tick-and-rule scaffold (§2.7.2), and the single
"calibration ease" motion curve (§2.6).
FINAL-ASSET SEAM: to rebrand, edit ONLY the PRIMITIVES block below —
the neutral ramp (§2.1), the four --copper-* stops (§2.1.1), the per-engine
accents (§2.1), and the three --font-* families (§2.2, plus the matching
webfont in index.html). Nothing in styles.css hard-codes a hex or
a font, so the semantic + theme layers re-flow automatically.
============================================================================ */
:root {
/* ---- 1. PRIMITIVES ------------------------------------------------------ */
/* Neutral foundation — 12 steps, cool-neutral, warm-cool off-white base
(§2.1). Light-mode column. The dark column is remapped in the THEME layer
(dark elevates by getting *lighter*, never a flat black-on-black stack). */
--n-0: #FCFCFB; /* app background */
--n-1: #F6F6F4; /* panel / card background */
--n-2: #EEEEEB; /* sunken, table stripes */
--n-3: #E3E3DF; /* hairline borders (default)*/
--n-4: #D3D3CD; /* borders, emphasis · ticks */
--n-5: #B7B7AF; /* disabled text/icons */
--n-6: #93938A; /* secondary icons */
--n-7: #71716A; /* secondary text */
--n-8: #4C4C47; /* body text */
--n-9: #2E2E2B; /* primary text (light) */
--n-10: #171715; /* headlines / display */
--n-11: #0B0B0A; /* max-contrast ink */
/* Signal Copper — the SINGLE signature accent, reserved exclusively for
AI-native affordances (§2.1.1). If copper appears, the machine is speaking.
It is never a link colour, a generic brand accent, or decoration. */
--copper-500: #A5622E; /* primary */
--copper-400: #C17F49; /* hover / lighter · dark-mode text */
--copper-600: #82491E; /* active / pressed · light-mode text */
--copper-tint: #F5EDE4; /* light-mode wash (dark remap in THEME)*/
/* Semantic status — a separate LOCKED set, independent of engine colour. */
--success: #1E8E5A;
--warning: #B8790A;
--danger: #C4361F;
--compliance: #2563A8; /* compliance / legal states only */
/* Per-engine identity accents (§2.1) — thin edge only (nav highlight,
header keyline, chart primary). Never a fill, never a background. */
--engine-sales: #0E8C82; /* teal-cyan */
--engine-seo: #C08A1E; /* amber-gold */
--engine-marketing: #D45D6E; /* coral-rose */
--engine-social: #C43D8C; /* magenta-pink */
--engine-automation: #6E5FC4; /* violet-kin */
--engine-analytics: #2F6FB0; /* blue */
--engine-communications: #2E9160; /* green */
--engine-customer-success: #1F9E7C; /* warm-emerald */
--engine-people: #4C5C86; /* slate-blue */
--engine-knowledge: #6E3F73; /* deep-plum */
--engine-ai: #A5622E; /* = Signal Copper */
/* ---- Typography — three roles, three families (§2.2) -------------------- */
/* Webfonts are wired in index.html ( to the three families). Swap the
families here + the to change type. Fallbacks keep the site legible
before the webfont loads or offline. */
--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", monospace;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold:600;
/* Slashed-zero tabular numerals for every score / ID / currency (§2.2.1). */
--num-feat: "tnum" 1, "zero" 1;
/* Type scale (§2.2, 8px-derived). display-* = serif, heading-* = sans,
data-* = mono. Hero is fluid; the rest are fixed to the spec. */
--fs-display-xl: clamp(2.6rem, 1.9rem + 3.1vw, 3.5rem); /* 56/64 target */
--fs-display-lg: clamp(2rem, 1.6rem + 1.7vw, 2.5rem); /* 40/48 */
--fs-display-md: clamp(1.5rem, 1.3rem + 0.9vw, 1.75rem); /* 28/36 */
--fs-heading-lg: 1.375rem; /* 22/28 sans 600 */
--fs-heading-md: 1.0625rem; /* 17/24 sans 600 */
--fs-body-lg: 0.9375rem; /* 15/22 sans 400 */
--fs-body-md: 0.8125rem; /* 13/20 sans 400 */
--fs-caption: 0.75rem; /* 12/16 sans 500 */
--fs-data-lg: 1.5rem; /* 24/28 mono 500 */
--fs-data-md: 0.875rem; /* 14/20 mono 500 */
/* Reading lead — sans, between body-lg and heading, for section intros. */
--fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
--lh-display: 1.05;
--lh-snug: 1.22;
--lh-body: 1.6;
--tracking-tight: -0.02em;
--tracking-eyebrow: 0.16em; /* mono small-caps eyebrow (§2.2.1) */
/* ---- Spacing / grid (§2.3, base 8px; 4·8·12·16·24·32·48·64·96) --------- */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem;
--sp-12: 6rem; --sp-16: 8rem;
--container: 1160px;
--container-narrow: 760px;
/* ---- Radius / elevation (§2.3) ----------------------------------------- */
--r-sm: 6px; /* buttons, inputs, chips */
--r-md: 10px; /* cards */
--r-lg: 16px; /* modals, drawer, copilot */
--r-pill: 999px; /* status chips + copilot orb ONLY */
/* Flat by default — borders do the work. Two soft, low-opacity tiers only,
plus a faint copper-tinted shadow reserved for AI-authored surfaces. */
--elevation-1: 0 1px 2px rgba(11, 11, 10, 0.05), 0 1px 1px rgba(11, 11, 10, 0.04);
--elevation-2: 0 6px 24px -12px rgba(11, 11, 10, 0.16), 0 2px 6px -3px rgba(11, 11, 10, 0.08);
--elevation-ai: 0 10px 40px -18px rgba(165, 98, 46, 0.32);
/* ---- Identity tokens (the parts to protect hardest, §12) --------------- */
--split-primary: 63%; /* §2.7.1 two-pane content side */
--split-secondary: 37%; /* §2.7.1 two-pane rail side */
--tick-interval: 12px; /* §2.7.2 calibration tick pitch */
--tick-color: var(--n-4);
--ease-calibration: cubic-bezier(0.2, 0, 0, 1); /* §2.6 the single curve */
--motion: 200ms var(--ease-calibration);
--motion-fast: 150ms var(--ease-calibration);
/* ---- 2. SEMANTIC (role tokens — styles.css reads ONLY these) ----------- */
--surface-app: var(--n-0);
--surface-panel: var(--n-1);
--surface-sunken: var(--n-2);
--ink: var(--n-9); /* primary / body */
--ink-strong: var(--n-10); /* headlines */
--ink-max: var(--n-11); /* max-contrast (primary button bg) */
--ink-muted: var(--n-7); /* secondary text */
--ink-subtle: var(--n-6); /* tertiary / meta */
--ink-faint: var(--n-5); /* disabled */
--border: var(--n-3);
--border-strong: var(--n-4);
/* AI-only accent, semantic aliases (Signal Copper). */
--accent-ai: var(--copper-500);
--accent-ai-text: var(--copper-600); /* AA copper text on light */
--accent-ai-strong: var(--copper-400);
--accent-ai-wash: var(--copper-tint);
/* Buttons + links are ink-neutral, never copper (§2.1.1). */
--btn-primary-bg: var(--ink-max);
--btn-primary-fg: var(--surface-app);
--link: var(--ink-strong);
--focus: var(--ink);
}
/* ---- 3. THEME — dark: elevates by getting *lighter* (§2.1) --------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--n-0: #0B0D10;
--n-1: #111318;
--n-2: #171A20;
--n-3: #1E2128;
--n-4: #282C34;
--n-5: #3A3F49;
--n-6: #565C68;
--n-7: #7A818E;
--n-8: #A6ACB8;
--n-9: #D5D9E0;
--n-10: #EDEFF3;
--n-11: #FFFFFF;
--copper-tint: #231A12;
--accent-ai-text: var(--copper-400); /* darker copper unreadable on dark */
--elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
--elevation-2: 0 8px 30px -14px rgba(0, 0, 0, 0.7), 0 2px 8px -3px rgba(0, 0, 0, 0.5);
--elevation-ai: 0 12px 44px -18px rgba(193, 127, 73, 0.34);
}
}
/* Explicit toggle wins in both directions. */
:root[data-theme="dark"] {
--n-0: #0B0D10;
--n-1: #111318;
--n-2: #171A20;
--n-3: #1E2128;
--n-4: #282C34;
--n-5: #3A3F49;
--n-6: #565C68;
--n-7: #7A818E;
--n-8: #A6ACB8;
--n-9: #D5D9E0;
--n-10: #EDEFF3;
--n-11: #FFFFFF;
--copper-tint: #231A12;
--accent-ai-text: var(--copper-400);
--elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
--elevation-2: 0 8px 30px -14px rgba(0, 0, 0, 0.7), 0 2px 8px -3px rgba(0, 0, 0, 0.5);
--elevation-ai: 0 12px 44px -18px rgba(193, 127, 73, 0.34);
}