/* ============================================================================ RADIANTOPS DESIGN SPINE · v0.4 · 1 September 2026 ---------------------------------------------------------------------------- v0.4 re-seats every value from the ratified v7 theme (theme.css, the token authority consolidated from the five as-built manager pages, 1 Sep 2026). Spine v0.2 (12 Aug) and the v0.3 "data surfaces" addendum (28 Aug) are SUPERSEDED where they conflict; surviving principles are restated below. Full rationale + changelog: guidelines/Style Guide.dc.html (ported / abandoned / seam resolutions). Numbers: guidelines/Engineering Spec v7.md. What changed (v0.3 → v0.4): · Warm espresso ink ladder + lighter, less-yellow paper (the "Equals register"). Old cool ink (#23211C–#B8B5AA) and #FBFAF6 paper retired. · ONE key color: teal. Interaction (links, focus, active nav) AND agent attribution. Slate is retired as a hue; selection is an ink tint. · Coral RATIFIED for risk verdicts (chips, badges, worded tags — never chrome, never chart marks; one governed exception: the Investment People-lens ramp). The clay family is superseded. · Olive (good verdict) PARKED: no good-verdict ships in MVP; re-mint from this spine when one does. · Gold = conversation/collaboration (timeline mountains). · Grey-to-teal AI ramp --ai-1..5 (agent share); neutral magnitude ramp --viz-1..5 re-seated on the warm ladder starting at paper-20. · Editorial chrome marks are TEAL (seam 1 resolved) — coral is verdict-only. Cohort encoding (v0.2 governed exception) retired; attribution is carried by the AI ramp and the key hue. · Radii 8/14/18 (as-built; the 4px control radius is flagged as a proposed change in the guide, not silently kept). · Chrome geometry governed: 60px top bar, trays hang below it. Type roles (.t-*) and responsive scaffolding live in tokens/roles.css. Rules that are not negotiable per surface: 1. A size role carries size only. Color is always a separate decision. 2. Color is never the only carrier of meaning. Status ships with a word. 3. Same meaning = same color everywhere; different meanings never share a hue outside the governed key pairing (interaction + agent). 4. No value outside these ladders. A new value needs a role and an owner. ========================================================================= */ :root { /* ========================================================== PRIMITIVES · never referenced outside this block ========================================================== */ --paper-00: #fffefb; --paper-05: #f9f6ee; --paper-10: #f1ece1; --paper-15: #ece5d6; --paper-20: #e3dac8; --paper-30: #d3c8b0; --ink-100: #3a2e23; --ink-70: #6e5d4b; --ink-55: #83705c; --ink-45: #9d8971; --ink-25: #c9bca9; /* KEY · the one voltage. Interaction (links key-70, focus/active key-60) and agent attribution (marks key-60, fills key-50, washes key-20). */ --key-70: #22615c; --key-60: #2e7d77; --key-50: #7fb0a8; --key-20: #dce9e5; /* CORAL · ratified 1 Sep. Risk VERDICTS only — chips, badges, worded tags. Never chrome, never chart marks (governed exception: Investment People-lens ramp). Below-axis triggers stay neutral gray. */ --coral-60: #de5b45; --coral-50: #f08a75; --coral-20: #fbe4dd; /* AMBER · watch verdict. (amber-60/-50 pruned dead in v7.) */ --amber-70: #8a5e14; --amber-20: #f9efd8; /* GOLD · conversation/collaboration (timeline mountains). gold-60 pruned. */ --gold-50: #d9bc77; --gold-20: #eadcb4; /* OLIVE · PARKED. No good-verdict ships in MVP; compat values only, no new use. Re-mint from this spine when a good verdict ships. */ --olive-60: #4c7a2e; --olive-50: #5d8a46; --olive-20: #e4eddc; /* SLATE · retired as a hue. Compat names resolve to neutral ink; slate-20 survives as the ONE selection fill (an ink tint, not a hue). */ --slate-60: var(--ink-100); --slate-50: var(--ink-70); --slate-20: #ede8dd; /* CLAY · superseded by ratified coral. Compat aliases only. */ --clay-60: var(--coral-60); --clay-50: var(--coral-50); --clay-20: var(--coral-20); /* ========================================================== SURFACE ========================================================== */ --surface-page: var(--paper-05); /* the ground */ --surface-raised: var(--paper-00); /* cards, anything that sits on top */ --surface-sunken: var(--paper-10); /* wells, table heads, page chrome */ --surface-tint: var(--paper-10); /* quiet fills, chips, code */ --border-hairline: var(--paper-15); /* default rule */ --border-strong: var(--paper-20); /* table head, control edges */ /* ========================================================== TEXT · three tokens. There is no fourth. ========================================================== */ --text-primary: var(--ink-100); --text-secondary: var(--ink-70); --text-muted: var(--ink-45); /* NOT text tokens. Non-semantic marks only: empty chart baselines, inactive rules, disabled affordance edges. Never a string. */ --mark-faint: var(--ink-45); --mark-ghost: var(--ink-25); /* ========================================================== SIGNAL · status always pairs with a word, never color alone ========================================================== */ --signal-watch: var(--amber-70); --signal-watch-fill: var(--amber-20); --signal-risk: var(--coral-60); --signal-risk-fill: var(--coral-20); --signal-neutral: var(--text-muted); --signal-neutral-fill: var(--surface-tint); /* good verdict PARKED with olive — compat only until one ships */ --signal-good: var(--olive-60); --signal-good-fill: var(--olive-20); /* ========================================================== EDITORIAL · chrome marks are TEAL (seam 1, style-guide phase). Coral is verdict-only — never chrome. Kickers/eyebrows on app pages are tracked mono in text-secondary, never a hue. ========================================================== */ --editorial-mark: var(--key-60); --editorial-rule: var(--key-60); /* ========================================================== TYPE FAMILY · three faces, three jobs editorial: what the product wrote. Headlines and longform prose. ui: what the product operates. Controls, tables, chrome. machine: machinery. Ids, timestamps, units, receipts, tracked eyebrows. NOT chart labels, NOT status-tag prose. ========================================================== */ --face-editorial: "Newsreader", Georgia, "Times New Roman", serif; /* @kind font */ --face-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* @kind font */ --face-machine: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; /* @kind font */ /* ========================================================== TYPE SCALE · LEGACY (v0.2). Superseded by the 18 .t-* roles in tokens/roles.css — the roles are the authority; these named sizes are retained so existing components keep rendering until each is re-cut onto a role. Do not use for new work. ========================================================== */ --size-micro: 10px; --lh-micro: 1.2; /* @kind other */ --size-label: 11px; --lh-label: 1.2; /* @kind other */ --size-fine: 13px; --lh-fine: 1.45; /* @kind other */ --size-body: 15px; --lh-body: 1.5; /* @kind other */ --size-read: 17px; --lh-read: 1.58; /* @kind other */ --size-lede: 19px; --lh-lede: 1.5; /* @kind other */ --size-title: 24px; --lh-title: 1.28; /* @kind other */ --size-head: 32px; --lh-head: 1.16; /* @kind other */ --size-masthead: 44px; --lh-masthead: 1.06; /* @kind other */ --track-label: 0.09em; /* @kind other */ --track-tight: -0.015em; /* @kind other */ /* ========================================================== SPACE · base-4 ladder, named for job, plus the v7 page-block pair. A heading always sits closer to what it governs than to what came before it. ========================================================== */ --space-hair: 4px; --space-tight: 8px; --space-snug: 12px; --space-base: 16px; --space-gap: 24px; --space-block: 32px; --space-section: 48px; --space-chapter: 72px; --sp-section: 56px; /* between page-level sections (v7) */ --sp-block: 40px; /* after page headers (v7) */ /* ========================================================== COMPONENT ========================================================== */ --card-pad: var(--space-gap); --card-pad-tight: var(--space-base); --control-height: 32px; --control-height-compact: 28px; --control-pad-x: var(--space-snug); --row-pad-y: var(--space-snug); --row-pad-y-compact: var(--space-tight); --cell-pad-x: var(--space-base); --rule-weight: 1px; --rule-weight-strong: 2px; --accent-bar: 3px; --touch-min: 44px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; /* ========================================================== CHROME GEOMETRY · single source: every side tray hangs below the 60px top bar. ========================================================== */ --topbar-h: 60px; /* @kind other */ --tray-top: calc(var(--topbar-h) + 8px); /* @kind other */ /* ========================================================== FORM · three radii (as-built v7: 8/14/18), one shadow. One shadow only, earned only by layers that truly float (menus, trays, calendar) — never resting cards. ========================================================== */ --radius-control: 8px; --radius-card: 14px; --radius-surface: 18px; --shadow-raised: 0 1px 2px rgba(58, 46, 35, 0.05), 0 10px 28px rgba(58, 46, 35, 0.09); /* ========================================================== FOCUS · keyboard-first. Key teal — "focused" and "interactive" rhyme. Never removed, never color alone (the ring changes geometry too). ========================================================== */ --focus-width: 2px; --focus-offset: 2px; --focus-color: var(--key-60); /* ========================================================== MEASURE AND CONTAINER ========================================================== */ --measure-prose: 64ch; /* @kind other */ --measure-ui: 78ch; /* @kind other */ --container-page: 1240px; /* @kind other */ --container-reading: 920px; /* @kind other */ /* ========================================================== LAYER ========================================================== */ --z-base: 0; /* @kind other */ --z-sticky: 10; /* @kind other */ --z-overlay: 100; /* @kind other */ --z-modal: 1000; /* @kind other */ --z-toast: 2000; /* @kind other */ /* ========================================================== MOTION · motion only explains a change of state. ========================================================== */ --motion-state: 120ms; /* @kind other */ --motion-disclose: 200ms; /* @kind other */ --motion-surface: 320ms; /* @kind other */ --ease-enter: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ --ease-reflow: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ /* ========================================================== DATA-VIS · the only legal chart colors (v7 chart language, settled 1 Sep). Roughly three colors per chart, one near-black. NEUTRAL MAGNITUDE RAMP · paper-20 → ink-100. Intensity only; quantity is position and size first. The current/selected step is always viz-5, the chart's one near-black. >5 bins means rebin. ========================================================== */ --viz-1: var(--paper-20); --viz-2: var(--ink-25); --viz-3: var(--ink-45); --viz-4: var(--ink-55); --viz-5: var(--ink-100); /* AGENT HUE · teal, THE agent/AI attribution color everywhere. Full attribution = filled (key-50/60); partial = key-60 outline, no fill. Nothing else is ever this teal outside interaction chrome (the governed key pairing). */ --viz-agent: var(--key-60); --viz-agent-fill: var(--key-20); /* AI RAMP · grey-to-teal, 0% → 60% agent share, one hue, five steps. One teal lineage: the ramp IS the key family; step zero is paper-10. */ --ai-1: var(--paper-10); --ai-2: var(--key-20); --ai-3: var(--key-50); --ai-4: var(--key-60); --ai-5: var(--key-70); /* TIMELINE LANGUAGE · making above the axis (charcoal PR ticks + teal agent mountain), conversation below in gold, triggers as small downward neutral ticks. Open vs merged is opacity, not hue. */ --tl-tick: var(--ink-70); --tl-agent-fill: var(--key-50); --tl-convo-fill: var(--gold-20); --tl-convo-deep: var(--gold-50); --tl-trigger: var(--ink-45); /* CHART CHROME · capped light — never darker than data. */ --chart-track: var(--paper-10); --chart-grid: var(--paper-15); --chart-axis: var(--ink-45); /* VERDICT COLORS in charts · amber/coral only as worded states, never series colors, never decorative. No categorical palettes — a genuine category-hue need is a change request with a named role and owner. */ } /* ============================================================================ BREAKPOINTS · governed set. Custom properties cannot be used in media queries; these are the only permitted values. App chrome adds 900px (rail → drawer) in tokens/roles.css. 1040px two-column layouts collapse; sticky rails become inline indexes 900px app rail becomes a fixed 248px drawer (roles.css scaffolding) 820px multi-column grids collapse to one; label/value pairs stack 640px display register steps down; card padding tightens ========================================================================= */ @media (max-width: 640px) { :root { --size-masthead: 32px; --lh-masthead: 1.1; /* @kind other */ --size-head: 24px; --lh-head: 1.2; /* @kind other */ --size-title: 20px; --size-lede: 17px; --size-read: 16px; --card-pad: var(--space-base); --space-chapter: var(--space-section); } } /* ============================================================================ ACCESSIBILITY AND OUTPUT ========================================================================= */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } :where(a, button, [tabindex]):focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } @media (pointer: coarse) { :where(a, button, [role="button"]) { min-height: var(--touch-min); } } @media print { :root { --shadow-raised: none; } body { background: #fff; } } /* ============================================================================ DELIBERATELY ABSENT OR RETIRED (v0.4) ---------------------------------------------------------------------------- · Dark surface. Still out of scope for v1. · Slate as a hue, the clay editorial kicker, the cool ink ladder and #FBFAF6 paper, amber-60/-50, gold-60, the cohort encoding exception, and the speculative component palette — all retired per the v7 guide changelog (guidelines/Style Guide.dc.html §changelog). · Olive verdict family — parked, not deleted; compat values above. ========================================================================= */