@aexol/spectral 0.9.270 → 0.9.272

package/dist/designer/data/systems/github/DESIGN.md

@@ -1,155 +0,0 @@
-# Design System Inspired by GitHub
-
-> Category: Developer Tools
-> Code-forward platform. Functional density, blue-on-white precision, Primer foundations.
-
-## 1. Visual Theme & Atmosphere
-
-GitHub's surface is engineered, not decorated. Every pixel announces a stance: this is a tool for people who care about diffs, builds, and pull requests. The page background is a clean `#ffffff` (light) or `#0d1117` (dark), with content arranged on dense rectangular panes separated by hairline borders rather than negative space. Information density is the brand — list rows, code lines, repository headers, and notification cards are all packed close together so a power user can scan a hundred items without scrolling.
-
-The signature accents are the **Primer blue** (`#0969da`) for links and primary actions, and **GitHub green** (`#1a7f37`) for merged states, success, and the merge button itself. Both feel slightly muted compared to consumer-product blues and greens — saturated enough to read against the dense gray text, restrained enough to disappear into the background when several appear in one viewport.
-
-Typography uses the **system-ui** stack across the entire product so text renders crisply on every OS, paired with **SFMono / Menlo / Consolas** for code. There is no editorial display font; GitHub's voice is the voice of the system you're already on.
-
-**Key Characteristics:**
-- True white canvas (`#ffffff`) or deep navy-black (`#0d1117`) — no warmth, no tint
-- Hairline gray borders (`#d0d7de`) define every pane and panel
-- Primer blue (`#0969da`) for links/primary; GitHub green (`#1a7f37`) for success/merge
-- system-ui for prose; SFMono for code — no custom typeface
-- Dense list rows with minimal padding; whitespace is rare
-- Octicon iconography at 16px / 24px — single-stroke, geometric, consistent
-- Pill-shaped status badges with strong color semantics
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Canvas Default** (`#ffffff`): Primary page background, light theme.
-- **Canvas Subtle** (`#f6f8fa`): Secondary surface, sidebar, input background, header strip.
-- **Canvas Inset** (`#eaeef2`): Code block background, deep-inset surface.
-- **Fg Default** (`#1f2328`): Primary text, headlines, ink.
-- **Fg Muted** (`#656d76`): Secondary text, captions, file paths.
-
-### Brand Accent
-- **Primer Blue** (`#0969da`): Links, primary CTAs, focus ring base — the universal interactive color.
-- **Primer Blue Hover** (`#0550ae`): Hover/pressed for primary blue.
-- **Accent Subtle** (`#ddf4ff`): Soft blue surface for callouts, info banners.
-
-### Semantic
-- **Success / Merge Green** (`#1a7f37`): Merged PRs, success badges, merge button.
-- **Success Subtle** (`#dafbe1`): Success surface tint.
-- **Open Green** (`#1a7f37`): "Open" issue/PR state.
-- **Closed / Danger Red** (`#cf222e`): Closed PRs, destructive action, validation error.
-- **Danger Subtle** (`#ffebe9`): Error banner surface.
-- **Attention / Warning Yellow** (`#9a6700`): Warning text on amber surface.
-- **Attention Subtle** (`#fff8c5`): Warning banner surface.
-- **Done Purple** (`#8250df`): Merged-and-archived, "done" state, premium badge.
-- **Sponsor Pink** (`#bf3989`): Sponsors heart, GitHub sponsors brand.
-
-### Border & Divider
-- **Border Default** (`#d0d7de`): Standard hairline border, panel outline.
-- **Border Muted** (`#d8dee4`): Inner dividers within a panel.
-- **Border Subtle** (`#eaeef2`): Faint table row dividers.
-
-### Dark Theme
-- **Dark Canvas** (`#0d1117`): Dark page background.
-- **Dark Surface** (`#161b22`): Sidebar, header, secondary surface.
-- **Dark Border** (`#30363d`): Standard dark-mode border.
-- **Dark Fg** (`#e6edf3`): Primary text on dark.
-
-## 3. Typography Rules
-
-### Font Family
-- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
-- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
-- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Repo header, marketing hero |
-| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Page heading |
-| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Section heading |
-| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sub-section, panel header |
-| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Default text size — not 16px |
-| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Captions, file metadata |
-| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Code blocks, diff |
-| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Inline `code` spans |
-
-### Principles
-- **14px body, not 16px**: GitHub's prose density is its identity. The product reads at 14px to fit more rows in a viewport.
-- **Weight binary**: 400 for everything by default; 600 for headlines and emphasis. No 500, no 700.
-- **System fonts always**: never load a webfont for chrome — text must render instantly on slow connections.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary (Green)**
-- Background: `#1f883d`
-- Text: `#ffffff`
-- Border: 1px solid `rgba(31, 35, 40, 0.15)`
-- Padding: 5px 16px
-- Radius: 6px
-- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
-- Hover: background `#1a7f37`
-- Use: "Create repository", "Merge pull request"
-
-**Default**
-- Background: `#f6f8fa`
-- Text: `#1f2328`
-- Border: 1px solid `#d0d7de`
-- Padding: 5px 16px
-- Radius: 6px
-- Hover: background `#f3f4f6`, border `#d0d7de`
-
-**Outline (Blue Link Style)**
-- Background: `#ffffff`
-- Text: `#0969da`
-- Border: 1px solid `#d0d7de`
-- Hover: background `#0969da`, text `#ffffff`
-
-**Danger**
-- Background: `#ffffff`
-- Text: `#cf222e`
-- Border: 1px solid `#d0d7de`
-- Hover: background `#a40e26`, text `#ffffff`, border `#a40e26`
-
-### Cards / Boxes
-- Background: `#ffffff`
-- Border: 1px solid `#d0d7de`
-- Radius: 6px
-- Padding: 16px (header) + 16px (body)
-- Header has a `#f6f8fa` strip with bottom border.
-
-### Inputs
-- Background: `#ffffff`
-- Border: 1px solid `#d0d7de`
-- Radius: 6px
-- Padding: 5px 12px
-- Focus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
-
-### Status Pills (Issue / PR)
-- **Open**: background `#1a7f37`, text white, padding 4px 10px, radius 9999px.
-- **Closed**: background `#cf222e`, text white.
-- **Merged**: background `#8250df`, text white.
-- **Draft**: background `#6e7781`, text white.
-
-### Labels (Tags on Issues/PRs)
-- Padding: 0 7px
-- Radius: 9999px
-- Font: 12px / 500
-- Background and text are programmatic (label color → text computed for contrast).
-
-## 5. Spacing & Layout
-
-- **Base unit**: 4px. Spacing scale: 4, 8, 12, 16, 24, 32, 40, 48.
-- **Page max-width**: 1280px (`Container-xl`).
-- **Sidebar**: 296px on desktop, collapses below 1012px.
-- **Row padding**: 16px horizontal, 12px vertical (lists are dense by design).
-
-## 6. Motion
-
-- **Duration**: 80ms for hover; 200ms for menu/popover open.
-- **Easing**: `ease-out` for opens, `ease-in` for closes.
-- **Avoided**: page-load animation, parallax, persistent micro-interactions. Things appear; they do not perform.

