@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/furniture-modern/THEME.md

@@ -0,0 +1,94 @@
+# Design Direction — Furniture-Modern
+
+## Ethos
+West Elm warm-cream lifestyle · Article scandi-modern catalog · CB2 modern-rust accents · Burrow friendly modular · Floyd considered millennial home
+
+## Feel
+Friendly soft furniture catalog. Warm cream surfaces, walnut and sage accents, room-by-room navigation as the primary frame. The page reads like a West Elm or Article catalog: approachable, photographable, never showroom-cold and never beige-on-beige boring. The audience is renting a first apartment or filling out a starter home — the layout returns confidence ("you can pull this room together for $1,800") rather than performing taste-knowledge.
+
+## Reference brands
+- **West Elm** → warm cream surface, lifestyle photography, room-by-room navigation, friendly category names ("Sofas We Love").
+- **Article** → scandi-modern restraint, walnut accent wood, serif headlines, room sets, designer-collab call-outs.
+- **CB2** → modern rust and cement gray, bold serif type, photography-forward, seasonal collection drops.
+- **Burrow** → friendly modular sofa CTAs, warm gradient backdrops, rounded chrome, financing-friendly messaging.
+- **Floyd** → considered millennial home, sand-cream palette, soft sage, lifestyle staging without influencer aesthetic.
+
+## Tokens
+All tokens live in `src/index.css` as HSL triples. Every token's `from:` comment names its brand origin. Do not introduce numbered or generic tokens — if a new color is needed, name a brand it traces to.
+
+Surface stack is **warm cream** (background) → **white** (card — lifestyle-photo backdrop feel) → **deeper cream** (secondary) → **stone-cream** (muted). Depth comes from soft shadows with a warm earth tint, never from cold neutral grays.
+
+Brand tokens: `--cream`, `--cream-deep`, `--walnut`, `--walnut-deep`, `--sage`, `--rust`, `--sand`, `--ink`. Primary is **Article walnut** — the canonical warm-wood accent on CTAs, filters, focus rings. Sage appears on room-tags and sustainability badges. Rust is the seasonal-collection mark (CB2-adjacent), used sparingly.
+
+## Typography
+- **Display:** Fraunces (Article/CB2 serif headlines). h1–h4, weights 400/500/600. Soft variants on for friendly-catalog warmth. Tracking `-0.018em`.
+- **Body:** Inter (West Elm/Burrow body sans), weights 400/500/600. Body base **16px** with **line-height 1.6**. Inter is the modern catalog default; humanist sans that doesn't impose personality on product copy.
+- **Mono:** JetBrains Mono. Used for dimensions, SKU numbers, ship-by dates — tabular numerals for catalog metadata.
+
+H1 uses `clamp(2.25rem, 5.5vw, 4rem)`. Prices use tabular nums. Font features: `"ss01"`, `"ss02"`, `"tnum"`.
+
+## Spacing
+- **Container:** `max-w-7xl px-5 lg:px-10` — wide; catalog needs lifestyle-photo room and 4-tile grids.
+- **Section padding tiers:**
+  - Hero: `pt-20 pb-16 lg:pt-28 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-10 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 80 96 128. Medium density — room tiles breathe, product grids stay scannable.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier on token, not via new tokens. Pure black and pure white-on-cream are forbidden — `--ink` (walnut-ink) and walnut variants do the work. Walnut appears on primary CTAs and filter pills; sage on room-tags; rust on seasonal-collection badges (max once per viewport).
+
+## Radius
+`--radius: 0.75rem` (12px). Catalog-card softness — soft but not pillowy. Pills allowed (`pillsAllowed: true`) for room categories, fabric swatches, ship-by chips. Cards use rounded-xl. Buttons use rounded-lg. The rounding language is consistent and committed.
+
+## Shadows
+**Soft.** Three utilities:
+- `.shadow-room` — default room-card and product-tile lift (1px ambient + 8px warm earth-tint shadow)
+- `.shadow-room-lg` — hover state, deeper earth-tint
+- `.shadow-cream-inset` — inner highlight on white cards for lifestyle-photo backdrop feel
+
+Shadows carry a warm earth tint, never cold neutral gray — that reads SaaS/dashboard and breaks the catalog language.
+
+## Motion
+Three keyframes — `fade-rise` (room-card and product-tile entrance, 600ms — friendly catalog responsiveness), `scale-in` (swatch swap and add-to-cart confirmation, 220ms), `ken-burns-soft` (single hero room-photograph drift, 22000ms infinite, **never on grid tiles**, only on the lead image).
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored. Motion is friendly-responsive — confirms taps and reveals room tiles without performing.
+
+## Component patterns
+- **Buttons:** Solid-fill primary (walnut bg, cream text, rounded-lg, shadow-room). Secondary is white card with walnut border. Tertiary is text-link in walnut-deep with underline-on-hover. Filter chips are pills with cream bg. Hover lifts shadow-room → shadow-room-lg.
+- **Cards:** Rounded-xl, white bg, soft cream border, shadow-room. Internal padding `p-5 lg:p-7`. Title in Fraunces 500; price + dimensions in Inter + JetBrains Mono. Hover lifts to shadow-room-lg.
+- **Inputs:** Full rounded-lg box, cream border, white bg. Focus = walnut 2px ring at 35% opacity. Label above in Inter 500, helper text below in muted-foreground.
+- **CTAs:** Walnut-fill primary button is the default. Secondary CTAs use white-card button or text-link. Room-category nav is a pill row across the top, never a dropdown — catalog navigation is horizontal.
+
+## Recommended rich media
+Furniture-modern photography is **room sets, never product-on-seamless**. Hero imagery is a fully-staged room with the featured piece prominent — natural window light, late-morning or golden-hour, lived-in props (a book on the side table, throw thrown not folded). Color-graded to warm afternoon light. Plants are mandatory in at least one corner; pets are encouraged.
+
+Product-tile imagery may be product-on-cream-seamless when filtered to a category, but the homepage and room-collection pages lean on staged rooms.
+
+**AI tool recommendations:** **Midjourney / Flux** for *"modern living room interior, walnut credenza, sage upholstered sofa, warm afternoon window light, scandi-modern, slight film grain, lifestyle photography"*; *"bedroom with platform bed, oak nightstand, linen bedding, morning light, west elm catalog aesthetic"*. Avoid Midjourney's default architectural-render output — explicitly prompt for "lived-in, slight clutter, natural light, no studio flash."
+
+**Aspect ratios:** 4:5 portrait for room tiles, 16:9 landscape for hero room shots, 1:1 square for product-on-cream tiles.
+
+**Video:** room-tour loops are acceptable on hero only — 8-second slow pan across a staged room, no audio, ≤4 MB. Designer-collab features may include a 30-second video with the designer talking through the collection.
+
+**Performance:** room tile images ≤120 KB WebP at 1200w; hero ≤250 KB. LCP under 2.5s.
+
+**Avoid:** showroom-cold mid-century reference photography (that's the mid-century direction's territory), beige-on-beige influencer aesthetic, watermark stock, 3D render placeholders with uncanny shadows, dark moody product shots, gradient backgrounds, glassmorphic anything.
+
+**Accessibility:** alt-text names the room and the featured piece: *"A staged living room with the Article walnut credenza beneath a row of framed botanical prints, sage sofa on the left, morning light through linen curtains."*
+
+## Component families
+- **Room tile** — square white card with hero room photo, room name in Fraunces, piece count, "Shop the room →".
+- **Designer-collab feature card** — full-width banner, designer portrait left, collection name + range in Fraunces, "See the collection →".
+- **Financing strip** — single-row banner explaining 0% APR, with provider logo placeholder, plain copy, never aggressive.
+
+## Details
+- **Selection:** `hsl(var(--walnut) / 0.20)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.45)` — visible walnut ring without screaming.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands (a dark-mode holiday-collection takeover where the cream palette is intentionally inverted), add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/furniture-modern/tokens.ts

@@ -0,0 +1,176 @@
+import type { Direction } from "../schema";
+
+// Note: "furniture-modern" is not yet in the Direction["name"] enum.
+// The schema is closed; until it is extended this file casts the name.
+// All other fields fully validate.
+
+export const furnitureModern: Direction = {
+  name: "furniture-modern" as Direction["name"],
+  ethos:
+    "West Elm warm-cream lifestyle · Article scandi-modern catalog · CB2 modern-rust accents · Burrow friendly modular · Floyd considered millennial home",
+  references: [
+    { brand: "West Elm", trait: "warm cream surface + lifestyle photography + room-by-room navigation" },
+    { brand: "Article", trait: "scandi-modern restraint + walnut accent + serif headlines + room sets" },
+    { brand: "CB2", trait: "modern rust + cement gray + bold serif type + photography-forward" },
+    { brand: "Burrow", trait: "friendly modular sofa CTAs + warm gradient backdrops + rounded chrome" },
+    { brand: "Floyd", trait: "considered millennial home + sand cream + soft sage + lifestyle staging" },
+  ],
+  feel:
+    "Friendly soft furniture catalog. Warm cream surfaces, walnut and sage accents, room-by-room " +
+    "navigation as the primary frame. Soft rounded cards with warm gradient backdrops, serif headlines " +
+    "for room names, humanist sans for product copy. The page reads like a West Elm/Article catalog: " +
+    "approachable, photographable, never showroom-cold and never beige-on-beige boring.",
+
+  fonts: {
+    display: {
+      family: "Fraunces",
+      fallback: ["Cormorant Garamond", "Georgia", "Times New Roman", "serif"],
+      from: "Article/CB2 serif headlines — friendly, soft, modern-classic catalog feel",
+      googleFont: "Fraunces",
+      weights: [400, 500, 600],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "West Elm/Burrow product copy — clean humanist sans, never sans-serif-display, readable",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "dimensions, sku numbers, ship-by dates — tabular numerals for catalog metadata",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.018em",        // friendly serif, slightly tight
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "ss02", "tnum"',  // Fraunces soft variants + tabular nums for prices
+    h1ScaleClamp: "clamp(2.25rem, 5.5vw, 4rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "32 30% 96%", from: "West Elm warm cream — friendly catalog paper, never cold white" },
+    foreground: { hsl: "28 22% 16%", from: "Article walnut-ink — deep warm brown-black, holds palette" },
+    card: { hsl: "0 0% 100%", from: "pure white card — lifts off cream, lifestyle-photo backdrop feel" },
+    popover: { hsl: "0 0% 100%", from: "same as card" },
+    primary: { hsl: "22 60% 42%", from: "Article walnut — the canonical warm-wood accent for primary CTAs" },
+    primaryForeground: { hsl: "32 30% 96%", from: "cream on walnut" },
+    secondary: { hsl: "32 26% 92%", from: "deeper cream — secondary surface, sub-nav, filter chips" },
+    secondaryForeground: { hsl: "28 22% 16%", from: "walnut-ink on cream" },
+    muted: { hsl: "32 20% 90%", from: "stone-cream — muted panels, room-category filter row" },
+    mutedForeground: { hsl: "28 14% 42%", from: "warm gray — captions, dimensions, designer credits" },
+    accent: { hsl: "150 18% 56%", from: "Floyd sage — second accent for room-tags and sustainability badges" },
+    accentForeground: { hsl: "32 30% 96%", from: "cream on sage" },
+    border: { hsl: "32 22% 86%", from: "warm cream hairline — visible on bg, never harsh" },
+    input: { hsl: "32 22% 86%", from: "same as border" },
+    ring: { hsl: "22 60% 42%", from: "walnut primary, focus only" },
+    destructive: { hsl: "8 65% 50%", from: "warm rust-red — sold-out / removed-from-cart, CB2 rust adjacent" },
+    destructiveForeground: { hsl: "32 30% 96%", from: "cream on rust" },
+    brand: {
+      cream: { hsl: "32 30% 96%", from: "= background; West Elm warm catalog paper" },
+      "cream-deep": { hsl: "32 26% 92%", from: "secondary cream — one tone deeper, sub-nav" },
+      walnut: { hsl: "22 60% 42%", from: "= primary; Article walnut wood — the canonical accent" },
+      "walnut-deep": { hsl: "20 55% 28%", from: "Article walnut hover — gradient anchor, deep wood" },
+      sage: { hsl: "150 18% 56%", from: "= accent; Floyd sage — room-tag and sustainability accent" },
+      rust: { hsl: "18 65% 52%", from: "CB2 rust — seasonal collection mark, used sparingly" },
+      sand: { hsl: "32 35% 82%", from: "warm sand — room-tile gradient backdrop, lifestyle-photo halo" },
+      ink: { hsl: "28 22% 16%", from: "= foreground; walnut-ink, semantic for body and headings" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],
+    containerMax: "max-w-7xl",         // wide — catalog needs lifestyle-photo room
+    containerPadding: "px-5 lg:px-10",
+    sectionPadding: {
+      hero: "pt-20 pb-16 lg:pt-28 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.75rem",                    // 12px — soft but not pillowy; catalog-card softness
+    pillsAllowed: true,                 // pills for room categories, fabric swatches, ship-by chips
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "shadow-room":
+        "0 1px 2px hsl(28 22% 16% / 0.05), 0 8px 28px hsl(28 22% 16% / 0.08)",
+      "shadow-room-lg":
+        "0 2px 4px hsl(28 22% 16% / 0.06), 0 20px 56px hsl(28 22% 16% / 0.12)",
+      "shadow-cream-inset":
+        "inset 0 1px 0 hsl(0 0% 100% / 0.6)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 600,
+      loop: 2400,
+      ambient: 22000,
+    },
+    keyframes: {
+      "fade-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "room-card and product-tile entrance — friendly catalog responsiveness",
+      },
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.96); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 220,
+        iteration: "once",
+        purpose: "swatch swap and add-to-cart confirmation",
+      },
+      "ken-burns-soft": {
+        css:
+          "0% { transform: scale(1.02); }\n" +
+          "100% { transform: scale(1.08); }",
+        defaultDuration: 22000,
+        iteration: "infinite",
+        purpose: "single hero room-photograph drift — never on grid tiles, only on the lead image",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Solid-fill primary (walnut bg, cream text, rounded-lg, shadow-room). Secondary is white card " +
+      "with walnut border. Tertiary is text-link in walnut-deep with underline-on-hover. " +
+      "Filter chips are pills with cream bg. Hover lifts shadow-room → shadow-room-lg.",
+    card:
+      "Rounded-xl, white bg, soft cream border, shadow-room. Internal padding p-5 lg:p-7. " +
+      "Title in Fraunces 500; price + dimensions in Inter + JetBrains Mono. Hover lifts shadow-room-lg.",
+    input:
+      "Full rounded-lg box, cream border, white bg. Focus = walnut 2px ring at 35% opacity. " +
+      "Label above in Inter 500, helper text below in muted-foreground.",
+    cta:
+      "Walnut-fill primary button is the default. Secondary CTAs use white-card or text-link. " +
+      "Room-category nav is a pill row, never a dropdown.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--walnut) / 0.20)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.45)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/gaming-esports/THEME.md

@@ -0,0 +1,146 @@
+# Design Direction — Gaming-Esports
+
+## Ethos
+Riot Games signal-red broadcast · T1 cinematic black + restrained gold · 100 Thieves matte black streetwear · Faze Clan signal red bold · Astralis Danish gold elegance
+
+## Feel
+Premium broadcast-grade gaming brand. Dark cinematic canvas, sharp condensed display type, team-color signal red as the brand mark, restrained championship gold as the focus and accent, full-bleed player portraits color-graded for broadcast. The page reads as the **League of Legends Worlds opening ceremony**, a T1 roster reveal, a 100 Thieves product drop — production design, not platform UI.
+
+Where gaming-streamer is loud-friendly and live-now (purple, presence dots, chat tickers), gaming-esports is **quiet at rest, signal-loud at the brand moments**. Where cinematic-dark is Tesla-engineered and Rolex-restrained (gold-only luxury), gaming-esports is Riot-broadcast and team-color-charged (signal red as the brand mark, gold as the luxury accent for finals/championships only).
+
+## Reference brands
+- **Riot Games** → black canvas + signal red, the League brand mark, Worlds-broadcast production design. The dominant template — this direction owes Riot the signal-red discipline.
+- **T1 esports** → cinematic matte-black, restrained gold accent, Korean roster dignity. The roster-page posture.
+- **100 Thieves** → matte-black + signal red, premium streetwear-adjacent aesthetic. The product-drop / merch-store altitude.
+- **Faze Clan** → dark canvas + signal red, bold condensed all-caps display. The headline-type energy.
+- **Astralis** → dark canvas + restrained Danish gold, considered roster portraiture. The gold-as-luxury-accent source.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin.
+
+Surface stack is **matte-black canvas** (background, `0 0% 4%`) → **lifted card** (`0 0% 7%`) → **popover** (`0 0% 9%`) → **dark steel** (`0 0% 12%`) → **muted** (`0 0% 14%`) → **accent hover** (`0 0% 17%`). The entire stack is neutral-black (zero hue), not blue-black or warm-black — esports broadcast cinematography is graded neutral, not tinted. Depth comes from `.shadow-broadcast` (deep neutral drop) and the occasional `.glow-red` halo on the hero CTA.
+
+Primary is **Riot/Faze/100T signal red** (`0 85% 50%`) — the team-color brand mark, restrained in deployment. It is also `--destructive` — the team-color and the warning state share the same brand mark, deliberately, because in this language signal red IS attention.
+
+Ring is **Astralis / T1 restrained gold** (`42 70% 56%`) — focus is the luxury accent, never signal red. Red is the brand; gold is the moment.
+
+Brand tokens — the working palette:
+- `--riot-red` and `--riot-red-deep` — primary brand mark and gradient/shadow anchor.
+- `--t1-black` — = `--background`; semantic for full-bleed hero backdrop.
+- `--100t-matte` — = `--card`; streetwear product-page card tone.
+- `--astralis-gold` and `--astralis-gold-deep` — focus/ring color and championship/finals accent.
+- `--broadcast-white` — = `--foreground`; the lower-third caption white.
+- `--stat-cyan` — broadcast HUD accent for match-broadcast surfaces only (gold differential, mini-map plates). **Never on marketing pages** — reserved for in-broadcast data overlays.
+
+## Typography
+- **Display:** Oswald (open-source condensed broadcast headline — Riot/Faze poster weight). h1–h4, weights 500/600/700. All-caps friendly, Worlds-stage poster discipline. Headings track **`0.06em` positive** — condensed type at scale reads better with positive tracking, and broadcast lower-thirds are tracked wide by convention.
+- **Body:** Inter. Base **16px** with **line-height 1.55** — comfortable on dark surfaces, T1/100T roster-page convention.
+- **Mono:** JetBrains Mono. Broadcast scoreboard numerics — match clock, KDA, gold differential, tournament seed. Tabular numerics mandatory.
+
+H1 uses `clamp(3rem, 9vw, 7rem)` — oversized, broadcast title-card scale. Body tracking sits at `0.01em` for slight broadcast-caption tightness. Font features: `"ss01", "tnum", "case", "cv11"`.
+
+**All-caps convention:** display headlines and CTA labels are uppercase by default (Oswald is designed for it). Body copy is sentence case.
+
+## Spacing
+- **Container:** `max-w-7xl px-6 lg:px-10` — wide enough for 21:9 full-bleed roster stills and broadcast-grade hero photography.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-36 lg:pb-24` — broadcast title-card scale
+  - Default: `py-20 lg:py-32`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 8 12 16 20 24 32 40 48 64 80 96 128 160. Medium density — cinematic breathing room.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier.
+
+The palette is **matte-black canvas + signal red brand mark + championship gold luxury accent** — never multi-color, never desaturated team rainbows. Signal red is restrained — used on the brand mark, the single hero CTA per page, the LIVE / FINAL match badge, the destructive state. Gold is luxury — used on focus rings, finals/championship surfaces, trophy moments, gold-medal stat callouts.
+
+Pure black is forbidden — `--background` is `0 0% 4%`, the matte-black tone broadcast cinematography uses. Pure white is forbidden — `--foreground` is `40 20% 96%`, the warm broadcast-caption white. Stat-cyan exists for match-broadcast surfaces only — using it on marketing pages reads broadcast-HUD-out-of-context.
+
+**Signal red discipline:** signal red is the brand mark. Bleeding it onto every CTA, every divider, every link destroys the "this matters right now" signal. The rule: **one signal-red moment per visible viewport** (the hero CTA, or the LIVE badge, or the finals callout — pick one).
+
+## Radius
+`--radius: 0.25rem` (4px). **Sharp, engineered chamfer.** Pills are forbidden (`pillsAllowed: false`) — esports broadcast language uses rectangles, bevels, and angled cuts, never rounded chips. Pillow-soft rounding reads consumer app / streamer-platform; sharp rectangles read production design.
+
+## Shadows
+Four utilities — broadcast-grade discipline:
+
+- `.glow-red` — signal-red halo. **Used only on the single hero CTA per page or the LIVE match badge.** Bleeding it onto multiple CTAs ruins the signal — the rule is one glow-red per visible viewport.
+- `.glow-gold` — championship gold halo for finals/trophy/championship surfaces. Astralis-roster, T1-finals territory. Restrained — gold is the luxury moment, not the default.
+- `.shadow-broadcast` — deep neutral drop for full-bleed feature cards and roster-reveal tiles. The default heavy-elevation utility.
+- `.edge-lower-third` — inset bottom 2px signal-red. The broadcast lower-third underline — sits under name plates on roster tiles, under section eyebrows, under the active nav item. **The single subtle red moment** allowed across the page.
+
+Shadows are **neutral-black or signal-saturated** — never colored drop with a tint other than red/gold. Cool-blue or purple-tinted shadows read streamer-platform or cinematic-dark, both wrong-tab.
+
+## Motion
+Four keyframes, broadcast-paced:
+
+- `broadcast-rise` (1000ms once) — roster-reveal and section entrance. Slow broadcast title-card lift, translateY(48px) → 0. Longer than streamer-platform; this is production, not real-time.
+- `ken-burns` (24000ms infinite) — full-bleed player portrait drift on hero photography. Worlds-broadcast camera push.
+- `lower-third-wipe` (600ms once) — name/role plate wipes in left-to-right, the canonical broadcast lower-third reveal. Pairs with `.edge-lower-third`.
+- `scoreboard-flicker` (4000ms infinite) — subtle live-match scoreboard CRT-flicker hint. **Restricted to the score plate only** — bleeding it onto body copy reads broken, not broadcast.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — `broadcast-rise` collapses to opacity-only, `ken-burns` collapses to a static scale, `lower-third-wipe` collapses to a static visible state, `scoreboard-flicker` collapses to a stable opacity 1.
+
+No `marquee`-style scrolling tickers. Esports broadcast pacing is slow reveals and static plates, not horizontal scrolls — those are streamer-platform.
+
+## Component patterns
+- **Buttons:** primary CTA = sharp 0.25rem signal-red rect, broadcast-white text, weight 700, uppercase, tracking `0.08em`. `.glow-red` allowed on the **ONE** hero CTA per page. Secondary = bordered ghost (`border-foreground/0.4`, transparent bg, foreground text, uppercase tracked). Tertiary = text-link in `--astralis-gold` with `underline-offset-2 hover:underline`. **Pills are forbidden** — every CTA is a rectangle.
+- **Cards:** roster-tile card = sharp 0.25rem corners, 1px `border-border`, `bg-card`. Padding `p-6 lg:p-10`. Title in Oswald uppercase tracking 0.08em; player handle in Inter weight 700; role in mono caption. **Full-bleed portrait variant** fills the card with a player image, gradient overlay from `t1-black/0` at top to `t1-black/90` at bottom, name plate at the bottom edge with `.edge-lower-third` red underline. **Featured-tile variant** uses `.shadow-broadcast` for finals/championship surfaces.
+- **Inputs:** sharp 0.25rem corners, `bg-card`, 1px `border-input`. Label sits above in Oswald uppercase tracking `0.1em` in `mutedForeground`. Focus shifts ring to 1px `--astralis-gold` (never red — red is signal, not focus). Helper text below in Inter weight 400.
+- **CTAs:** sharp signal-red rect for the single hero action ("BUY TICKETS," "WATCH FINALS," "ROSTER REVEAL") — uppercase, tracked, weight 700. Secondary CTAs are bordered ghost rectangles. Tertiary are gold underlined text-links. **Never a pill, never a gradient on the primary** — the signal-red rect IS the brand mark.
+
+## Component families
+None at install time. As `*RosterTile`, `*LowerThird`, `*ScorePlate`, `*ChampionshipBanner`, `*MatchClock`, `*PortraitCard` families emerge, the Director lists them here with their shared pattern.
+
+## Recommended rich media
+
+### Cover and hero imagery
+**Player portraiture, broadcast-graded.** This is production design — every hero is anchored by a real player or a real broadcast still, never abstract gradient or 3D render.
+
+- **Full-bleed player portraits** — three-quarter or half-body shots of players in team jerseys, dramatic rim lighting (cool key, warm rim), color-graded matte-black background. Worlds-broadcast roster reveal aesthetic.
+- **Broadcast stage stills** — wide shots of esports arenas mid-match, crowd glow visible, jumbotron in frame, restrained signal-red highlights.
+- **Trophy / championship moments** — players hoiding the Summoner's Cup, gold-graded highlights, championship-gold accent overlay.
+- **Streetwear product flats** — 100 Thieves drop aesthetic; merch laid on matte-black seamless, signal-red branded pieces, single-strobe overhead lighting.
+- **21:9 cinematic stills** — extra-wide aspect ratio for the title-card hero; this is the only direction that calls for 21:9.
+
+### AI tool recommendations
+- **Midjourney** for player portrait hero stills. Prompt scaffold: *"esports player portrait, three-quarter angle, dramatic cool key light with warm signal-red rim, matte-black studio background, color-graded for broadcast, 21:9 cinematic"*. Always specify matte-black and broadcast color grade.
+- **Flux** for broadcast stage stills. Prompt scaffold: *"esports arena stage, wide shot, jumbotron in frame, crowd in dim background, signal-red brand lighting, dramatic broadcast cinematography"*.
+- **Runway** for slow ken-burns hero loops — apply the `ken-burns` keyframe to a still, do not generate native video unless the loop is broadcast-graded.
+- Avoid Midjourney's default high-saturation gaming-art look — explicitly prompt for broadcast color grade, never "vibrant gaming."
+
+### Aspect ratios
+- **21:9 cinematic** — title-card hero, full-bleed player portrait. The signature aspect.
+- **16:9 landscape** — broadcast stills, match recap photography.
+- **3:4 portrait** — roster-tile player portraits, the mandatory roster-grid ratio.
+- **1:1 square** — team logos, championship trophy thumbnails.
+- Avoid 9:16 vertical (streamer/creator-social territory). Avoid 4:3 (off-feel; broadcast doesn't shoot 4:3 anymore).
+
+### Color discipline for imagery
+Broadcast-grade neutral. Matte-black backgrounds, cool key + warm rim lighting, restrained signal-red highlights, championship-gold for finals moments. **If a source image has a saturated rainbow gaming-art cast or default-Midjourney glow, regrade it or do not use it** — the production-design language breaks the moment a "vibrant gaming" image lands.
+
+### What to AVOID
+- **Saturated rainbow gaming art** — that is indie-art-game or streamer-platform territory; reads consumer-game-fan-art, not esports-production.
+- **Purple-tinted dark backgrounds** — streamer-platform territory (gaming-streamer).
+- **Round / pill / soft chrome** — wrong production altitude entirely.
+- **Stock crowd photography** — kills the broadcast-trust signal; use real arena stills or skip.
+- **Multi-color team rainbow palettes** — esports brand discipline is single-team-color (signal red here); if you need a different team color, the project is a different direction.
+- **Live presence dots / chat tickers** — gaming-streamer territory.
+
+### Accessibility
+- **Long-form alt-text on player portraits** — *"Player Faker in three-quarter portrait, T1 jersey, dramatic cool key light, matte-black background."* Treat as broadcast caption.
+- **Signal red on broadcast-white** passes WCAG AA at 14pt+; verify at small caption sizes — small red text on the matte-black canvas is risky.
+- **Uppercase tracked display** — must carry `aria-label` with proper-case text when the visual label is an abbreviation (e.g., "KDA" → `aria-label="kills, deaths, assists"`).
+- All keyframe animations collapse under `prefers-reduced-motion` — verify in DevTools, not just by reading the CSS. `scoreboard-flicker` in particular must hold stable opacity 1 under reduced motion (flicker is a vestibular concern).
+- `.glow-red` and `.glow-gold` are decorative — mark with `aria-hidden="true"`; the label text is the accessible signal.
+
+## Details
+- **Selection:** `hsl(var(--astralis-gold) / 0.35)` background, foreground text. **Gold not red** — selection is a quiet moment, signal red is too loud for it.
+- **Focus ring:** `1px solid hsl(var(--ring))` — thin, gold, broadcast-quiet. Never the 2px assertive ring of dashboard languages.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason. The Director's consistency pass lists all exceptions for human review.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/gaming-esports/tokens.ts

@@ -0,0 +1,199 @@
+import type { Direction } from "../schema";
+
+export const gamingEsports: Direction = {
+  name: "gaming-esports",
+  ethos:
+    "Riot Games signal-red broadcast · T1 cinematic black + restrained gold · 100 Thieves matte black streetwear · Faze signal red bold · Astralis Danish gold elegance",
+  references: [
+    { brand: "Riot Games", trait: "black canvas + signal red, League brand mark, Worlds-broadcast production" },
+    { brand: "T1 esports", trait: "cinematic black, restrained gold accent, Korean roster dignity" },
+    { brand: "100 Thieves", trait: "matte black + signal red, premium streetwear-adjacent aesthetic" },
+    { brand: "Faze Clan", trait: "dark canvas + signal red, bold all-caps display type" },
+    { brand: "Astralis", trait: "dark canvas + restrained gold, Danish elegance, considered roster portraiture" },
+  ],
+  feel:
+    "Premium broadcast-grade gaming brand. Dark cinematic canvas, sharp condensed display type, " +
+    "team-color signal red, full-bleed player portraits color-graded for broadcast. Reads as the " +
+    "League of Legends Worlds opening ceremony, a T1 roster reveal, a 100 Thieves drop page — " +
+    "production design, not platform UI. Quiet at rest; signal-loud at the brand moments.",
+
+  fonts: {
+    display: {
+      family: "Oswald",
+      fallback: ["Bebas Neue", "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", "sans-serif"],
+      from: "Riot Games / Faze condensed broadcast headline — all-caps friendly, Worlds-stage poster weight",
+      googleFont: "Oswald",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["Manrope", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Neutral broadcast body sans — readable at small sizes against dark canvas, T1/100T roster-page convention",
+      googleFont: "Inter",
+      weights: [400, 500, 600, 700],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["SF Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "Broadcast scoreboard numerics — match clock, KDA, gold differential, tournament seed",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "0.06em",
+    bodyTracking: "0.01em",
+    fontFeatureSettings: '"ss01", "tnum", "case", "cv11"',
+    h1ScaleClamp: "clamp(3rem, 9vw, 7rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.55",
+  },
+
+  colors: {
+    background: { hsl: "0 0% 4%", from: "Riot/100T matte-black canvas — near-black, slightly warm to match broadcast cinematography" },
+    foreground: { hsl: "40 20% 96%", from: "Warm off-white — broadcast caption white, never pure" },
+    card: { hsl: "0 0% 7%", from: "Lifted card surface — roster-tile background, one stop up from matte-black" },
+    popover: { hsl: "0 0% 9%", from: "Popover/menu surface, two stops up" },
+
+    primary: { hsl: "0 85% 50%", from: "Riot / Faze / 100T signal red — the team-color brand mark, restrained in deployment" },
+    primaryForeground: { hsl: "40 20% 96%", from: "Warm-white on signal red" },
+
+    secondary: { hsl: "0 0% 12%", from: "Cinematic dark steel — deeper roster-card surface, broadcast lower-third plate" },
+    secondaryForeground: { hsl: "40 20% 96%", from: "Warm-white on dark steel" },
+    muted: { hsl: "0 0% 14%", from: "Muted surface — quieter roster-meta plates, stat blocks" },
+    mutedForeground: { hsl: "40 10% 64%", from: "Broadcast-still gray — caption text, player handles at rest, match-history meta" },
+    accent: { hsl: "0 0% 17%", from: "Hover surface — Astralis brushed-steel highlight, roster-row hover" },
+    accentForeground: { hsl: "40 20% 96%", from: "Warm-white on accent" },
+
+    border: { hsl: "0 0% 18%", from: "Hairline panel-gap — broadcast lower-third edge, engineered visible only on inspection" },
+    input: { hsl: "0 0% 20%", from: "Slightly stronger than border for input affordance" },
+    ring: { hsl: "42 70% 56%", from: "Astralis / T1 restrained gold — focus is the luxury accent, never signal red" },
+
+    destructive: { hsl: "0 85% 50%", from: "= primary; signal red doubles as destructive — team-color and warning share the same brand mark" },
+    destructiveForeground: { hsl: "40 20% 96%", from: "Warm-white on signal red" },
+
+    brand: {
+      "riot-red": { hsl: "0 85% 50%", from: "= primary; Riot Games signal red, League of Legends Worlds brand mark" },
+      "riot-red-deep": { hsl: "0 80% 40%", from: "Pressed/deeper red — gradient anchor, broadcast title-card shadow tone" },
+      "t1-black": { hsl: "0 0% 4%", from: "= background; T1 cinematic matte-black, semantic for full-bleed hero backdrop" },
+      "100t-matte": { hsl: "0 0% 7%", from: "100 Thieves matte-black surface — streetwear product-page card tone" },
+      "astralis-gold": { hsl: "42 70% 56%", from: "= ring; Astralis / T1 restrained gold, championship trophy hue" },
+      "astralis-gold-deep": { hsl: "38 60% 42%", from: "Deeper gold — engraved-trophy gradient anchor, finals-banner shadow" },
+      "broadcast-white": { hsl: "40 20% 96%", from: "= foreground; broadcast caption white, also lower-third text plate" },
+      "stat-cyan": { hsl: "195 90% 60%", from: "Broadcast HUD cyan — alternate stat-overlay accent (gold-differential, mini-map), used in match-broadcast surfaces only" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160],
+    containerMax: "max-w-7xl",
+    containerPadding: "px-6 lg:px-10",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-36 lg:pb-24",
+      default: "py-20 lg:py-32",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0.25rem",
+    pillsAllowed: false,
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-red":
+        "0 0 0 1px hsl(var(--riot-red) / 0.4), " +
+        "0 8px 24px hsl(var(--riot-red) / 0.25), " +
+        "0 40px 120px hsl(var(--riot-red) / 0.18)",
+      "glow-gold":
+        "0 0 0 1px hsl(var(--astralis-gold) / 0.35), " +
+        "0 8px 24px hsl(var(--astralis-gold) / 0.18), " +
+        "0 40px 120px hsl(var(--astralis-gold) / 0.22)",
+      "shadow-broadcast":
+        "0 4px 12px hsl(0 0% 0% / 0.6), 0 24px 80px hsl(0 0% 0% / 0.5)",
+      "edge-lower-third":
+        "inset 0 -2px 0 hsl(var(--riot-red))",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1000,
+      loop: 2400,
+      ambient: 30000,
+    },
+    keyframes: {
+      "broadcast-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(48px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1000,
+        iteration: "once",
+        purpose: "roster-reveal and section entrance — slow broadcast title-card lift",
+      },
+      "ken-burns": {
+        css:
+          "0% { transform: scale(1.06) translate(0, 0); }\n" +
+          "100% { transform: scale(1.18) translate(-2%, -1%); }",
+        defaultDuration: 24000,
+        iteration: "infinite",
+        purpose: "full-bleed player portrait drift — Worlds-broadcast camera push on hero photography",
+      },
+      "lower-third-wipe": {
+        css:
+          "from { transform: scaleX(0); transform-origin: left; }\n" +
+          "to { transform: scaleX(1); transform-origin: left; }",
+        defaultDuration: 600,
+        iteration: "once",
+        purpose: "broadcast lower-third reveal — name/role plate wipes in left-to-right, the canonical reveal gesture",
+      },
+      "scoreboard-flicker": {
+        css:
+          "0%, 100% { opacity: 1; }\n" +
+          "92% { opacity: 1; }\n" +
+          "94% { opacity: 0.85; }\n" +
+          "96% { opacity: 1; }",
+        defaultDuration: 4000,
+        iteration: "infinite",
+        purpose: "live-match scoreboard subtle flicker — broadcast-feed CRT hint on the score plate only, never on body copy",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary CTA = sharp 0.25rem rect with bg-primary (signal red) and broadcast-white text, weight 700, tracking 0.08em uppercase. " +
+      "Pulse-glow / .glow-red allowed on the ONE hero CTA per page. " +
+      "Secondary = bordered ghost (border-foreground/0.4, transparent bg, foreground text, uppercase tracked). " +
+      "Tertiary = text-link in astralis-gold (the luxury accent), underline on hover. " +
+      "Pills are forbidden — esports broadcast language uses rectangles and bevels, never rounded chips.",
+    card:
+      "Roster-tile card = sharp 0.25rem corners, 1px border-border, bg-card (one stop above matte-black). " +
+      "Padding p-6 lg:p-10. Title in Oswald uppercase tracking 0.08em; player handle in Inter weight 700; role in mono caption. " +
+      "Full-bleed portrait variant fills the card with a player image, gradient overlay from t1-black/0 at top to t1-black/90 at bottom, name plate at the bottom edge with .edge-lower-third red underline. " +
+      "Featured-tile variant uses .shadow-broadcast for finals/championship surfaces.",
+    input:
+      "Sharp 0.25rem corners, bg-card, 1px border-input. Label sits above in Oswald uppercase tracking 0.1em mutedForeground. " +
+      "Focus shifts ring to 1px astralis-gold (never red — red is signal, not focus). " +
+      "Helper text below in Inter weight 400 mutedForeground.",
+    cta:
+      "Sharp signal-red rect for the single hero action (BUY TICKETS, WATCH FINALS, ROSTER REVEAL) — uppercase, tracked 0.08em, weight 700. " +
+      "Secondary CTAs are bordered ghost rectangles. Tertiary are gold underlined text-links. " +
+      "Never a pill, never a gradient on the primary CTA — the signal-red rect IS the brand mark.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--astralis-gold) / 0.35)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",
+    scrollbarStyle: "thin",
+  },
+};