Delete design_system

design_system/readme.md

@@ -1,174 +0,0 @@
-# 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

@@ -1,13 +0,0 @@
-/* ============================================================
-   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

@@ -1,58 +0,0 @@
-/* ============================================================
-   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

@@ -1,148 +0,0 @@
-/* ============================================================
-   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

@@ -1,35 +0,0 @@
-/* ============================================================
-   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

@@ -1,12 +0,0 @@
-/* ============================================================
-   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

@@ -1,46 +0,0 @@
-/* ============================================================
-   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

@@ -1,61 +0,0 @@
-/* ============================================================
-   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);
-}