/* ═══════════════════════════════════════════════════════════════════ AI² ENQUIRE — CANONICAL DESIGN TOKENS ─────────────────────────────────────────────────────────────────── ONE namespace. Every visual constant in the product resolves here. STATUS: LOCKED. Adding a colour, radius, shadow or font anywhere else in the codebase is a drift defect, not a feature. LOAD ORDER: first stylesheet in , before style.css. Every value below matches something already live, so adding this file changes NOTHING visually until references are migrated. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── BRAND ────────────────────────────────────────────────────── #B64926 is the product. Currently hard-coded 148× despite --tml-primary existing. That is the drift, in one number. */ --tml-primary: #B64926; --tml-primary-hover: #B22600; /* DECISION 1 — hotter, not darker */ --tml-primary-press: #8B2F15; /* darker on press, closes the loop */ /* ── SURFACES ─────────────────────────────────────────────────── Internal and public backgrounds genuinely differ. Both kept. */ --tml-bg: #F5F4EE; /* internal page */ --tml-bg-public: #EDEBE2; /* public page — card lift */ --tml-bg-alt: #ECEBE4; /* secondary panels */ --tml-surface: #FAFAF7; /* cards, content surfaces */ --tml-surface-hover: #EBE9E0; --tml-dark: #2B2A26; /* inverted surfaces */ --tml-dark-alt: #3A3833; --tml-dark-line: #4E4B44; /* ── LINES ────────────────────────────────────────────────────── Three near-identical borders existed. Consolidated to two roles: a visible edge and a soft rule. */ --tml-border: #D6D3C7; /* card edges, inputs */ --tml-border-soft: #DFDDD2; /* subtle separators */ --tml-divider: #E8E6DC; /* horizontal rules */ /* ── INK ──────────────────────────────────────────────────────── Four levels, all four genuinely in use. */ --tml-ink: #1C1C1A; /* headings, primary text */ --tml-ink-body: #3B3A36; /* body copy */ --tml-ink-soft: #5A5A57; /* secondary — DECISION: merged */ --tml-ink-muted: #6A6859; /* labels, meta — 5.18:1, passes AA was #8A8779 at 3.27:1, failed */ --tml-ink-invert: #FAFAF7; /* on dark surfaces */ /* ── STATUS ───────────────────────────────────────────────────── The greens and ambers actually rendering on screen had NO tokens; the tokens that existed were barely used. Corrected to what the product really shows. DECISION 3 — confirmed. */ --tml-success: #1B6B43; --tml-success-wash: rgba(34, 139, 87, 0.10); --tml-success-line: rgba(34, 139, 87, 0.30); --tml-warning: #C98A2E; --tml-warning-wash: rgba(201, 138, 46, 0.12); --tml-warning-line: rgba(201, 138, 46, 0.45); --tml-danger: #8B1A1A; --tml-danger-wash: rgba(139, 26, 26, 0.08); --tml-danger-line: rgba(139, 26, 26, 0.35); --tml-info: #1F4F86; --tml-info-wash: rgba(46, 109, 178, 0.12); --tml-info-line: rgba(46, 109, 178, 0.35); /* ── TRACKER SEMANTICS ────────────────────────────────────────── Kept as a named layer — these carry meaning, not just colour. */ --tml-corpus: var(--tml-primary); --tml-process: #2F6F8F; --tml-attention: #C8952A; /* ── TYPE ─────────────────────────────────────────────────────── Khand for display, one body face, one mono. See DECISION 2. */ --tml-font-display: 'Khand', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; --tml-font-body: 'Montserrat', system-ui, -apple-system, sans-serif; --tml-font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; --tml-text-xs: 11px; --tml-text-sm: 13px; --tml-text-base: 15px; --tml-text-lg: 18px; --tml-text-xl: 22px; --tml-text-2xl: 28px; --tml-text-3xl: 38px; --tml-leading-tight: 1.15; --tml-leading-normal: 1.55; --tml-leading-loose: 1.7; --tml-track-label: 0.11em; /* uppercase meta labels */ --tml-track-display: 0.02em; /* ── SPACE ────────────────────────────────────────────────────── */ --tml-space-1: 4px; --tml-space-2: 8px; --tml-space-3: 12px; --tml-space-4: 16px; --tml-space-5: 24px; --tml-space-6: 32px; --tml-space-7: 48px; --tml-space-8: 64px; /* ── SHAPE & DEPTH ────────────────────────────────────────────── */ --tml-radius-sm: 2px; --tml-radius: 4px; --tml-radius-lg: 8px; --tml-radius-pill: 999px; --tml-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --tml-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); --tml-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.15); --tml-ease: cubic-bezier(0.4, 0, 0.2, 1); --tml-duration: 160ms; /* ── SURFACE TINTS ─────────────────────────────────────── For selected rows, hover washes and alert backgrounds — NOT for chart fills. A tint of the brand orange at low alpha reads as pale pink at scale, which is the effect being removed. */ --tml-primary-tint: rgba(182, 73, 38, 0.055); --tml-primary-wash: rgba(182, 73, 38, 0.10); --tml-primary-line: rgba(182, 73, 38, 0.35); /* ── DATA VISUALISATION ───────────────────────────────── Categorical series get their own hues — terracotta, mustard, bronze, brown — with a neutral track behind. All six values are already in the codebase; none were tokenised. Series are ordered by visual weight so a two-series chart reads well. Stacked bars: chart-1 for the measured value, chart-2 for the claimed value, track for the remainder. Never a pale tint of the primary. */ --tml-chart-1: #B64926; /* terracotta — deployed, actual */ --tml-chart-2: #DCA31C; /* mustard — claimed, secondary */ --tml-chart-3: #9C6B4A; /* brown — third series */ --tml-chart-4: #D2733F; /* light terracotta */ --tml-chart-5: #8A5E1E; /* bronze */ --tml-chart-6: #6A6859; /* warm grey-olive */ --tml-chart-track: #D6D3C7; /* unfilled bar, availability */ --tml-chart-grid: #E4E1D8; /* gridlines, axes */ }