package/dist/designer/data/systems/github/components.html

@@ -1,383 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>GitHub — reference components</title>
-    <meta
-      name="description"
-      content="Reference fixture for design-systems/github. Every visible
-        value comes from tokens.css. GitHub's signature moves: true white
-        canvas, hairline borders (#d0d7de), Primer blue CTAs, GitHub green
-        for success/merge, system-ui fonts, 14px body density."
-    />
-
-    <style>
-      :root {
-        --bg:           #ffffff;
-        --surface:      #f6f8fa;
-        --surface-warm: var(--surface);
-
-        --fg:   #1f2328;
-        --fg-2: #1f2328;
-        --muted: #656d76;
-        --meta:  #656d76;
-
-        --border:      #d0d7de;
-        --border-soft: #d8dee4;
-
-        --accent:        #0969da;
-        --accent-on:     #ffffff;
-        --accent-hover:  #0550ae;
-        --accent-active: color-mix(in oklab, var(--accent), black 14%);
-
-        --success: #1a7f37;
-        --warn:    #9a6700;
-        --danger:  #cf222e;
-
-        --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-        --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-        --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-
-        --text-xs:   12px;
-        --text-sm:   14px;
-        --text-base: 14px;
-        --text-lg:   16px;
-        --text-xl:   20px;
-        --text-2xl:  24px;
-        --text-3xl:  28px;
-        --text-4xl:  32px;
-
-        --leading-body:     1.5;
-        --leading-tight:    1.25;
-        --tracking-display: -0.01em;
-
-        --space-1:  4px;
-        --space-2:  8px;
-        --space-3:  12px;
-        --space-4:  16px;
-        --space-5:  20px;
-        --space-6:  24px;
-        --space-8:  32px;
-        --space-12: 48px;
-
-        --section-y-desktop: 64px;
-        --section-y-tablet:  48px;
-        --section-y-phone:   32px;
-
-        --radius-sm:   6px;
-        --radius-md:   6px;
-        --radius-lg:   12px;
-        --radius-pill: 9999px;
-
-        --elev-flat:   none;
-        --elev-ring:   0 0 0 1px var(--border);
-        --elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
-
-        --focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
-
-        --motion-fast:   80ms;
-        --motion-base:   200ms;
-        --ease-standard: ease-out;
-
-        --container-max:            1280px;
-        --container-gutter-desktop: 24px;
-        --container-gutter-tablet:  16px;
-        --container-gutter-phone:   16px;
-      }
-
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body { margin: 0; padding: 0; }
-      body {
-        background: var(--bg);
-        color: var(--fg);
-        font-family: var(--font-body);
-        font-size: var(--text-base);
-        line-height: var(--leading-body);
-        -webkit-font-smoothing: antialiased;
-      }
-
-      .container {
-        max-width: var(--container-max);
-        margin-inline: auto;
-        padding-inline: var(--container-gutter-desktop);
-      }
-      section { padding-block: var(--section-y-desktop); }
-      section + section { border-top: 1px solid var(--border); }
-      @media (max-width: 1023px) {
-        .container { padding-inline: var(--container-gutter-tablet); }
-        section { padding-block: var(--section-y-tablet); }
-      }
-      @media (max-width: 639px) {
-        .container { padding-inline: var(--container-gutter-phone); }
-        section { padding-block: var(--section-y-phone); }
-      }
-
-      /* ─── Typography ─────────────────────────── */
-      h1, h2, h3 {
-        font-family: var(--font-display);
-        font-weight: 600;
-        margin: 0;
-        line-height: var(--leading-tight);
-      }
-      h1 {
-        font-size: var(--text-4xl);
-        letter-spacing: var(--tracking-display);
-      }
-      h2 {
-        font-size: var(--text-xl);
-        /* 20px section heading: line-height 1.25, normal tracking. */
-      }
-      h3 {
-        font-size: var(--text-lg);
-        /* 16px sub-section/panel header: line-height 1.25.
-           Overrides the shared --leading-tight set above. */
-      }
-      p { margin: 0; }
-      .body-muted { color: var(--muted); }
-      .body-sm { font-size: var(--text-sm); }
-      .body-xs { font-size: var(--text-xs); }
-      .eyebrow {
-        font-size: var(--text-xs);
-        font-weight: 600;
-        color: var(--muted);
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-      }
-      code {
-        font-family: var(--font-mono);
-        font-size: 0.85em;
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-sm);
-        padding: 1px 4px;
-      }
-      .stack-3 > * + * { margin-block-start: var(--space-3); }
-      .stack-4 > * + * { margin-block-start: var(--space-4); }
-
-      /* ─── Buttons ────────────────────────────── */
-      .btn {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--space-2);
-        padding: 5px 16px;
-        border-radius: var(--radius-sm);
-        font-family: var(--font-body);
-        font-size: var(--text-sm);
-        font-weight: 400;
-        line-height: 1.5;
-        cursor: pointer;
-        border: 1px solid transparent;
-        transition: background-color var(--motion-fast) var(--ease-standard),
-                    border-color var(--motion-fast) var(--ease-standard);
-        text-decoration: none;
-      }
-      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
-      .btn-primary {
-        background: #1f883d;
-        color: #ffffff;
-        border-color: rgba(31, 35, 40, 0.15);
-        box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1);
-        font-weight: 500;
-      }
-      .btn-primary:hover { background: var(--success); }
-      .btn-default {
-        background: var(--surface);
-        color: var(--fg);
-        border-color: var(--border);
-      }
-      .btn-default:hover { background: #f3f4f6; }
-      .btn-outline {
-        background: var(--bg);
-        color: var(--accent);
-        border-color: var(--border);
-      }
-      .btn-outline:hover { background: var(--accent); color: white; }
-
-      /* ─── Status pills ───────────────────────── */
-      .status-pill {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--space-1);
-        padding: 4px 10px;
-        border-radius: var(--radius-pill);
-        font-size: var(--text-xs);
-        font-weight: 500;
-        color: white;
-        line-height: 1;
-      }
-      .status-open    { background: #1a7f37; }
-      .status-closed  { background: #cf222e; }
-      .status-merged  { background: #8250df; }
-      .status-draft   { background: #6e7781; }
-
-      /* ─── Box / Card ─────────────────────────── */
-      .box {
-        border: 1px solid var(--border);
-        border-radius: var(--radius-sm);
-        overflow: hidden;
-      }
-      .box-header {
-        background: var(--surface);
-        border-bottom: 1px solid var(--border);
-        padding: var(--space-3) var(--space-4);
-        font-weight: 600;
-        font-size: var(--text-sm);
-      }
-      .box-body { padding: var(--space-4); }
-
-      /* ─── Inputs ─────────────────────────────── */
-      .field { display: flex; flex-direction: column; gap: var(--space-2); }
-      .field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
-      .field input {
-        background: var(--bg);
-        color: var(--fg);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-sm);
-        padding: 5px 12px;
-        font-family: var(--font-body);
-        font-size: var(--text-sm);
-        outline: none;
-        transition: border-color var(--motion-fast) var(--ease-standard),
-                    box-shadow var(--motion-fast) var(--ease-standard);
-      }
-      .field input::placeholder { color: var(--muted); }
-      .field input:focus {
-        border-color: var(--accent);
-        box-shadow: var(--focus-ring);
-      }
-
-      /* ─── Layout ─────────────────────────────── */
-      .hero-grid {
-        display: grid;
-        grid-template-columns: 1.2fr 1fr;
-        gap: var(--space-8);
-        align-items: start;
-      }
-      @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
-      .features-grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: var(--space-4);
-      }
-      @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
-      @media (max-width: 639px)  { .features-grid { grid-template-columns: 1fr; } }
-      .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-4); flex-wrap: wrap; }
-      .icon { width: 16px; height: 16px; flex-shrink: 0; }
-    </style>
-  </head>
-  <body>
-    <main class="container">
-      <!-- HERO -->
-      <section data-od-id="hero">
-        <div class="hero-grid">
-          <div class="stack-4">
-            <p class="eyebrow">Reference fixture · github</p>
-            <h1>Where the world builds software.</h1>
-            <p class="body-muted" style="max-width:48ch;font-size:var(--text-lg);line-height:1.5;margin-top:var(--space-3)">
-              Millions of developers and companies build, ship, and maintain
-              their software on GitHub. Every value below comes from tokens.css
-              — no raw hex, no off-token type.
-            </p>
-            <div class="hero-actions">
-              <a href="./tokens.css" class="btn btn-primary">Sign up for free</a>
-              <a href="./DESIGN.md" class="btn btn-default">Read the spec</a>
-            </div>
-          </div>
-
-          <aside>
-            <div class="box">
-              <div class="box-header">open-design / design-systems</div>
-              <div class="box-body stack-3">
-                <div style="display:flex;align-items:center;justify-content:space-between">
-                  <span class="body-sm" style="font-weight:600;color:var(--accent)">Pull requests</span>
-                  <span class="status-pill status-open">Open</span>
-                </div>
-                <div style="font-size:var(--text-xs);color:var(--muted)">
-                  #1652 · feat: add structured tokens for 5 brands
-                </div>
-                <div style="font-size:var(--text-xs);color:var(--muted)">
-                  #1653 · feat: add batch 2 token fixtures
-                </div>
-                <div style="display:flex;gap:var(--space-2);margin-top:var(--space-2)">
-                  <span class="status-pill status-merged">Merged</span>
-                  <span class="status-pill status-draft">Draft</span>
-                  <span class="status-pill status-closed">Closed</span>
-                </div>
-              </div>
-            </div>
-          </aside>
-        </div>
-      </section>
-
-      <!-- FEATURES -->
-      <section data-od-id="features">
-        <div class="stack-3">
-          <p class="eyebrow">What this fixture exercises</p>
-          <h2>Dense, functional, system-native.</h2>
-        </div>
-
-        <div class="features-grid" style="margin-block-start:var(--space-6)">
-          <article class="box stack-3">
-            <div class="box-header">14px body</div>
-            <div class="box-body">
-              <p class="body-sm body-muted">
-                Not 16px — GitHub's prose density is its identity. 14px base
-                fits more content per viewport. system-ui renders instantly on
-                every OS with zero webfont load.
-              </p>
-            </div>
-          </article>
-          <article class="box stack-3">
-            <div class="box-header">Hairline borders</div>
-            <div class="box-body">
-              <p class="body-sm body-muted">
-                <code>#d0d7de</code> — every pane, panel, and card. Structure
-                communicated by stroke, not shadow. Density without visual noise.
-              </p>
-            </div>
-          </article>
-          <article class="box stack-3">
-            <div class="box-header">Primer blue + green</div>
-            <div class="box-body">
-              <p class="body-sm body-muted">
-                <code>#0969da</code> for all interactive affordances.
-                <code>#1a7f37</code> exclusively for success/merge states.
-                Both restrained — never decorative.
-              </p>
-            </div>
-          </article>
-        </div>
-      </section>
-
-      <!-- FORM -->
-      <section data-od-id="form">
-        <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
-          <div class="stack-4">
-            <p class="eyebrow">Form components</p>
-            <h2>Primer form inputs.</h2>
-            <p class="body-muted" style="max-width:44ch">
-              Focus: border <code>#0969da</code> + <code>0 0 0 3px rgba(9,105,218,0.3)</code>.
-              5px 12px padding. 6px radius. Weight 600 label.
-            </p>
-          </div>
-          <form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
-                onsubmit="event.preventDefault()">
-            <div class="field">
-              <label for="email">Email address</label>
-              <input id="email" type="email" placeholder="you@example.com" />
-            </div>
-            <div class="field">
-              <label for="repo">Repository name</label>
-              <input id="repo" type="text" placeholder="my-project" />
-            </div>
-            <div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
-              <button type="submit" class="btn btn-primary">Create repository</button>
-              <button type="button" class="btn btn-default">Cancel</button>
-            </div>
-          </form>
-        </div>
-      </section>
-    </main>
-  </body>
-</html>

