/* ============================================================================
CNTCT — CANONICAL DESIGN TOKENS · THE single source of truth
----------------------------------------------------------------------------
The canonical token file — a real served stylesheet, loaded FIRST in
index.html (before cntct-core / cntct-mobile).
⚠ MIRROR: an IDENTICAL :root copy lives in cntct-mobile.css. That sheet is
loaded unconditionally on prod (it's the design lane's own file), whereas THIS
file's only reaches prod once index.html deploys — so the theme must not
depend on it alone (missing → white canvas + 47 selectors fall back to banned
gold via --accent). Edit a token in BOTH places, or neither. Keep them in sync.
HOW EACH CONSUMER GETS IT (and auto-adjusts to changes here):
· Design lane pages (cntct-routes.js) → var(--cl-*) [same DOM, free]
· Inbox lane UI (cntct-inbox.js) → var(--cl-*) [same DOM, free]
· Any component in this app → var(--cl-*) [same DOM, free]
(same document = same CSS custom properties — no @import needed)
· Native / other apps / a TS design lib → generate a mirror FROM this
file (tokens.json/ts/swift). Those are OUTPUTS; never edit them by hand.
Generator: docs/design/gen-tokens.cjs [next step — offered, not yet built]
COLOUR LAW (non-negotiable):
green = go / live / positive blue = opened amber = queued/pending
RED = alerts ONLY (bounce, hard error, destructive) — never "opened"
BANNED — removed, do not reintroduce:
gold #c9a96e #d4af37 #9B7D3F · neon #39ff14 #B6FF1A #00c8ff
off-law reds/purples #dc2626 #6366f1 #4338ca #7C3AED #9333ea
→ recolour to var(--cl-blu) (informational) or var(--cl-amb) (attention)
========================================================================== */
:root {
/* ── ink scale (text) ── */
--cl-ink:#14221a; --cl-mid:#59695f; --cl-dim:#94a099;
/* ── clay surfaces (raised / recessed) ── */
--cl-clay:#EDF1ED; --cl-well:#E1E8E2;
--cl-line:#d6ddd7; --cl-faint:#b8c2bb;
--cl-bg:linear-gradient(168deg,#EFF3ED 0%,#E4EBE3 55%,#D9E3DB 100%);
--cl-elev:#FBFAF6;
/* ── color law: green=go/positive/live · blue=opened/info · amber=status · red=ALERT ONLY ── */
--cl-grn:#12b552; --cl-grnd:#0c9646; --cl-grn-t:#d9efdf;
--cl-blu:#2f77d0; --cl-blu-t:#dde9f7;
--cl-amb:#bd831c; --cl-amb-t:#f4e9d0;
--cl-red:#C1272D; --cl-red-t:rgba(193,39,45,.12);
--cl-grad:linear-gradient(148deg,#1ec860,#0c9646);
/* ── semantic aliases: write intent, not colour ── */
--cl-go:var(--cl-grn); --cl-open:var(--cl-blu); --cl-queued:var(--cl-amb); --cl-alert:var(--cl-red);
/* ── brand accent — 47 selectors read var(--accent, ); it was defined
NOWHERE, so every one fell back to its literal (mostly BANNED gold #c9a96e:
active nav tab, back-btn, brand icon, send button…). Defining it once here
resolves all 47 to green — the accent IS green by colour law. Universal fix. */
--accent:var(--cl-grn); --accent-d:var(--cl-grnd);
/* ── taxonomy role bands (muted — NEVER reuse state colours; a rep must not read as "live") ── */
--cl-role-supply:#3f6b57; --cl-role-brand:#4a5c74; --cl-role-demand:#7a6a3f;
--cl-role-noise:#8c8a82; --cl-hub:#6b4a86;
/* ── IDENTITY palette — WHO, not WHAT. For client tags + person avatars.
Distinct category from state (go/opened/queued/alert) AND from role bands.
Muted so identity never reads as a status. This is where the inbox's
off-law #6366f1/#7C3AED client+avatar hues resolve to — one source, no
invented purples. NEVER use these to mean a state. */
--cl-client-oa:#2f6f6a; --cl-client-gg:#4a5c9c; --cl-client-ila:#8a5a86; /* 3 live clients, distinct */
--cl-av-1:#3f6b57; --cl-av-2:#4a5c9c; --cl-av-3:#7a6a3f; --cl-av-4:#8a5a5a;
--cl-av-5:#4a5c74; --cl-av-6:#2f6f6a; --cl-av-7:#6b4a86; --cl-av-8:#7a5a3f; /* avatar hue ramp */
/* ── the depth: dual light+dark neumorphic shadows ── */
--cl-rz:6px 6px 14px rgba(146,168,154,.5), -5px -5px 11px rgba(255,255,255,.95);
--cl-rz-sm:4px 4px 10px rgba(146,168,154,.46), -4px -4px 9px rgba(255,255,255,.94);
--cl-in:inset 3px 3px 6px rgba(146,168,154,.55), inset -3px -3px 6px rgba(255,255,255,.94);
--cl-in-sm:inset 2px 2px 4px rgba(146,168,154,.55), inset -2px -2px 4px rgba(255,255,255,.94);
--cl-glow:0 9px 20px rgba(18,180,80,.10);
--cl-glow-btn:0 6px 13px rgba(18,180,80,.30), inset 0 1px 2px rgba(255,255,255,.4);
--cl-nav-shadow:0 14px 30px rgba(118,142,126,.5), inset 0 1px 2px rgba(255,255,255,.95), inset 0 -2px 4px rgba(146,168,154,.4);
/* ── type ── */
--cl-display:'Inter Tight', -apple-system, system-ui, sans-serif;
--cl-sans:var(--cl-display); /* alias — 2 sites referenced this undefined token; now resolves */
--cl-mono:'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
/* type scale — replaces ~29 hardcoded font-size literals in clay rules */
--cl-fs-micro:9.5px; --cl-fs-cap:11px; --cl-fs-sm:12.5px; --cl-fs-base:14px;
--cl-fs-md:16px; --cl-fs-lg:19px; --cl-fs-xl:24px; --cl-fs-hero:34px;
--cl-lh-tight:1.12; --cl-lh-body:1.45;
/* LEGACY type scale (W059/W060) — the 204-use de-facto scale that forked from
--cl-fs-* (R1 masters-methods finding: 204-vs-8 adoption). Values preserved
verbatim = zero visual risk; SINGLE-SOURCED here now. New code uses --cl-fs-*;
this tier collapses onto it under VRT during the token sweep (R3 map #8). */
--fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px;
--fs-14:14px; --fs-15:15px; --fs-16:16px; --fs-17:17px;
--lh-tight:1.1; --lh-body:1.45;
/* craft — engraved/embossed numerals + spring motion (record-trophy grammar) */
--cl-eng:0 1px 0 rgba(255,255,255,.85), 0 -1px 1px rgba(74,90,80,.28);
--cl-emb:0 -1px 0 rgba(255,255,255,.8), 0 1px 1px rgba(74,90,80,.22);
--cl-spring:cubic-bezier(0.34,1.56,0.64,1); --cl-ease2:cubic-bezier(0.32,0.72,0,1);
/* space (4-base) · radius · motion · z — clay had none of these tokenised */
--cl-s1:4px; --cl-s2:8px; --cl-s3:12px; --cl-s4:16px; --cl-s5:20px; --cl-s6:24px; --cl-s8:32px; --cl-s10:40px;
--cl-r-sm:8px; --cl-r-md:13px; --cl-r-lg:16px; --cl-r-xl:19px; --cl-r-pill:999px;
/* ── THE STAGE (≥769px) — the record-trophy artifact's own .stage/.phone presentation.
The clay app is the ONLY app at every width; wide viewports centre it on this stage
rather than falling back to a second design system. Mobile never sees these. ── */
--cl-stage:radial-gradient(ellipse 90% 70% at 50% 0%, #d7e0d8 0%, #c2ccc4 100%);
--cl-stage-w:430px; --cl-stage-r:30px;
--cl-stage-rz:0 30px 70px rgba(58,74,64,.34), 0 8px 22px rgba(58,74,64,.20);
--cl-spring:cubic-bezier(0.34,1.56,0.64,1); --cl-ease:cubic-bezier(0.32,0.72,0,1);
--cl-t-fast:120ms; --cl-t-base:280ms; --cl-t-slow:400ms;
--cl-z-nav:900; --cl-z-search:2000; --cl-z-sheet:9600;
}