Upload 8 files

design_system/readme.md

@@ -0,0 +1,174 @@
+# Chan Compass · Spectrum 2 Design System
+
+A design system for **Chan Compass · US** — a multi-timeframe 缠论 (Chan theory)
+stock-signal engine — rendered in **Adobe Spectrum 2**, Adobe's design language.
+It exists to give design agents a single, accurate source of truth for building
+beautiful, on-brand Chan Compass interfaces (the live Gradio app, mocks, slides,
+marketing) without re-deriving Spectrum 2 every time.
+
+> **Spectrum 2** is Adobe's open design system. This project recreates its
+> visual foundations (color, type, spacing, elevation, motion) and a set of
+> React components, then applies them to the Chan Compass product surfaces.
+
+---
+
+## What the product is
+
+Chan Compass is an **educational US-equities signal tool** that runs entirely
+locally. It has six surfaces (Gradio tabs):
+
+| Surface | What it does |
+|---|---|
+| **Signals** | Runs the Chan engine over a ticker pool; returns next-session **BUY / SELL / HOLD / WAIT / WATCH** with confidence, suggested weight, stop, and a full multi-timeframe ruling chain (monthly → weekly → daily → 60m → 30m → 15m → 5m nested-interval confirmation). |
+| **Sector Rotation** | Where capital is flowing across the 11 SPDR sector ETFs; flow proxy = change % × dollar volume, plus relative strength vs SPY, over 1 / 5 / 20 days. |
+| **Watchlist News** | Checks **today's** news per holding; pushes an AI brief only when news exists. |
+| **Auto Research** | A local multi-step agent: PLAN → 5 evidence tools → sectioned report, with a saved JSON trace. |
+| **Automation** | Daily pipeline at 18:10 America/New_York. |
+| **Model** | Loads Qwen3 GGUF weights through llama.cpp — everything runs locally, nothing leaves the machine. |
+
+The AI is a **local sub-agent pool** (Qwen3-1.7B translator/narrator + a deeper
+analyst), served via `llama-cpp-python`. Data comes from Yahoo Finance.
+
+## Sources this system was built from
+
+- **Codebase:** `chan-compass-us-v1.7/` (attached) — a Gradio app (`app.py`)
+  plus the Chan engine (`chan_engine.py`, `chan_multilevel.py`, `chan_enhance.py`),
+  signal/rotation/news/research/automation modules. The app already ships an
+  *approximation* of Spectrum 2 in Gradio CSS; this system replaces it with the
+  real thing. The product deploys as a **Hugging Face Gradio Space**.
+- **Design language — Adobe Spectrum 2 / React Spectrum:**
+  <https://github.com/adobe/react-spectrum> (the `@react-spectrum/s2` package —
+  `style/spectrum-theme.ts`, `style/tokens.ts` — was read for exact spacing,
+  radii, easing, weights and the type scale). Token values were cross-checked
+  against <https://spectrum.adobe.com/page/color-palette/>.
+  Explore that repo to go deeper on component behavior and accessibility.
+
+> **Deploying the live app?** See `gradio/` — a ready-to-paste Spectrum 2 Gradio
+> theme (`theme.py` = `THEME` + `CSS`), a guaranteed-green standalone demo Space,
+> and an HF deploy checklist (`gradio/INTEGRATE.md`).
+
+---
+
+## Content fundamentals
+
+How Chan Compass writes. Match this voice in any UI copy.
+
+- **Voice:** expert, terse, instrument-panel. Copy reads like a trading desk
+  tool, not a consumer app. Short noun phrases over sentences: *"Tomorrow's
+  plan"*, *"Where capital is flowing"*, *"Buy/sell zone"*.
+- **Person:** mostly impersonal/imperative. Buttons are verbs — *"Run analysis"*,
+  *"Check today's news"*, *"Load model"*. When it addresses the user it's second
+  person and possessive — *"My holdings"*, *"your ticker pool"*.
+- **Casing:** **Sentence case** everywhere — labels, buttons, headings
+  (*"Run analysis"*, not "Run Analysis"). Ticker symbols and ETF codes are
+  **UPPERCASE monospace** (NVDA, XLK). Signal verbs render UPPERCASE in pills
+  (BUY/SELL/HOLD).
+- **Bilingual register:** the engine's internal ruling chain is **Chinese**
+  (缠论 terms: 中枢, 背驰, 区间套, 买卖点 B1/B2/B3/S1/S2/S3); user-facing summaries
+  are **English**, produced by the local translator sub-agent. Keep Chinese for
+  authentic engine output; keep English for everything the user reads first.
+- **Numbers carry meaning, not decoration.** Every percent, confidence score,
+  weight and stop price is real signal. No vanity stats. Percentages are signed
+  (+2.43% / −3.08%) and color-coded.
+- **Honesty & disclaimers:** always frames itself as *"educational tool — not
+  investment advice."* States its data limits plainly (*"Yahoo only keeps 7 days
+  of 1-minute bars, so the 1m level is skipped"*). No hype, no guarantees.
+- **AI is labeled.** Anything model-generated is prefixed with the sub-agent and
+  model — *"🤖 Translator sub-agent (Qwen3-1.7B · llama.cpp)"* — and notes
+  latency honestly (*"first words in ~5–15s"*).
+- **Emoji:** the live app uses tab emoji (📈 🔄 📰 🧪 ⏰ 🧠) and the 🧭 brand mark.
+  In the **polished design system we prefer Spectrum line icons** for UI chrome
+  and reserve emoji for the brand mark / casual chips. Don't scatter emoji into
+  data or buttons.
+
+---
+
+## Visual foundations
+
+The Spectrum 2 look, as applied here.
+
+- **Color vibe:** calm, neutral, **light-first**. A near-white canvas
+  (`gray-50 #F8F8F8`) with **white cards** (`gray-25`) and crisp hairline borders
+  (`gray-100 #E6E6E6`). One disciplined accent — **Spectrum blue `#0265DC`** —
+  carries all primary action and selection. Color is otherwise **semantic only**:
+  green = positive/BUY, red = negative/SELL, blue = HOLD/accent, orange = WATCH/notice.
+  No decorative color, no rainbow dashboards.
+- **Type:** **Source Sans 3** for UI and headings (open stand-in for the
+  proprietary Adobe Clean), **Source Serif 4** for editorial/report prose,
+  **Source Code Pro** for tickers, prices and logs. Modular scale, ratio **1.125**,
+  **14px UI base**. Headings are **bold (700)** and slightly tightened
+  (`-0.015em`); body is **regular (400)** at a spacious **1.5** line height.
+- **Spacing:** an **8px base rhythm** (2 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64).
+  Generous padding inside cards (24px), comfortable 24–32px gaps between regions.
+- **Backgrounds:** **flat, layered surfaces** — no photographic imagery, no
+  full-bleed art, no repeating textures. Depth comes from Spectrum's
+  *background layering* (canvas → card → subtle well), not from shadows alone.
+  The **only gradient** is a small one on the 🧭 brand mark
+  (blue → indigo → purple), echoing the app's original hero; the rest is solid.
+- **Corner radii:** soft but not pill-everything — **16px cards**, **8px inputs
+  & square buttons**, **4px chips**, and **fully-rounded (pill) action buttons** —
+  the single most recognizable Spectrum 2 signature here.
+- **Elevation:** **soft, low-spread** drop shadows (`raised` = `0 1px 3px
+  rgba(0,0,0,.06)`), never heavy. Cards sit barely off the canvas. The AI panel
+  gets a faint **accent-tinted glow** instead of a darker shadow.
+- **Borders:** 1px hairlines for structure; inputs use a **2px** border that
+  turns accent-blue on focus. Tabs sit on a 2px track and the selected tab draws
+  a 2px accent underline.
+- **Hover / press:** Spectrum's **one-stop-darker** rule — hover bumps a button
+  one color stop darker (`accent → accent-hover`), press goes one more and adds a
+  **subtle `scale(.98)`**. Quiet/ghost controls fill with `gray-75` on hover.
+  Rows highlight to `gray-75` on hover, `blue-100` when selected.
+- **Focus:** a **2px solid accent ring with 2px offset** on every interactive
+  element — visible, never removed.
+- **Motion:** quick and restrained. Durations **130–220ms**; the house easing is
+  Spectrum's `cubic-bezier(0.45, 0, 0.4, 1)` (with `ease-out` for entrances).
+  Fades and one-stop color shifts; **no bounces**, one tasteful pulse for live
+  status and the running pipeline step. Respect `prefers-reduced-motion`.
+- **Transparency / blur:** used sparingly — not a glassmorphism system. Surfaces
+  are opaque; selection tints use solid subtle fills (`blue-100`), not alpha.
+- **Cards:** white surface, 16px radius, 1px hairline border, soft raised shadow,
+  optional header with title + subtitle + a trailing action slot.
+
+---
+
+## Index — what's in this project
+
+**Foundations (root)**
+- `styles.css` — the single entry point consumers link (`@import`s only).
+- `tokens/` — `colors.css` · `typography.css` · `spacing.css` · `elevation.css`
+  · `fonts.css` · `base.css`. Primitives + semantic aliases.
+- `guidelines/` — foundation specimen cards (Colors, Type, Spacing) shown in the
+  Design System tab.
+
+**Components** (`components/<group>/` — React primitives, bundled to `window.<Namespace>`)
+- `actions/` — **Button** (pill, accent/secondary/negative/quiet)
+- `forms/` — **Field**, **Checkbox**, **Switch**
+- `status/` — **Badge**, **StatusLight**, **SignalBadge** (BUY/SELL/HOLD/WAIT/WATCH)
+- `containers/` — **Card**, **InlineAlert** (incl. the signature `ai` panel)
+- `navigation/` — **Tabs** (quiet tabs + accent underline)
+
+**UI kit** (`ui_kits/chan-compass/`)
+- `index.html` — full interactive Spectrum 2 recreation of the 6-tab app
+  (Signals, Rotation, Research, News, Model). Composes the components above.
+
+**Deploy bridge** (`gradio/`)
+- `theme.py` (`THEME` + `CSS`), standalone demo `app.py`, `requirements.txt`,
+  `README.md` (HF Space), `INTEGRATE.md` (port + deploy checklist).
+
+**Meta**
+- `SKILL.md` — makes this folder usable as an Agent Skill.
+
+---
+
+## Iconography
+
+See the **Iconography** section below and the `assets/` README. In short: Chan
+Compass has **no custom icon set** of its own — the live app leans on **emoji**
+for tab affordances and the **🧭 compass** as its brand mark. Spectrum's own
+**workflow-icons** are the canonical reference but aren't freely CDN-hosted, so
+this system substitutes **[Lucide](https://lucide.dev)** — clean 2px line icons
+whose weight and rounded joinery read as Spectrum-adjacent — loaded from CDN in
+the UI kit. **Substitution flagged.** If you license Adobe's Spectrum workflow
+icons, swap Lucide for them and the visual language tightens further.
+
+*Educational tool — not investment advice.*

design_system/styles.css

@@ -0,0 +1,13 @@
+/* ============================================================
+   Chan Compass · Spectrum 2 Design System
+   Global entry point — consumers link THIS one file.
+   Import order: fonts → primitives → semantics. Keep this file
+   as @import lines only.
+   ============================================================ */
+
+@import url('tokens/fonts.css');
+@import url('tokens/colors.css');
+@import url('tokens/typography.css');
+@import url('tokens/spacing.css');
+@import url('tokens/elevation.css');
+@import url('tokens/base.css');

design_system/tokens/base.css

@@ -0,0 +1,58 @@
+/* ============================================================
+   BASE — Chan Compass · Spectrum 2
+   Light, opinionated element defaults. Body uses the canvas
+   background and UI type. Helper classes for the few primitives
+   that aren't worth a React component.
+   ============================================================ */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--canvas);
+  color: var(--text-body);
+  font: var(--type-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4 {
+  margin: 0;
+  color: var(--text-heading);
+  letter-spacing: var(--letter-spacing-heading);
+  text-wrap: balance;
+}
+h1 { font: var(--type-h1); }
+h2 { font: var(--type-h2); }
+h3 { font: var(--type-h3); letter-spacing: 0; }
+h4 { font: var(--type-h4); letter-spacing: 0; }
+
+p { margin: 0; text-wrap: pretty; }
+
+a { color: var(--accent-text); text-decoration: none; }
+a:hover { text-decoration: underline; text-underline-offset: 2px; }
+
+code, kbd, samp { font-family: var(--font-code); font-size: 0.92em; }
+
+::selection { background: var(--accent-subtle); }
+
+:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+  border-radius: var(--radius-sm);
+}
+
+/* ---- Eyebrow / overline ---- */
+.s2-eyebrow {
+  font: var(--font-weight-bold) var(--font-size-50)/1.2 var(--font-sans);
+  letter-spacing: var(--letter-spacing-caps);
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+/* ---- Hairline divider ---- */
+.s2-divider {
+  border: none;
+  border-top: var(--border-width-100) solid var(--border-hairline);
+  margin: var(--space-300) 0;
+}

design_system/tokens/colors.css

@@ -0,0 +1,148 @@
+/* ============================================================
+   COLOR — Chan Compass · Spectrum 2
+   Two layers:
+     1. PRIMITIVES  — the raw Spectrum 2 scales (--s2-gray-100, --s2-blue-900…)
+     2. SEMANTICS   — purpose-named aliases the UI references (--text-body,
+                      --surface-card, --accent…)
+   Always consume semantics in components; reach for a primitive only
+   when no semantic fits. Light theme is the default; .s2-dark flips the
+   semantic layer (primitives are not re-pointed here for simplicity).
+   ============================================================ */
+
+:root {
+  /* ---- Gray (light) ---- */
+  --s2-gray-25:  #ffffff;
+  --s2-gray-50:  #f8f8f8;
+  --s2-gray-75:  #f3f3f3;
+  --s2-gray-100: #e6e6e6;
+  --s2-gray-200: #d5d5d5;
+  --s2-gray-300: #b1b1b1;
+  --s2-gray-400: #909090;
+  --s2-gray-500: #6d6d6d;
+  --s2-gray-600: #464646;
+  --s2-gray-700: #292929;
+  --s2-gray-800: #1b1b1b;
+  --s2-gray-900: #000000;
+
+  /* ---- Blue (accent family) ---- */
+  --s2-blue-100:  #e0f2ff;
+  --s2-blue-200:  #cae8ff;
+  --s2-blue-300:  #98cbfe;
+  --s2-blue-400:  #6fb7fb;
+  --s2-blue-500:  #4ba0ec;
+  --s2-blue-600:  #2c84e0;
+  --s2-blue-700:  #1473e6;
+  --s2-blue-800:  #0a6fd6;
+  --s2-blue-900:  #0265dc;   /* accent default */
+  --s2-blue-1000: #0054b6;   /* accent hover   */
+  --s2-blue-1100: #00418f;   /* accent down    */
+
+  /* ---- Green (positive) ---- */
+  --s2-green-100:  #ebf9ee;
+  --s2-green-400:  #6cc788;
+  --s2-green-700:  #15924a;
+  --s2-green-900:  #007a39;  /* positive default */
+  --s2-green-1000: #006d31;
+  --s2-green-1100: #00601f;
+
+  /* ---- Red (negative) ---- */
+  --s2-red-100:  #ffefef;
+  --s2-red-400:  #ff9b88;
+  --s2-red-700:  #e34850;
+  --s2-red-900:  #d7373f;    /* negative default */
+  --s2-red-1000: #c0272d;
+  --s2-red-1100: #a01a1f;
+
+  /* ---- Orange (notice) ---- */
+  --s2-orange-100:  #fdf0e1;
+  --s2-orange-400:  #f8af5a;
+  --s2-orange-700:  #cb6f10;
+  --s2-orange-900:  #b25309;  /* notice default */
+  --s2-orange-1000: #99490b;
+
+  /* ---- Indigo (informative accent / charts) ---- */
+  --s2-indigo-700: #5258e4;
+  --s2-indigo-900: #3d43d0;
+
+  /* ---- Purple (decorative / hero gradient stop) ---- */
+  --s2-purple-700: #8c42d6;
+  --s2-purple-900: #7326d3;
+
+  /* ============================================================
+     SEMANTIC ALIASES — what components actually reference
+     ============================================================ */
+
+  /* Surfaces & framing (Spectrum 2 background layering) */
+  --canvas:          var(--s2-gray-50);   /* app background        */
+  --surface-card:    var(--s2-gray-25);   /* cards, panels         */
+  --surface-elevated:var(--s2-gray-25);   /* popovers, menus       */
+  --surface-subtle:  var(--s2-gray-75);   /* table head, wells     */
+  --surface-sunken:  var(--s2-gray-75);   /* inset fields          */
+
+  /* Text */
+  --text-heading:    var(--s2-gray-800);
+  --text-body:       var(--s2-gray-700);
+  --text-secondary:  var(--s2-gray-600);
+  --text-muted:      var(--s2-gray-500);
+  --text-disabled:   var(--s2-gray-400);
+  --text-on-accent:  #ffffff;
+
+  /* Borders & dividers */
+  --border-hairline: var(--s2-gray-100);
+  --border-default:  var(--s2-gray-200);
+  --border-strong:   var(--s2-gray-300);
+  --border-field:    var(--s2-gray-300);
+
+  /* Accent (Spectrum blue) */
+  --accent:          var(--s2-blue-900);
+  --accent-hover:    var(--s2-blue-1000);
+  --accent-down:     var(--s2-blue-1100);
+  --accent-subtle:   var(--s2-blue-100);
+  --accent-text:     var(--s2-blue-1000);
+
+  /* Semantic status */
+  --positive:        var(--s2-green-900);
+  --positive-hover:  var(--s2-green-1000);
+  --positive-subtle: var(--s2-green-100);
+  --negative:        var(--s2-red-900);
+  --negative-hover:  var(--s2-red-1000);
+  --negative-subtle: var(--s2-red-100);
+  --notice:          var(--s2-orange-900);
+  --notice-subtle:   var(--s2-orange-100);
+  --informative:     var(--s2-blue-900);
+  --informative-subtle: var(--s2-blue-100);
+
+  /* Focus ring */
+  --focus-ring:      var(--s2-blue-900);
+
+  /* Market direction (this product's domain colors) */
+  --up:              var(--s2-green-900);   /* gains / BUY  */
+  --down:            var(--s2-red-900);     /* losses / SELL */
+  --flat:            var(--s2-gray-500);    /* HOLD / WAIT  */
+}
+
+/* ---- Dark theme: flip the semantic layer only ---- */
+.s2-dark {
+  --canvas:          #1d1d1d;
+  --surface-card:    #262626;
+  --surface-elevated:#2c2c2c;
+  --surface-subtle:  #222222;
+  --surface-sunken:  #1a1a1a;
+
+  --text-heading:    #f2f2f2;
+  --text-body:       #e0e0e0;
+  --text-secondary:  #b8b8b8;
+  --text-muted:      #8f8f8f;
+  --text-disabled:   #6a6a6a;
+
+  --border-hairline: #383838;
+  --border-default:  #4a4a4a;
+  --border-strong:   #5e5e5e;
+  --border-field:    #5e5e5e;
+
+  --accent:          #2680eb;
+  --accent-hover:    #4ba0ec;
+  --accent-down:     #6fb7fb;
+  --accent-subtle:   #1a3a5c;
+  --accent-text:     #6fb7fb;
+}

design_system/tokens/elevation.css

@@ -0,0 +1,35 @@
+/* ============================================================
+   ELEVATION & MOTION — Chan Compass · Spectrum 2
+   Soft, low-spread drop shadows; never heavy. Spectrum easing curves.
+   ============================================================ */
+
+:root {
+  /* ---- Drop shadows (Spectrum 2 elevation) ---- */
+  --shadow-flat:      none;
+  --shadow-raised:    0 1px 3px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
+  --shadow-elevated:  0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
+  --shadow-emphasized:0 6px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
+  --shadow-dragged:   0 12px 32px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.10);
+
+  /* Accent-tinted glow (used on AI / focused panels) */
+  --shadow-accent:    0 2px 12px rgba(2,101,220,.12);
+
+  /* ---- Focus ring ---- */
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+
+  /* ---- Motion ---- */
+  --ease-default: cubic-bezier(0.45, 0, 0.4, 1);  /* @kind other */
+  --ease-in:      cubic-bezier(0.5, 0, 1, 1);      /* @kind other */
+  --ease-out:     cubic-bezier(0, 0, 0.4, 1);      /* @kind other */
+  --ease-in-out:  cubic-bezier(0.45, 0, 0.4, 1);   /* @kind other */
+
+  --duration-fast:    130ms;  /* @kind other */
+  --duration-default: 160ms;  /* @kind other */
+  --duration-slow:    220ms;  /* @kind other */
+
+  --transition-default: all var(--duration-default) var(--ease-default);
+  --transition-colors:  color var(--duration-fast) var(--ease-default),
+                        background-color var(--duration-fast) var(--ease-default),
+                        border-color var(--duration-fast) var(--ease-default);
+}