package/dist/designer/data/systems/github/tokens.css

@@ -1,125 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * design-systems/github/tokens.css
- *
- * Structured token bindings for the "GitHub" brand — Primer foundations,
- * functional density, blue-on-white precision.
- *
- * Brand identity in three sentences:
- *   1. True white canvas (#ffffff) with a clean canvas-subtle (#f6f8fa)
- *      secondary surface; hairline borders (#d0d7de) define every pane
- *      — density over decoration, information over aesthetics.
- *   2. System-ui stack throughout — no custom webfont; type renders at
- *      instant on every OS; 14px body (not 16px) is the identity.
- *   3. Primer blue (#0969da) for all interactive affordances; GitHub
- *      green (#1a7f37) reserved for success/merge states only.
- *
- * Schema decisions:
- *   - --bg: #ffffff; --surface: #f6f8fa (canvas-subtle).
- *   - --surface-warm aliases --surface (no warm tier in Primer).
- *   - --fg: #1f2328 (fg-default); --muted: #656d76 (fg-muted).
- *   - --border: #d0d7de (1px hairline — the structural backbone).
- *   - --accent: #0969da (Primer Blue); --accent-hover: #0550ae.
- *   - --success bound to GitHub green (#1a7f37) — merge / open state.
- *   - --tracking-display: -0.01em (only display-size headings use it).
- *   - --text-base: 14px (the 14px body IS GitHub's product density).
- *   - --radius-sm: 6px (universal Primer radius for buttons/inputs).
- * ─────────────────────────────────────────────────────────────────── */
-
-:root {
-  /* ─── Surface ──────────────────────────────────────────────────── */
-  --bg:           #ffffff;
-  --surface:      #f6f8fa;              /* canvas-subtle — sidebar, input bg */
-  --surface-warm: var(--surface);       /* Primer has no warm tier */
-
-  /* ─── Foreground ───────────────────────────────────────────────── */
-  --fg:   #1f2328;                      /* fg-default — ink */
-  --fg-2: #1f2328;                      /* same ink; no B-slot split in Primer */
-  --muted: #656d76;                     /* fg-muted — captions, file paths */
-  --meta:  #656d76;                     /* same muted tier */
-
-  /* ─── Border ───────────────────────────────────────────────────── */
-  --border:      #d0d7de;              /* border-default — hairline structural */
-  --border-soft: #d8dee4;             /* border-muted — inner panel dividers */
-
-  /* ─── Accent ───────────────────────────────────────────────────── */
-  --accent:        #0969da;            /* Primer Blue — links, primary CTAs */
-  --accent-on:     #ffffff;
-  --accent-hover:  #0550ae;            /* darker pressed state */
-  --accent-active: color-mix(in oklab, var(--accent), black 14%);
-
-  /* ─── Semantic ─────────────────────────────────────────────────── */
-  --success: #1a7f37;                  /* GitHub green — merge, open, success */
-  --warn:    #9a6700;                  /* attention amber text */
-  --danger:  #cf222e;                  /* closed / destructive red */
-
-  /* ─── Typography ───────────────────────────────────────────────── */
-  /* System fonts only — no webfonts load in GitHub. */
-  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-
-  /* Type scale — DESIGN.md §Typography.
-   * GitHub's prose density: 14px body (not 16px). Display sits at 32px.
-   * h2 (20px) and h3 (16px) collapse close together for density. */
-  --text-xs:   12px;                   /* body-small — captions, metadata */
-  --text-sm:   14px;                   /* body — default UI (GitHub's base) */
-  --text-base: 14px;                   /* body baseline = 14px for density */
-  --text-lg:   16px;                   /* h3 / panel header */
-  --text-xl:   20px;                   /* h2 — section heading */
-  --text-2xl:  24px;                   /* h1 — page heading */
-  --text-3xl:  28px;                   /* subpage display */
-  --text-4xl:  32px;                   /* display — repo header / hero */
-
-  /* Leading + tracking.
-   * GitHub uses 1.25 for headings (tight-but-readable), 1.5 for body.
-   * Only display gets the -0.01em tracking. */
-  --leading-body:     1.5;
-  --leading-tight:    1.25;
-  --tracking-display: -0.01em;
-
-  /* ─── Spacing ──────────────────────────────────────────────────── */
-  /* 4px base grid — Primer spacing. Row padding 16px h, 12px v. */
-  --space-1:  4px;
-  --space-2:  8px;
-  --space-3:  12px;
-  --space-4:  16px;
-  --space-5:  20px;
-  --space-6:  24px;
-  --space-8:  32px;
-  --space-12: 48px;
-
-  /* Section rhythm — GitHub marketing pages. */
-  --section-y-desktop: 64px;
-  --section-y-tablet:  48px;
-  --section-y-phone:   32px;
-
-  /* ─── Radius ───────────────────────────────────────────────────── */
-  /* 6px is the universal Primer radius for all interactive elements. */
-  --radius-sm:   6px;
-  --radius-md:   6px;
-  --radius-lg:   12px;
-  --radius-pill: 9999px;
-
-  /* ─── Elevation ────────────────────────────────────────────────── */
-  /* GitHub uses hairline borders, not shadows, as the primary depth
-     signal. --elev-raised is a whisper for the rare floating element. */
-  --elev-flat:   none;
-  --elev-ring:   0 0 0 1px var(--border);
-  --elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
-
-  /* ─── Focus ────────────────────────────────────────────────────── */
-  /* Primer focus: 3px rgba ring on the accent color. */
-  --focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
-
-  /* ─── Motion ───────────────────────────────────────────────────── */
-  /* GitHub avoids animation. 80ms hover, 200ms open — short and purposeful. */
-  --motion-fast:   80ms;
-  --motion-base:   200ms;
-  --ease-standard: ease-out;
-
-  /* ─── Layout ───────────────────────────────────────────────────── */
-  --container-max:            1280px;
-  --container-gutter-desktop: 24px;
-  --container-gutter-tablet:  16px;
-  --container-gutter-phone:   16px;
-}