@aexol/spectral 0.9.270 → 0.9.271

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

@@ -1,258 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * design-systems/lovable/tokens.css
- *
- * Structured token bindings for "Design System Inspired by Lovable".
- * Warm parchment canvas, opacity-driven gray ramp, humanist Camera Plain
- * Variable display type, borders-not-shadows for cards, inset-shadow
- * tactility on dark CTAs.
- *
- * This file pre-compiles the values described in `DESIGN.md` into the
- * shared schema. Agents generating an artifact for Lovable should paste
- * the `:root` block verbatim into the first `<style>` of the artifact,
- * then reference everything via `var(--*)`.
- *
- * Brand-specific schema decisions (each one bends a schema convention
- * to match Lovable's voice rather than the cross-brand default):
- *
- *   1. `--bg` and `--surface` BOTH bind to `#f7f4ed` (Cream). DESIGN.md
- *      §4 is explicit: "Cards… background: #f7f4ed (matches page) — for
- *      seamless integration." Lovable's depth model is borders, not
- *      surface tinting, so a card and the page are the same color and
- *      `#eceae4` border carries the containment. `--surface-warm`
- *      collapses to `var(--surface)` because there is no second warm
- *      tier in the system.
- *
- *   2. `--fg` is `#1c1c1c` (Charcoal), not `#000000`. DESIGN.md §1 names
- *      the warmth as deliberate: "Not pure black — organic warmth." The
- *      gray ramp is opacity-driven — every "gray" in the system is the
- *      same charcoal hue at a different alpha — so `--fg-2` binds to
- *      `rgba(28, 28, 28, 0.83)` (the documented "strong secondary text"
- *      tier from §2) and `--meta` binds to `rgba(28, 28, 28, 0.4)`
- *      (the documented "interactive borders / placeholders" tier).
- *      `--muted` keeps the named gray `#5f5f5d` for body descriptions
- *      because that one tier is bound to a hex in DESIGN.md, not to an
- *      opacity stop.
- *
- *   3. `--border` is the warm `#eceae4` (Light Cream) divider line.
- *      `--border-soft` aliases to `var(--border)` because Lovable does
- *      not differentiate inner / outer border tiers — DESIGN.md §1 names
- *      a SECOND interactive border at `rgba(28, 28, 28, 0.4)`, but that
- *      is the foreground-meta token (already bound above) used as a
- *      button outline, not a separator-tier border.
- *
- *   4. `--accent` is Lovable Pink (`#ff4d8d`), even though primary CTAs
- *      in Lovable are Charcoal (`var(--fg)`). DESIGN.md §6 calls out a
- *      "soft, warm multi-color gradient wash (pinks, oranges, blues)
- *      behind hero" and §4 Links references `hsl(var(--primary))` for
- *      hover — the brand mark itself is a pink → coral gradient. The
- *      accent slot is therefore reserved for the chromatic moments
- *      where the brand pink actually appears (link hover, badge tints,
- *      focus moments on warm controls). components.html encodes the
- *      "primary CTA = Charcoal" pattern via `background: var(--fg)`,
- *      so `--accent` does not get burned on every button.
- *
- *   5. `--focus-ring` is the Tailwind ring blue at 50% alpha
- *      (`rgba(59, 130, 246, 0.5)`), NOT a pink/charcoal-derived ring.
- *      DESIGN.md §6 names this verbatim as "Ring (Accessibility):
- *      `rgba(59,130,246,0.5)` 2px ring" — it is the one cool moment in
- *      an otherwise warm palette, justified by accessibility (the warm
- *      pink at low alpha would not pass contrast on the cream canvas).
- *      A 2px sharp ring, not the schema's 3px alpha glow.
- *
- *   6. `--elev-raised` is the soft warm focus shadow
- *      (`0 4px 12px rgba(0, 0, 0, 0.1)`) — the same value DESIGN.md §6
- *      lists as "Focus (Level 3)". The signature multi-layer inset
- *      shadow on dark buttons (`rgba(255,255,255,0.2) 0 0.5px 0 inset,
- *      rgba(0,0,0,0.2) 0 0 0 0.5px inset, rgba(0,0,0,0.05) 0 1px 2px`)
- *      is component-specific and lives in components.html — it only
- *      reads on a dark surface, so generalizing it to a token would
- *      mis-paint cards on the cream canvas.
- *
- *   7. The type scale tops out at 60px (`--text-4xl`) per DESIGN.md §3
- *      "Display Hero, 60px Camera Plain weight 600". `--leading-tight`
- *      is `1.10` (the documented hero range 1.00–1.10) and
- *      `--tracking-display` is `-0.025em`, the em-relative form of
- *      "-1.5px at 60px" so compression scales proportionally with size.
- *      Body text stays at `normal` tracking — Camera Plain Variable's
- *      humanist warmth wants comfortable reading at 16px.
- *
- *   8. Section rhythm is generous: `128px` desktop, `80px` tablet,
- *      `64px` phone (`--section-y-*`). DESIGN.md §5 describes
- *      "lavish at section boundaries (80px–208px)"; we sit in the
- *      mid-range so the cream canvas feels cozy rather than empty.
- *      Container caps at `1200px` (DESIGN.md §5 documented max width).
- *
- * 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. Camera Plain Variable does not need a CDN
- * reference here — the font stack lists ui-sans-serif / system-ui
- * fallbacks so artifacts render acceptably even when Camera Plain is
- * not loaded, and any host that wants the real face links it externally.
- * ─────────────────────────────────────────────────────────────────── */
-
-:root {
-  /* ─── Surface ─────────────────────────────────────────────────────
-   * Cream is BOTH page and card background — DESIGN.md §4: "Cards…
-   * background: #f7f4ed (matches page) — for seamless integration".
-   * The warm divider line (#eceae4 border) is what separates a card
-   * from the page, not a different surface color. */
-  --bg: #f7f4ed;                       /* Cream — warm parchment foundation */
-  --surface: #f7f4ed;                  /* Cards reuse the canvas — borders contain */
-  --surface-warm: var(--surface);      /* alias — Lovable has no second warm tier */
-
-  /* ─── Foreground ──────────────────────────────────────────────────
-   * Charcoal #1c1c1c, never pure black. The gray ramp is opacity-driven:
-   * every "gray" in the system is the same charcoal hue at a different
-   * alpha. --fg-2 binds independently to charcoal-83% (the documented
-   * strong-secondary tier). --muted is the named gray #5f5f5d for
-   * body descriptions / captions. --meta drops to charcoal-40% — the
-   * documented "interactive borders / placeholders" alpha. */
-  --fg: #1c1c1c;                       /* Charcoal — primary text, dark CTA bg */
-  --fg-2: rgba(28, 28, 28, 0.83);      /* Charcoal 83% — strong secondary text */
-  --muted: #5f5f5d;                    /* Muted Gray — descriptions, captions */
-  --meta: rgba(28, 28, 28, 0.4);       /* Charcoal 40% — placeholders, faded UI */
-
-  /* ─── Border ──────────────────────────────────────────────────────
-   * Light Cream #eceae4 is the canonical "warm divider line" — DESIGN.md
-   * §1 names it as the passive border used everywhere cards / images /
-   * sections need containment. --border-soft aliases because Lovable
-   * does not differentiate inner / outer separator tiers; depth comes
-   * from the inset-shadow signature on dark buttons (component-level),
-   * not from border weight. */
-  --border: #eceae4;                   /* Light Cream — card / image edge */
-  --border-soft: var(--border);        /* alias — single border tier */
-
-  /* ─── Accent ──────────────────────────────────────────────────────
-   * Lovable Pink — the brand mark color. DESIGN.md §6 calls out a
-   * "soft, warm multi-color gradient wash (pinks, oranges, blues)"
-   * behind hero, and §4 Links references hsl(var(--primary)) for hover.
-   * Primary CTAs are CHARCOAL (var(--fg)), not pink — components.html
-   * encodes that pattern. --accent is reserved for the chromatic
-   * moments where the brand pink actually appears (link hover, badge
-   * tints, brand mark, soft gradient washes). */
-  --accent: #ff4d8d;                   /* Lovable Pink — brand mark / chromatic */
-  --accent-on: #ffffff;                /* white label on saturated pink */
-  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-  --accent-active: color-mix(in oklab, var(--accent), black 14%);
-
-  /* ─── Semantic ────────────────────────────────────────────────────
-   * Schema defaults — Lovable's marketing surface rarely renders state
-   * and DESIGN.md does not specify warm-shift overrides. Success / warn
-   * / danger remain tonally distinct from the warm-neutral palette so
-   * they read as semantic (not decorative) when they appear. */
-  --success: #16a34a;
-  --warn: #eab308;
-  --danger: #dc2626;
-
-  /* ─── Typography ──────────────────────────────────────────────────
-   * Camera Plain Variable carries the humanist personality — slightly
-   * rounded terminals and organic curves, distinct from the geometric
-   * sans-serifs typical of dev tools. The variable axis enables weight
-   * 480 for special display moments; standard weights are 400 (body /
-   * UI / links / buttons) and 600 (headings / emphasis). The
-   * ui-sans-serif / system-ui fallbacks ensure artifacts render
-   * acceptably even when Camera Plain is not loaded. */
-  --font-display: "Camera Plain Variable", "Camera Plain", ui-sans-serif, system-ui, sans-serif;
-  --font-body: "Camera Plain Variable", "Camera Plain", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
-
-  /* Type scale (px) — DESIGN.md §3 hierarchy table. Lovable reads BIG
-   * because of -0.025em (≈ -1.5px @ 60px) tracking compression on
-   * display, not because of an extreme px ceiling. The 18 / 20 / 36 /
-   * 48 / 60 ladder mirrors the documented Body Large → Card Title →
-   * Sub-heading → Section Heading → Display Hero progression. */
-  --text-xs: 12px;                     /* tiny metadata */
-  --text-sm: 14px;                     /* caption, link small, button small */
-  --text-base: 16px;                   /* body, button, link */
-  --text-lg: 18px;                     /* body large, introductions */
-  --text-xl: 20px;                     /* card title */
-  --text-2xl: 36px;                    /* sub-heading */
-  --text-3xl: 48px;                    /* section heading */
-  --text-4xl: 60px;                    /* display hero */
-
-  /* `--leading-tight` is 1.10 (the documented hero 1.00–1.10 range);
-   * `--leading-body` is 1.5 (the documented 16px body rhythm).
-   * `--tracking-display` is -0.025em — the em-relative form of
-   * Lovable's "-1.5px at 60px" so the compression scales proportionally
-   * with size. Body stays at normal tracking — Camera Plain's humanist
-   * warmth wants comfortable reading. */
-  --leading-body: 1.5;
-  --leading-tight: 1.10;
-  --tracking-display: -0.025em;
-
-  /* ─── Spacing ─────────────────────────────────────────────────────
-   * 8px base. DESIGN.md §5 names the full scale extending to 208px at
-   * the top end for editorial breathing room — those large tiers are
-   * inlined per-section in components.html (section-y-* below carries
-   * the structural rhythm). The shared schema covers the 4 → 48px
-   * structural ladder. */
-  --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: "lavish at section boundaries
-   * (80px–208px)". Sit at 128px desktop (the documented mid-range),
-   * collapse to 80 on tablet and 64 on phone. The cream background
-   * makes these expanses feel cozy rather than empty. */
-  --section-y-desktop: 128px;
-  --section-y-tablet: 80px;
-  --section-y-phone: 64px;
-
-  /* ─── Radius ──────────────────────────────────────────────────────
-   * DESIGN.md §5 radius scale: 4 / 6 / 8 / 12 / 16 / 9999. We bind the
-   * four schema tiers to: 6 (button / input / functional), 12 (card /
-   * image container), 16 (large container / footer), 9999 (action pill,
-   * icon toggle). The 4px and 8px tiers are component-specific and not
-   * part of the shared schema. */
-  --radius-sm: 6px;                    /* buttons, inputs, functional */
-  --radius-md: 12px;                   /* cards, image containers */
-  --radius-lg: 16px;                   /* large containers, footer sections */
-  --radius-pill: 9999px;               /* action pills, icon toggles */
-
-  /* ─── Elevation ───────────────────────────────────────────────────
-   * Lovable's depth is intentionally shallow — DESIGN.md §6: "borders
-   * are the containment mechanism, not shadows". Three levels:
-   *
-   *   --elev-flat    no shadow (page surface, most cards)
-   *   --elev-ring    the warm 1px border-as-ring (cards, images)
-   *   --elev-raised  the soft warm focus shadow (active / focused moments)
-   *
-   * The signature multi-layer inset shadow on dark buttons (white-line
-   * highlight at 0.5px inset + dark ring + soft drop) is component-
-   * specific and lives in components.html — it only reads on a dark
-   * surface, so generalizing it would mis-paint cards on cream. */
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.1); /* soft warm focus float */
-
-  /* ─── Focus ring ──────────────────────────────────────────────────
-   * The Tailwind ring blue at 50% — DESIGN.md §6 lists this verbatim
-   * as the keyboard accessibility ring. The one cool moment in an
-   * otherwise warm palette, justified by accessibility (the warm pink
-   * accent at low alpha would not pass contrast on cream). 2px sharp
-   * ring, not the schema's 3px alpha glow. */
-  --focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.5);
-
-  /* ─── Motion ──────────────────────────────────────────────────────
-   * Standard durations — Lovable's tactility is in opacity-on-active
-   * (0.8) and the inset-shadow press, not in timed choreography. */
-  --motion-fast: 150ms;
-  --motion-base: 200ms;
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-
-  /* ─── Layout ──────────────────────────────────────────────────────
-   * 1200px max content width per DESIGN.md §5. */
-  --container-max: 1200px;
-  --container-gutter-desktop: 24px;
-  --container-gutter-tablet: 16px;
-  --container-gutter-phone: 12px;
-}

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