design_system/tokens/fonts.css

@@ -0,0 +1,12 @@
+/* ============================================================
+   FONTS — Chan Compass · Spectrum 2
+   Adobe Clean (Spectrum's UI typeface) is proprietary, so this
+   system substitutes Adobe's own open-source families:
+     · Source Sans 3   → UI / headings   (stands in for Adobe Clean)
+     · Source Serif 4  → editorial serif (stands in for Adobe Clean Serif)
+     · Source Code Pro → mono / code     (Spectrum's real code font)
+   Loaded from Google Fonts. If you have licensed Adobe Clean,
+   swap the @font-face stack and the families resolve automatically.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=Source+Code+Pro:wght@400;500;600&display=swap');

design_system/tokens/spacing.css

@@ -0,0 +1,46 @@
+/* ============================================================
+   SPACING & SIZING — Chan Compass · Spectrum 2
+   Spectrum 2 spacing scale (px): 0 2 4 8 12 16 20 24 28 32 40 48 64 80 96.
+   8px is the base rhythm. Padding uses px; layout gaps reuse the same scale.
+   ============================================================ */
+
+:root {
+  --space-0:    0;
+  --space-50:   2px;
+  --space-75:   4px;
+  --space-100:  8px;    /* base unit */
+  --space-150:  12px;
+  --space-200:  16px;
+  --space-250:  20px;
+  --space-300:  24px;
+  --space-400:  32px;
+  --space-500:  40px;
+  --space-600:  48px;
+  --space-700:  64px;
+  --space-800:  80px;
+  --space-900:  96px;
+
+  /* ---- Corner radii (Spectrum 2) ---- */
+  --radius-none:    0;
+  --radius-sm:      4px;    /* chips, small controls   */
+  --radius-default: 8px;    /* inputs, buttons (square)*/
+  --radius-lg:      10px;   /* nested cards            */
+  --radius-xl:      16px;   /* cards, panels          */
+  --radius-2xl:     20px;   /* hero, large surfaces   */
+  --radius-full:    9999px; /* pills, avatars         */
+
+  /* ---- Border widths ---- */
+  --border-width-100: 1px;
+  --border-width-200: 2px;
+  --border-width-400: 4px;
+
+  /* ---- Control heights (medium scale) ---- */
+  --control-height-sm: 28px;
+  --control-height-md: 32px;
+  --control-height-lg: 40px;
+
+  /* ---- Layout ---- */
+  --container-max: 1280px;
+  --field-radius:  var(--radius-default);
+  --card-radius:   var(--radius-xl);
+}

