@aexol/spectral 0.9.270 → 0.9.272

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

@@ -1,353 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * design-systems/resend/tokens.css
- *
- * Structured token bindings for "Resend" — the developer-first email
- * API whose marketing surface treats a pure-black canvas like a
- * gallery wall and lights every container with a single, icy blue-
- * tinted hairline.
- *
- * Brand identity in three sentences:
- *   1. Void-black (#000000) canvas with near-white (#f0f0f0) ink —
- *      theatrical darkness; the page is the stage and content
- *      performs on it without competing chrome.
- *   2. Frost borders (rgba(214, 235, 253, 0.19)) replace gray borders
- *      everywhere — every divider, button, card, and tab is a thin
- *      icy line on the void; depth is by border luminance, not by
- *      blur shadows that cannot cast against pure black.
- *   3. ABC Favorit (geometric sans) for display headings with
- *      aggressive negative tracking, Inter for body and UI, Commit
- *      Mono for code — one accent at a time (here: Resend Orange
- *      #ff801f) so the chromatic moment lands hard against the gray.
- *
- * Brand-specific schema decisions (each one bends a schema convention
- * to match Resend's voice rather than the cross-brand default):
- *
- *   1. `--bg` and `--surface` both bind to `#000000`. DESIGN.md §7 is
- *      explicit: "Don't lighten the background above #000000 — the
- *      pure black void is non-negotiable." Cards on Resend do not
- *      lift via fill; they read by their frost border alone. Setting
- *      `--surface` to the same void as `--bg` honors that rule and
- *      forces every card-like component to express elevation through
- *      `--border` / `--elev-ring`, not through tinted backgrounds.
- *      `--surface-warm` aliases to `--surface` because the brand has
- *      no warm tier — there is no second background color anywhere.
- *
- *   2. `--border` is `rgba(214, 235, 253, 0.19)` — the literal
- *      "frost border" alpha named in DESIGN.md §1 as "the signature"
- *      of the entire system. Binding the slot to the alpha (not a
- *      solid hex) lets `--elev-ring` (`0 0 0 1px var(--border)`)
- *      reproduce the icy line by default, and lets every component
- *      reach the same value via `border: 1px solid var(--border)`.
- *      `--border-soft` drops to `rgba(217, 237, 254, 0.145)` for
- *      inner row separators that should not compete with the
- *      container's outer frost edge.
- *
- *   3. `--fg` is `#f0f0f0`, not `#ffffff`. DESIGN.md §2 names this
- *      the "Near White" — a deliberately softened text tier that
- *      lets pure white (`#ffffff`) stay reserved for the maximum-
- *      emphasis moments DESIGN.md describes as "link highlights"
- *      and the white-pill CTA. The four-level foreground ramp
- *      (`#f0f0f0 → #a1a4a5 → #5c5c5c → #464a4d`) maps directly onto
- *      DESIGN.md §2's documented neutral scale (Near White, Silver,
- *      Mid Gray, Dark Gray) so `--fg-2` and `--meta` are
- *      independently bound rather than aliased.
- *
- *   4. `--accent` is Resend Orange (`#ff801f`, "Orange 10" in
- *      DESIGN.md §2). Resend's product surface uses a multi-color
- *      accent system (orange/green/blue/yellow/red), but the shared
- *      schema slot must pick one — and Orange 10 is the only entry
- *      DESIGN.md prefixes with "primary orange accent". The blue
- *      and green variants live as semantic / inline values in
- *      components.html; promoting any of them to a second accent
- *      slot would require a C-extension, which the brand contract
- *      defers until ≥2 brands need the same name. `--accent-on` is
- *      `#000000` because saturated orange against black reads best
- *      with black labels (DESIGN.md §4 confirms the white-pill
- *      pattern is for `#ffffff` solid backgrounds, not for the
- *      orange accent fill).
- *
- *   5. `--accent-hover` brightens toward white (10%) and
- *      `--accent-active` darkens toward black (12%) — the inverse
- *      of the schema's default mid-luminance pattern. On Resend's
- *      void canvas, a "pressed" state reads as a small recession
- *      into the dark, while a "lifted" hover reads as a luminance
- *      step up. This matches the Linear / dark-system convention
- *      and avoids the schema default's all-darken pattern that
- *      would make the orange disappear into the void on hover.
- *
- *   6. Semantic colors come straight from DESIGN.md §2's multi-
- *      color accent scale — `--success: #11ff99` (Green 4),
- *      `--warn: #ffc53d` (Yellow 9), `--danger: #ff2047` (Red 5).
- *      These are the saturated source values; components that want
- *      the documented "12–42% opacity" tints reach them via
- *      `color-mix(in oklab, var(--success), transparent 80%)` in
- *      situ, keeping the alpha-blend decision at the component
- *      layer rather than in the token slot.
- *
- *   7. Type scale is documented in DESIGN.md §3: 96px display,
- *      56px section, 24px feature title, 20px sub-heading, 18px
- *      body-large, 16px body, 14px caption, 12px small. The schema
- *      has 8 slots; `--text-2xl` is bound to `36px` as the
- *      intermediate that bridges 24px (feature title) to 56px
- *      (section heading) — DESIGN.md does not enumerate this stop,
- *      but a 24 → 56 jump without a mid-tier would force every H2
- *      to either undershoot or overshoot. `--leading-tight: 1.0`
- *      matches the documented Display Hero rhythm; `--leading-body:
- *      1.5` matches the documented Body / Body Large / Feature
- *      Title leading.
- *
- *   8. `--tracking-display` is `-0.05em`, derived from DESIGN.md
- *      §3 Section Heading (`-2.8px at 56px = -0.05em`). ABC Favorit
- *      compresses harder than Domaine Display (`-0.01em` at 96px),
- *      so binding the slot to the ABC Favorit characteristic value
- *      gives every display-tier element the brand's "engineered
- *      masthead" feel. The hero in components.html can opt back
- *      into the gentler Domaine tracking inline if needed.
- *
- *   9. `--font-display` lists ABC Favorit first, with Inter as the
- *      structural fallback. Inter is documented in DESIGN.md §3 as
- *      the body / UI font, but it shares the geometric voice well
- *      enough to carry display weight when ABC Favorit is not
- *      loaded — far better than falling through to a generic system
- *      sans. Domaine Display (the editorial serif hero font) is
- *      deliberately not in the stack: it is a paid Klim Type
- *      Foundry face whose absence would surface as a jarring serif
- *      drop. Heroes that want Domaine layer it in via
- *      `font-family: "Domaine Display", var(--font-display)` at the
- *      component level.
- *
- *  10. Section rhythm is generous: 120px desktop, 80px tablet, 48px
- *      phone. DESIGN.md §5 names "Cinematic black space" with "80–
- *      120px+ vertical spacing between sections" as a defining
- *      property — "the black background IS the whitespace". 120px
- *      desktop sits at the top of that documented range.
- *
- *  11. `--radius-sm` is `4px` (DESIGN.md "Sharp": buttons-ghost,
- *      inputs); `--radius-md` is `8px` (tabs / content blocks);
- *      `--radius-lg` is `16px` (feature cards / images / main
- *      buttons); `--radius-pill` is `9999px` (primary CTAs / tags
- *      / badges). The 24px "Section" radius from DESIGN.md is
- *      component-specific (large panels) and reached inline rather
- *      than via the shared schema.
- *
- *  12. `--elev-raised` layers the documented `rgba(176, 199, 217,
- *      0.145) 0 0 0 1px` ring shadow with the subtle drop from
- *      DESIGN.md §6 Level 2. On pure black, opaque blur shadows
- *      vanish — the ring carries the edge, and the soft drop adds
- *      just enough atmospheric tint to read as "lifted" against
- *      the void. Never strip the ring when overriding this token.
- *
- *  13. `--focus-ring` is a sharp 2px ring at `var(--accent)`, not
- *      the schema's 3px alpha glow. DESIGN.md §6 Level 3 documents
- *      a heavy 8px black focus ring that works in product context
- *      (against non-black surroundings); on this brand fixture the
- *      black canvas would swallow that ring, so we substitute the
- *      orange accent at 2px — sharp, engineered, legible against
- *      both the void and any card surface.
- *
- *  14. `--container-max` caps at `1200px` with generous 32px
- *      desktop gutters — Resend's marketing pages center contained
- *      content in vast dark space, treating the gutter as part of
- *      the gallery margin rather than as edge-bleed.
- *
- * Source contracts:
- *   - Standard token names: design-systems/_schema/tokens.schema.ts
- *   - A2 fallback parity:   design-systems/_schema/defaults.css
- *   - Lint enforcement:     apps/daemon/src/lint-artifact.ts
- *
- * Keep this file additive: never invent token names not also
- * documented in DESIGN.md or the schema. ABC Favorit, Domaine
- * Display, and Commit Mono are paid faces — the stacks list
- * defensible OS fallbacks so artifacts render legibly even when
- * the brand faces are not loaded.
- * ─────────────────────────────────────────────────────────────────── */
-
-:root {
-  /* ─── Surface (3 levels — schema slot) ─────────────────────────────
-   * The void is the canvas. DESIGN.md §7: "Don't lighten the
-   * background above #000000 — the pure black void is non-
-   * negotiable." `--surface` matches `--bg` because cards on Resend
-   * read by their frost border alone, not by a tinted fill.
-   * `--surface-warm` aliases to surface — the brand has no second
-   * background color anywhere. */
-  --bg: #000000;
-  --surface: #000000;
-  --surface-warm: var(--surface);          /* alias — Resend has no warm tier */
-
-  /* ─── Foreground ramp (4 levels) ──────────────────────────────────
-   * Near White → Silver → Mid Gray → Dark Gray, the documented
-   * neutral scale from DESIGN.md §2. `#f0f0f0` instead of `#ffffff`
-   * matters — pure white is reserved for the white-pill CTA and link
-   * highlights; the softened near-white keeps body type calm against
-   * the void. All four tiers are independently bound (not aliased)
-   * because DESIGN.md names four distinct neutral roles: primary
-   * text, secondary / link-muted, hover / caption, tertiary /
-   * quaternary timestamp. */
-  --fg: #f0f0f0;                           /* Near White — primary text, button labels */
-  --fg-2: #a1a4a5;                         /* Silver — secondary text, muted links */
-  --muted: #5c5c5c;                        /* Mid Gray — captions, hover, subtle emphasis */
-  --meta: #464a4d;                         /* Dark Gray — tertiary text, timestamps */
-
-  /* ─── Border (2 levels) ──────────────────────────────────────────
-   * Frost-as-border is THE signature: `rgba(214, 235, 253, 0.19)`
-   * at 1px replaces every gray border in the system. Binding
-   * `--border` to the alpha (not a solid hex) lets `--elev-ring`
-   * reproduce the icy line by default, and lets
-   * `border: 1px solid var(--border)` paint the same value when a
-   * real CSS border is structurally required (e.g. the bottom edge
-   * of the sticky nav per DESIGN.md §4). `--border-soft` drops to
-   * `0.145` alpha for inner row separators that must not compete
-   * with the container's outer frost edge. */
-  --border: rgba(214, 235, 253, 0.19);     /* signature frost border alpha */
-  --border-soft: rgba(217, 237, 254, 0.145); /* inner row separator — lighter frost */
-
-  /* ─── Accent ─────────────────────────────────────────────────────
-   * Resend Orange (Orange 10 from DESIGN.md §2). Hard cap of ≤2
-   * visible uses per screen — DESIGN.md §7 forbids cross-mixing
-   * accent colors within a single component. The multi-color
-   * scale (green/blue/yellow/red) lives at the semantic / inline
-   * layer; only the orange slot rides on `--accent`.
-   *
-   * `--accent-on` is BLACK, not white — saturated #ff801f against
-   * black reads cleanest with black labels (the white-pill CTA in
-   * DESIGN.md §4 uses #ffffff fill with #000000 text, not the
-   * orange accent). Hover brightens 10% toward white, active
-   * darkens 12% toward black — the inverse of the schema's all-
-   * darken default, matching the dark-theme convention where
-   * "pressed" reads as recession into the void. */
-  --accent: #ff801f;                       /* Resend Orange — primary chromatic accent */
-  --accent-on: #000000;                    /* black label on saturated orange fill */
-  --accent-hover: color-mix(in oklab, var(--accent), white 10%);
-  --accent-active: color-mix(in oklab, var(--accent), black 12%);
-
-  /* ─── Semantic ───────────────────────────────────────────────────
-   * Saturated source values from DESIGN.md §2's multi-color accent
-   * scale. Components reach the documented 12–42% opacity tints
-   * via `color-mix(in oklab, var(--success), transparent 80%)` in
-   * situ, keeping the alpha-blend decision at the component layer. */
-  --success: #11ff99;                      /* Green 4 — emerald success indicator */
-  --warn: #ffc53d;                         /* Yellow 9 — warm gold warning */
-  --danger: #ff2047;                       /* Red 5 — error / destructive */
-
-  /* ─── Typography ─────────────────────────────────────────────────
-   * Three-font editorial hierarchy from DESIGN.md §3. ABC Favorit
-   * carries display; Inter carries body and UI; Commit Mono
-   * carries code and technical labels. Domaine Display (the
-   * editorial serif hero face) is intentionally not in the
-   * `--font-display` stack — it is a paid Klim Type Foundry face
-   * whose absence would surface as a jarring serif drop. Heroes
-   * that want Domaine layer it in via `font-family: "Domaine
-   * Display", var(--font-display)` at the component level. */
-  --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
-
-  /* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
-   * 12 / 14 / 16 / 18 / 20 / 24 / 56 / 96 are all documented; the
-   * 36px `--text-2xl` is the synthesized intermediate that bridges
-   * 24px feature-title to 56px section-heading. Without it, every
-   * H2 would have to undershoot at 24 or overshoot at 56 and the
-   * type rhythm would jump. */
-  --text-xs: 12px;                         /* Small — tags, meta, fine print */
-  --text-sm: 14px;                         /* Caption, button, nav link */
-  --text-base: 16px;                       /* Body — standard reading */
-  --text-lg: 20px;                         /* Sub-heading — ABC Favorit */
-  --text-xl: 24px;                         /* Feature Title — Inter weight 500 */
-  --text-2xl: 36px;                        /* Synthesized H2 — bridges 24 → 56 */
-  --text-3xl: 56px;                        /* Section Heading — ABC Favorit */
-  --text-4xl: 96px;                        /* Display Hero — Domaine / ABC Favorit */
-
-  /* Leading + tracking.
-   * --leading-body 1.5: DESIGN.md body / feature-title / body-large.
-   * --leading-tight 1.0: DESIGN.md Display Hero (96px).
-   * --tracking-display -0.05em: ABC Favorit Section Heading
-   *   (-2.8px / 56px). Harder compression than Domaine's -0.01em;
-   *   binding the slot to the ABC Favorit value gives display tiers
-   *   the brand's "engineered masthead" feel. */
-  --leading-body: 1.5;
-  --leading-tight: 1.0;
-  --tracking-display: -0.05em;
-
-  /* ─── Spacing ────────────────────────────────────────────────────
-   * Standard 4px-grid base scale. DESIGN.md §5 also documents 5px,
-   * 6px, 7px, 10px, 30px, 40px micro-tiers — those are too fine to
-   * belong in the shared schema and are inlined per-component when
-   * needed (button padding `5px 12px`, etc.). The 4/8/12/16/20/
-   * 24/32/48 tier covers the structural rhythm. */
-  --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 — DESIGN.md §5: "Cinematic black space" with
-   * 80–120px+ vertical padding between sections. 120px desktop sits
-   * at the top of the documented range, dropping to 80px tablet
-   * (still generous) and 48px phone (the documented mobile floor). */
-  --section-y-desktop: 120px;
-  --section-y-tablet: 80px;
-  --section-y-phone: 48px;
-
-  /* ─── Radius ─────────────────────────────────────────────────────
-   * DESIGN.md §5 radius scale: 4 / 6 / 8 / 10 / 12 / 16 / 24 / 9999.
-   * We bind the four schema tiers to: 4 (sharp — ghost button,
-   * inputs), 8 (standard — tabs, content), 16 (large — feature
-   * cards, images, main buttons), 9999 (pill — primary CTAs, tags,
-   * badges). The 24px "Section" radius is component-specific (large
-   * panels) and reached inline. */
-  --radius-sm: 4px;                        /* Sharp — ghost button, input */
-  --radius-md: 8px;                        /* Standard — tab, content block */
-  --radius-lg: 16px;                       /* Large — feature card, image, main button */
-  --radius-pill: 9999px;                   /* Pill — primary CTA, tag, badge */
-
-  /* ─── Elevation (3 levels) ───────────────────────────────────────
-   * Resend barely uses shadows — DESIGN.md §6: "On a pure black
-   * background, traditional shadows are invisible — you can't cast
-   * a shadow into the void. Instead, Resend creates depth through
-   * its signature frost borders."
-   *
-   *   --elev-flat    no shadow (page background, text blocks)
-   *   --elev-ring    the signature frost hairline (most surfaces)
-   *   --elev-raised  ring + subtle drop for true "lifted" feel
-   *
-   * `--elev-raised` layers the documented `rgba(176, 199, 217, 0.145)
-   * 0 0 0 1px` ring with the §6 Level 2 subtle drop. Never strip
-   * the ring when overriding — it is the edge mechanism that lets
-   * a card read against the void at all. */
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised:
-    0 0 0 1px rgba(176, 199, 217, 0.145),
-    0 1px 3px rgba(0, 0, 0, 0.4),
-    0 1px 2px -1px rgba(0, 0, 0, 0.4);
-
-  /* ─── Focus ring ─────────────────────────────────────────────────
-   * Sharp 2px ring at `var(--accent)`, NOT the schema's 3px alpha
-   * glow. DESIGN.md §6 documents an 8px black ring that works in
-   * product context (against non-black surroundings); on this
-   * brand fixture the black canvas would swallow that ring, so we
-   * substitute the orange accent at 2px — sharp, engineered,
-   * legible against both the void and any card surface. */
-  --focus-ring: 0 0 0 2px var(--accent);
-
-  /* ─── Motion ─────────────────────────────────────────────────────
-   * Two durations + one easing curve. Resend's micro-states are
-   * quick and unobtrusive — pill buttons crossfade to white glass,
-   * frost borders intensify on focus, no choreographed entrances. */
-  --motion-fast: 150ms;
-  --motion-base: 200ms;
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-
-  /* ─── Layout ─────────────────────────────────────────────────────
-   * 1200px max content width — DESIGN.md §5 "Centered content with
-   * generous max-width". Gutters stay wide on desktop (32px) so
-   * the gallery margin around the void canvas reads as intentional
-   * framing; mobile narrows to 16px to preserve readable measure. */
-  --container-max: 1200px;
-  --container-gutter-desktop: 32px;
-  --container-gutter-tablet: 24px;
-  --container-gutter-phone: 16px;
-}

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

@@ -1,71 +0,0 @@
-# Design System Inspired by Retro
-
-> Category: Retro & Nostalgic
-> Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.
-
-## 1. Visual Theme & Atmosphere
-
-Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.
-
-- **Visual style:** high-contrast, retro
-- **Color stance:** primary, neutral, success, warning, danger
-- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
-
-## 2. Color
-
-- **Primary:** `#3B82F6` — Token from style foundations.
-- **Secondary:** `#8B5CF6` — Token from style foundations.
-- **Success:** `#16A34A` — Token from style foundations.
-- **Warning:** `#D97706` — Token from style foundations.
-- **Danger:** `#DC2626` — Token from style foundations.
-- **Surface:** `#FFFFFF` — Token from style foundations.
-- **Text:** `#111827` — Token from style foundations.
-- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
-
-- Favor Primary (#3B82F6) for CTA emphasis.
-- Use Surface (#FFFFFF) for large backgrounds and cards.
-- Keep body copy on Text (#111827) for legibility.
-
-## 3. Typography
-
-- **Scale:** desktop-first expressive scale
-- **Families:** primary=Macondo, display=Macondo, mono=JetBrains Mono
-- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
-- Headings should carry the style personality; body text should optimize scanability and contrast.
-
-## 4. Spacing & Grid
-
-- **Spacing scale:** 4/8/12/16/24/32
-- Keep vertical rhythm consistent across sections and components.
-- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
-
-## 5. Layout & Composition
-
-- Prefer clear content blocks with consistent internal padding.
-- Keep hierarchy obvious: headline → support text → primary action.
-- Use whitespace to separate concerns before adding borders or shadows.
-
-## 6. Components
-
-- Buttons: primary action uses `#3B82F6`; secondary actions stay neutral.
-- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
-- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
-
-## 7. Motion & Interaction
-
-- Use subtle transitions that emphasize Primary (#3B82F6) as the interaction signal.
-- Default to short, purposeful transitions (150–250ms) with stable easing.
-- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
-
-## 8. Voice & Brand
-
-- Tone should reflect the visual style: concise, confident, and product-specific.
-- Keep microcopy action-oriented and avoid generic filler language.
-- Preserve the style identity in headlines while keeping UI labels literal and clear.
-
-## 9. Anti-patterns
-
-- Do not introduce off-palette colors when an existing token can solve the problem.
-- Do not flatten hierarchy by using the same type size/weight for all text.
-- Do not add decorative effects that reduce readability or accessibility.
-- Do not mix unrelated visual metaphors in the same interface.

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

@@ -1,136 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Retro - reference components</title>
-    <meta name="description" content="Reference fixture for design-systems/retro: retro interface with warm colors, chunky controls, and nostalgic product cards." />
-    <style>
-      :root {
-        --bg: #fff4cf;
-        --surface: #fffaf0;
-        --surface-warm: #ffdca8;
-        --fg: #2a1810;
-        --fg-2: #593625;
-        --muted: #8a6652;
-        --meta: #d24b1f;
-        --border: #d9aa7a;
-        --border-soft: #efd0ab;
-        --accent: #d24b1f;
-        --accent-on: #ffffff;
-        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-        --accent-active: color-mix(in oklab, var(--accent), black 14%);
-        --success: #3d8f4f;
-        --warn: #f2a93b;
-        --danger: #b83a2f;
-        --font-display: "Courier New", ui-monospace, monospace;
-        --font-body: Inter, system-ui, sans-serif;
-        --font-mono: "Courier New", ui-monospace, monospace;
-        --text-xs: 12px;
-        --text-sm: 14px;
-        --text-base: 16px;
-        --text-lg: 18px;
-        --text-xl: 24px;
-        --text-2xl: 36px;
-        --text-3xl: 54px;
-        --text-4xl: 76px;
-        --leading-body: 1.52;
-        --leading-tight: 1.06;
-        --tracking-display: 0;
-        --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: 96px;
-        --section-y-tablet: 68px;
-        --section-y-phone: 48px;
-        --radius-sm: 4px;
-        --radius-md: 8px;
-        --radius-lg: 12px;
-        --radius-pill: 9999px;
-        --elev-flat: none;
-        --elev-ring: 0 0 0 1px var(--border);
-        --elev-raised: 6px 6px 0 rgba(42, 24, 16, 0.26);
-        --focus-ring: 0 0 0 4px rgba(210, 75, 31, 0.28);
-        --motion-fast: 150ms;
-        --motion-base: 240ms;
-        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-        --container-max: 1180px;
-        --container-gutter-desktop: 36px;
-        --container-gutter-tablet: 24px;
-        --container-gutter-phone: 16px;
-      }
-
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body { margin: 0; padding: 0; }
-      body { min-height: 100vh; 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; }
-      .page { min-height: 100vh; background: linear-gradient(135deg, #fff4cf 0%, #ffdca8 58%, #fffaf0 100%); }
-      .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
-      section { padding-block: var(--section-y-desktop); }
-      @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); } }
-      h1, h2, h3, p { margin: 0; }
-      h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
-      h1 { max-width: 840px; font-size: var(--text-4xl); font-weight: 760; }
-      h2 { font-size: var(--text-3xl); font-weight: 700; }
-      h3 { font-size: var(--text-xl); font-weight: 700; }
-      .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
-      .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }
-      .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
-      .stack > * + * { margin-block-start: var(--space-4); }
-      .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
-      .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
-      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
-      .btn-primary { background: var(--accent); color: var(--accent-on); }
-      .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
-      .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
-      .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
-      .panel { background: color-mix(in oklab, var(--surface), transparent 4%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); overflow: hidden; }
-      .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
-      .status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--meta); font: 700 var(--text-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
-      .status::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
-      .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
-      .metric { padding: var(--space-5); border-right: 1px solid var(--border-soft); }
-      .metric:last-child { border-right: 0; }
-      .metric strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
-      .metric span { color: var(--muted); font-size: var(--text-sm); }
-      .card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
-      .mini-card { min-height: 148px; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-warm); }
-      .mini-card p, .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
-      .swatches { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
-      .swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
-      .swatch.accent { background: var(--accent); } .swatch.surface { background: var(--surface); } .swatch.warm { background: var(--surface-warm); } .swatch.fg { background: var(--fg); }
-      .field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); }
-      label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
-      input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; }
-      input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
-      .lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
-      .tile { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
-      @media (max-width: 860px) { .hero, .lower { grid-template-columns: 1fr; } .metric-grid, .card-row { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); } .metric:last-child { border-bottom: 0; } }
-    </style>
-  </head>
-  <body>
-    <main class="page">
-      <section>
-        <div class="container hero">
-          <div class="stack">
-            <p class="eyebrow">Retro design system</p>
-            <h1>Retro computing dashboard</h1>
-            <p class="lead">Vintage color, chunky geometry, and nostalgic controls for playful products.</p>
-            <div class="actions" aria-label="Reference actions"><a class="btn btn-primary" href="#">Primary action</a><a class="btn btn-secondary" href="#">Secondary action</a></div>
-          </div>
-          <article class="panel" aria-label="Retro component preview">
-            <div class="panel-head"><div><p class="eyebrow">Live module</p><h3>Reference component</h3></div><span class="status">online</span></div>
-            <div class="metric-grid"><div class="metric"><strong>98%</strong><span>Signal quality</span></div><div class="metric"><strong>24</strong><span>Active flows</span></div><div class="metric"><strong>3.2s</strong><span>Response time</span></div></div>
-            <div class="card-row"><div class="mini-card"><h3>Palette</h3><p>retro interface with warm colors, chunky controls, and nostalgic product cards.</p><div class="swatches" aria-label="Token swatches"><span class="swatch accent"></span><span class="swatch surface"></span><span class="swatch warm"></span><span class="swatch fg"></span></div></div><div class="mini-card"><h3>Control</h3><p>Focus, hover, and status states share the same system signal.</p><div class="field"><label for="retro-input">Reference input</label><input id="retro-input" value="Retro system token" /></div></div></div>
-          </article>
-        </div>
-      </section>
-      <section><div class="container lower"><article class="tile"><p class="eyebrow">Typography</p><h2>Display rhythm</h2><p>Headlines use the display stack with the declared scale and leading.</p></article><article class="tile"><p class="eyebrow">Surface</p><h2>Layer system</h2><p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p></article><article class="tile"><p class="eyebrow">Interaction</p><h2>Motion states</h2><p>Buttons, inputs, and panels use system-specific focus rings and easing.</p></article></div></section>
-    </main>
-  </body>
-</html>

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

@@ -1,63 +0,0 @@
-/* design-systems/retro/tokens.css
- * Structured token bindings for Retro.
- * retro interface with warm colors, chunky controls, and nostalgic product cards.
- */
-
-:root {
-  --bg: #fff4cf;
-  --surface: #fffaf0;
-  --surface-warm: #ffdca8;
-  --fg: #2a1810;
-  --fg-2: #593625;
-  --muted: #8a6652;
-  --meta: #d24b1f;
-  --border: #d9aa7a;
-  --border-soft: #efd0ab;
-  --accent: #d24b1f;
-  --accent-on: #ffffff;
-  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-  --accent-active: color-mix(in oklab, var(--accent), black 14%);
-  --success: #3d8f4f;
-  --warn: #f2a93b;
-  --danger: #b83a2f;
-  --font-display: "Courier New", ui-monospace, monospace;
-  --font-body: Inter, system-ui, sans-serif;
-  --font-mono: "Courier New", ui-monospace, monospace;
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 24px;
-  --text-2xl: 36px;
-  --text-3xl: 54px;
-  --text-4xl: 76px;
-  --leading-body: 1.52;
-  --leading-tight: 1.06;
-  --tracking-display: 0;
-  --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: 96px;
-  --section-y-tablet: 68px;
-  --section-y-phone: 48px;
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-pill: 9999px;
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised: 6px 6px 0 rgba(42, 24, 16, 0.26);
-  --focus-ring: 0 0 0 4px rgba(210, 75, 31, 0.28);
-  --motion-fast: 150ms;
-  --motion-base: 240ms;
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --container-max: 1180px;
-  --container-gutter-desktop: 36px;
-  --container-gutter-tablet: 24px;
-  --container-gutter-phone: 16px;
-}