@@ -1,71 +0,0 @@
-# Design System Inspired by Luxury
-
-> Category: Professional & Corporate
-> High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for luxury brand experiences.
-
-## 1. Visual Theme & Atmosphere
-
-High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for luxury brand experiences.
-
-- **Visual style:** modern, bold, big headings
-- **Color stance:** primary
-- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
-
-## 2. Color
-
-- **Primary:** `#FAFAFA` — Token from style foundations.
-- **Secondary:** `#FAFAFA` — Token from style foundations.
-- **Success:** `#16A34A` — Token from style foundations.
-- **Warning:** `#D97706` — Token from style foundations.
-- **Danger:** `#DC2626` — Token from style foundations.
-- **Surface:** `#000000` — Token from style foundations.
-- **Text:** `#FFFFFF` — Token from style foundations.
-- **Neutral:** `#000000` — Derived from the surface token for official format compatibility.
-
-- Favor Primary (#FAFAFA) for CTA emphasis.
-- Use Surface (#000000) for large backgrounds and cards.
-- Keep body copy on Text (#FFFFFF) for legibility.
-
-## 3. Typography
-
-- **Scale:** desktop-first expressive scale
-- **Families:** primary=Oswald, display=Oswald, 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:** 8pt baseline grid
-- 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 `#FAFAFA`; 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 (#FAFAFA) 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/luxury/components.html

@@ -1,154 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Luxury - reference components</title>
-    <meta name="description" content="Reference fixture for design-systems/luxury: luxury commerce with black lacquer, champagne gold, and spacious premium rhythm." />
-    <style>
-      :root {
-        --bg: #080706;
-        --surface: #151310;
-        --surface-warm: #241e14;
-        --fg: #fff8ea;
-        --fg-2: #d8cdb7;
-        --muted: #9f927c;
-        --meta: #c6a15b;
-        --border: #3a3020;
-        --border-soft: #282217;
-        --accent: #c6a15b;
-        --accent-on: #080706;
-        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-        --accent-active: color-mix(in oklab, var(--accent), black 14%);
-        --success: #5fa36a;
-        --warn: #d8a94f;
-        --danger: #d85a52;
-        --font-display: "Didot", "Bodoni 72", Georgia, serif;
-        --font-body: "Avenir Next", Inter, sans-serif;
-        --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
-        --text-xs: 12px;
-        --text-sm: 14px;
-        --text-base: 16px;
-        --text-lg: 19px;
-        --text-xl: 28px;
-        --text-2xl: 44px;
-        --text-3xl: 68px;
-        --text-4xl: 96px;
-        --leading-body: 1.6;
-        --leading-tight: 0.98;
-        --tracking-display: -0.015em;
-        --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: 120px;
-        --section-y-tablet: 84px;
-        --section-y-phone: 60px;
-        --radius-sm: 8px;
-        --radius-md: 14px;
-        --radius-lg: 24px;
-        --radius-pill: 9999px;
-        --elev-flat: none;
-        --elev-ring: 0 0 0 1px var(--border);
-        --elev-raised: 0 30px 90px rgba(0, 0, 0, 0.52);
-        --focus-ring: 0 0 0 4px rgba(198, 161, 91, 0.30);
-        --motion-fast: 180ms;
-        --motion-base: 300ms;
-        --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
-        --container-max: 1160px;
-        --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: radial-gradient(circle at 80% 8%, rgba(198, 161, 91, 0.22), transparent 34%), #080706; }
-      .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: 820px; 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">Luxury design system</p>
-            <h1>Private client salon</h1>
-            <p class="lead">Polished dark surfaces, gold accents, and high-touch commerce modules.</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="Luxury 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>luxury commerce with black lacquer, champagne gold, and spacious premium rhythm.</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 brand signal.</p><div class="field"><label for="luxury-input">Reference input</label><input id="luxury-input" value="Luxury 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 brand-specific focus rings and easing.</p></article></div></section>
-    </main>
-  </body>
-</html>

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

@@ -1,63 +0,0 @@
-/* design-systems/luxury/tokens.css
- * Structured token bindings for Luxury.
- * luxury commerce with black lacquer, champagne gold, and spacious premium rhythm.
- */
-
-:root {
-  --bg: #080706;
-  --surface: #151310;
-  --surface-warm: #241e14;
-  --fg: #fff8ea;
-  --fg-2: #d8cdb7;
-  --muted: #9f927c;
-  --meta: #c6a15b;
-  --border: #3a3020;
-  --border-soft: #282217;
-  --accent: #c6a15b;
-  --accent-on: #080706;
-  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-  --accent-active: color-mix(in oklab, var(--accent), black 14%);
-  --success: #5fa36a;
-  --warn: #d8a94f;
-  --danger: #d85a52;
-  --font-display: "Didot", "Bodoni 72", Georgia, serif;
-  --font-body: "Avenir Next", Inter, sans-serif;
-  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 19px;
-  --text-xl: 28px;
-  --text-2xl: 44px;
-  --text-3xl: 68px;
-  --text-4xl: 96px;
-  --leading-body: 1.6;
-  --leading-tight: 0.98;
-  --tracking-display: -0.015em;
-  --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: 120px;
-  --section-y-tablet: 84px;
-  --section-y-phone: 60px;
-  --radius-sm: 8px;
-  --radius-md: 14px;
-  --radius-lg: 24px;
-  --radius-pill: 9999px;
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised: 0 30px 90px rgba(0, 0, 0, 0.52);
-  --focus-ring: 0 0 0 4px rgba(198, 161, 91, 0.30);
-  --motion-fast: 180ms;
-  --motion-base: 300ms;
-  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
-  --container-max: 1160px;
-  --container-gutter-desktop: 36px;
-  --container-gutter-tablet: 24px;
-  --container-gutter-phone: 16px;
-}