design_system/tokens/typography.css

@@ -0,0 +1,61 @@
+/* ============================================================
+   TYPOGRAPHY — Chan Compass · Spectrum 2
+   Spectrum 2 desktop UI base = 14px, modular scale ratio 1.125.
+   Three families: sans (UI/headings), serif (editorial), code (mono).
+   ============================================================ */
+
+:root {
+  /* ---- Families ---- */
+  --font-sans: 'Source Sans 3', 'Adobe Clean', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-serif: 'Source Serif 4', 'Adobe Clean Serif', Georgia, 'Times New Roman', serif;
+  --font-code: 'Source Code Pro', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
+
+  /* ---- Type scale (ratio 1.125, base 14px) ---- */
+  --font-size-50:   11px;
+  --font-size-75:   12px;
+  --font-size-100:  14px;   /* UI base */
+  --font-size-200:  16px;
+  --font-size-300:  18px;
+  --font-size-400:  20px;
+  --font-size-500:  22px;
+  --font-size-600:  25px;
+  --font-size-700:  28px;
+  --font-size-800:  32px;
+  --font-size-900:  36px;
+  --font-size-1000: 40px;
+  --font-size-1100: 45px;
+  --font-size-1200: 50px;
+
+  /* ---- Weights (Source Sans 3 axis) ---- */
+  --font-weight-regular:  400;
+  --font-weight-medium:   500;
+  --font-weight-semibold: 600;
+  --font-weight-bold:     700;
+  --font-weight-black:    800;
+
+  /* ---- Line heights ---- */
+  --line-height-ui:      1.3;   /* UI components, tight        */
+  --line-height-heading: 1.15;  /* large display headings      */
+  --line-height-body:    1.5;   /* paragraphs, spacious        */
+  --line-height-code:    1.45;
+
+  /* ---- Letter spacing ---- */
+  --letter-spacing-heading: -0.015em;  /* Spectrum tightens large type */
+  --letter-spacing-ui:      0;
+  --letter-spacing-caps:    0.06em;     /* eyebrows / overlines         */
+
+  /* ============================================================
+     SEMANTIC TYPE ROLES
+     ============================================================ */
+  --type-display:  var(--font-weight-bold) var(--font-size-1000)/var(--line-height-heading) var(--font-sans);
+  --type-h1:       var(--font-weight-bold) var(--font-size-800)/var(--line-height-heading) var(--font-sans);
+  --type-h2:       var(--font-weight-bold) var(--font-size-600)/var(--line-height-heading) var(--font-sans);
+  --type-h3:       var(--font-weight-semibold) var(--font-size-400)/var(--line-height-ui) var(--font-sans);
+  --type-h4:       var(--font-weight-semibold) var(--font-size-300)/var(--line-height-ui) var(--font-sans);
+  --type-body-lg:  var(--font-weight-regular) var(--font-size-300)/var(--line-height-body) var(--font-sans);
+  --type-body:     var(--font-weight-regular) var(--font-size-100)/var(--line-height-body) var(--font-sans);
+  --type-ui:       var(--font-weight-regular) var(--font-size-100)/var(--line-height-ui) var(--font-sans);
+  --type-ui-bold:  var(--font-weight-semibold) var(--font-size-100)/var(--line-height-ui) var(--font-sans);
+  --type-detail:   var(--font-weight-regular) var(--font-size-75)/var(--line-height-ui) var(--font-sans);
+  --type-code:     var(--font-weight-regular) var(--font-size-75)/var(--line-height-code) var(--font-code);
+}