@stylecrib/cli 0.0.0-stage → 0.3.2

package/themes/y2k-chrome/tokens.ts

@@ -0,0 +1,249 @@
+import type { Direction } from "../schema";
+
+export const y2kChrome: Direction = {
+  name: "y2k-chrome",
+  ethos:
+    "iMac G4 translucent · iPod gleam · MTV 2001 chrome · Bose Wave optimism · early-WinAmp futurism",
+  references: [
+    { brand: "Apple iMac G3/G4", trait: "translucent shells, candy-colored optimism" },
+    { brand: "Apple iPod (original)", trait: "chrome back, click-wheel gleam" },
+    { brand: "MTV", trait: "2001 broadcast graphics — chrome wordmarks, lens flares" },
+    { brand: "Bose Wave radio", trait: "soft silver product optimism" },
+    { brand: "WinAmp (original)", trait: "skinnable futurism, cyan VU meters" },
+    { brand: "Sony VAIO", trait: "magnesium-and-blue laptop era" },
+  ],
+  feel:
+    "Optimistic-tech nostalgia. Translucent surfaces, chrome gleams, soft cool gradients " +
+    "(silver-to-blue), bubble buttons. Rounded everything. " +
+    "The world hasn't ended yet and the future is shiny.",
+
+  fonts: {
+    display: {
+      family: "Eurostile",
+      fallback: ["Bahnschrift", "DM Sans", "Inter", "system-ui", "sans-serif"],
+      from: "Eurostile — the canonical Y2K display face. Geometric, tech-feel; Bahnschrift covers the same territory on Windows; DM Sans is the web-safe fallback",
+      googleFont: "DM+Sans",
+      weights: [400, 500, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
+      from: "neutral sans — lets the chrome chrome itself; the body text doesn't compete with the gleam",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "Space Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "geometric mono with personality — feels like OS X 10.0 dock fonts and old VAIO BIOS screens",
+      googleFont: "Space+Mono",
+      weights: [400, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "0.01em",        // Eurostile/Bahnschrift breathes wider — slight positive tracking reads "broadcast graphic"
+    bodyTracking: "0",
+    fontFeatureSettings: '"ss01", "cv11"',
+    h1ScaleClamp: "clamp(2.25rem, 5.5vw, 4rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: {
+      hsl: "220 15% 96%",
+      from: "light cool gray — silvery, slight blue bias. iMac G4 desktop pinstripe, drained",
+    },
+    foreground: {
+      hsl: "220 25% 12%",
+      from: "deep cool black — iPod click-wheel engraving, never warm",
+    },
+    card: {
+      hsl: "0 0% 100%",
+      from: "pure white card — the translucent acrylic shell with the light on behind it",
+    },
+    popover: {
+      hsl: "0 0% 100%",
+      from: "same as card; depth comes from gleam shadow, not hue shift",
+    },
+    primary: {
+      hsl: "200 95% 50%",
+      from: "cyan-blue — iMac-era Apple marketing blue, the .com-boom hero color",
+    },
+    primaryForeground: {
+      hsl: "0 0% 100%",
+      from: "white on cyan — bubble-button label",
+    },
+    secondary: {
+      hsl: "220 12% 92%",
+      from: "soft silver — Bose Wave brushed-aluminum, one tier deeper than background",
+    },
+    secondaryForeground: {
+      hsl: "220 25% 12%",
+      from: "deep cool black on silver",
+    },
+    muted: {
+      hsl: "220 12% 92%",
+      from: "same as secondary; differentiation by usage, not color",
+    },
+    mutedForeground: {
+      hsl: "220 14% 44%",
+      from: "Sony VAIO label-print gray — caption and meta text",
+    },
+    accent: {
+      hsl: "220 14% 88%",
+      from: "hover surface — chrome lifted one stop",
+    },
+    accentForeground: {
+      hsl: "220 25% 12%",
+      from: "deep cool black on lifted chrome",
+    },
+    border: {
+      hsl: "220 16% 84%",
+      from: "soft chrome edge — visible but not assertive; the bevel on a Wave radio",
+    },
+    input: {
+      hsl: "220 16% 84%",
+      from: "same as border — translucent recessed field",
+    },
+    ring: {
+      hsl: "200 95% 50%",
+      from: "primary cyan, used for focus only — WinAmp VU-meter glow",
+    },
+    destructive: {
+      hsl: "350 85% 56%",
+      from: "saturated alert — Y2K palette stays cool, but errors need to read; pulled toward magenta, not blood-red",
+    },
+    destructiveForeground: {
+      hsl: "0 0% 100%",
+      from: "white on alert",
+    },
+    brand: {
+      "chrome-light": {
+        hsl: "220 10% 88%",
+        from: "iPod chrome back, top stop — the highlight in a brushed-metal gradient",
+      },
+      "chrome-mid": {
+        hsl: "220 12% 78%",
+        from: "iPod chrome back, mid stop — the body of the bevel",
+      },
+      "chrome-deep": {
+        hsl: "220 18% 55%",
+        from: "iPod chrome back, lower stop — the underside of the bevel, just before the drop shadow",
+      },
+      "cyan-hot": {
+        hsl: "180 100% 50%",
+        from: "WinAmp VU-meter peak, MTV 2001 broadcast cyan — the saturated accent, used as glow only",
+      },
+      lavender: {
+        hsl: "260 50% 78%",
+        from: "Y2K secondary palette — Bondi-era Apple lilac, Sony VAIO accent strip; used for status, tags, the second accent",
+      },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 32, 48],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-10 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "1rem",                     // 16px — iMac G4 dome corner radius; bubble button territory
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      gleam:
+        "inset 0 1px 0 hsl(0 0% 100% / 0.85), " +              // top inner highlight — the wet-look catch
+        "inset 0 -1px 0 hsl(220 18% 55% / 0.25), " +           // bottom inner shade — the bevel underside
+        "0 1px 2px hsl(220 25% 12% / 0.08), " +
+        "0 8px 24px hsl(200 95% 50% / 0.12)",                  // drop shadow tinted cyan — the iMac shelf glow
+      "gleam-lg":
+        "inset 0 1px 0 hsl(0 0% 100% / 0.9), " +
+        "inset 0 -2px 0 hsl(220 18% 55% / 0.3), " +
+        "0 2px 4px hsl(220 25% 12% / 0.1), " +
+        "0 18px 48px hsl(200 95% 50% / 0.18)",                 // hover-lifted gleam
+      "chrome-edge":
+        "inset 0 1px 0 hsl(220 10% 88% / 1), " +               // chrome-light top
+        "inset 0 0 0 1px hsl(220 12% 78% / 0.6), " +           // chrome-mid hairline
+        "inset 0 -1px 0 hsl(220 18% 55% / 0.8)",               // chrome-deep bottom — simulates a multi-stop gradient border
+      "glow-cyan":
+        "0 0 0 1px hsl(200 95% 50% / 0.4), " +
+        "0 0 24px hsl(180 100% 50% / 0.35)",                   // WinAmp peak indicator, focus state
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 200,                    // scale-in entrance — short and confident
+      loop: 3000,                     // pulse-glow ambient
+      ambient: 4000,                  // gleam-sweep across surfaces
+    },
+    keyframes: {
+      "scale-in": {
+        css:
+          "from { opacity: 0; transform: scale(0.96); }\n" +
+          "to { opacity: 1; transform: scale(1); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "standard appear — bubble buttons, modals, popovers; confirms the click without bouncing",
+      },
+      "pulse-glow": {
+        css:
+          "0%, 100% { opacity: 1; }\n" +
+          "50% { opacity: 0.65; }",
+        defaultDuration: 3000,
+        iteration: "infinite",
+        purpose: "slow ambient oscillation on glow accents — the WinAmp VU meter at rest",
+      },
+      "gleam-sweep": {
+        css:
+          "0% { background-position: -150% 0; }\n" +
+          "100% { background-position: 250% 0; }",
+        defaultDuration: 4000,
+        iteration: "infinite",
+        purpose: "light sweep across a chrome surface — the catch of light moving across an iPod back",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Gradient-filled bubble buttons (cyan-to-blue, top-light to bottom-dark) with inner highlight via `.gleam`. " +
+      "Very rounded (`rounded-2xl`, pills allowed for compact actions). " +
+      "Solid is the norm here — text-links are the ghost variant. " +
+      "Hover: lift via `gleam-lg` and a 1.02 scale; never a flat color swap.",
+    card:
+      "Translucent white card on the cool-gray background, `chrome-edge` border, `rounded-2xl`, `gleam` shadow. " +
+      "Internal padding `p-6 lg:p-8`. Title in Eurostile/Bahnschrift display. " +
+      "Hover lifts to `gleam-lg`. Optional `gleam-sweep` accent strip on hero cards only.",
+    input:
+      "Full `rounded-xl` box, `chrome-edge` inset border, `bg-card`. " +
+      "Focus = `glow-cyan` ring (cyan-hot at 35% opacity). " +
+      "Label above; helper text below in `mutedForeground`.",
+    cta:
+      "Gradient bubble button is the default. " +
+      "Secondary CTAs use a ghost variant (chrome-edge border, foreground text) or a text-link in primary cyan with an underline-on-hover.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.25)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.6)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/yoga-studio/THEME.md

@@ -0,0 +1,76 @@
+# Design Direction — Yoga-Studio
+
+## Ethos
+Alo cream paper · Y7 candlelit terracotta · Modo sage minimalism · CorePower studio whitespace · The Class breathwork hush
+
+## Feel
+Cream paper, slim sans, one earth accent — sage *or* terracotta, never both as equals (sage is primary, terracotta is the focus mark). Whitespace is paced to a four-count inhale. The class list reads like a recital program, not a calendar app. Lowercase where possible. The page exhales.
+
+## Reference brands
+- **Alo Yoga** → cream paper, slim sans, almost-no-color storefront.
+- **Y7 Studio** → candlelit terracotta accent, single-word section headers.
+- **Modo Yoga** → sage-green ethical mark, breath-paced layout.
+- **CorePower Yoga** → studio whitespace, oversized roman-numeral schedule.
+- **The Class by Taryn Toomey** → ritual typography, low-contrast quiet luxury.
+
+## Tokens
+Surface stack is **cream paper** (background) → **lighter cream** (card) → **deeper cream** (secondary / muted / accent). Depth is hairline rule, never fill differentiation. Brand tokens: `--sage`, `--sage-deep`, `--terracotta`, `--cream`, `--ink`, `--ink-soft`. Primary is `--sage` — the ethical mark. Ring is `--terracotta` — the ritual focus color. Never both on the same element.
+
+## Typography
+- **Display:** Cormorant Garamond. Slim, high-contrast, italic-friendly. Headings often set lowercase — "twelve classes this week" reads more as a recital line than "TWELVE CLASSES THIS WEEK".
+- **Body:** Inter 300/400. Light weights only — Alo storefront restraint. 17px base, line-height 1.7.
+- **Mono:** JetBrains Mono. Reserved for schedule times and pass prices — recital-program restraint.
+
+H1 uses `clamp(2.25rem, 5vw, 4rem)` — restrained, never JUMBOTRON. Tracking `-0.01em` on display, `0.005em` on body (a hair of air — breathwork pacing).
+
+## Spacing
+- **Container:** `max-w-5xl px-6 lg:px-12` — studio-width, not stadium. Matt-width reading.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-36 lg:pb-24` (a long inhale before the page begins)
+  - Default: `py-20 lg:py-28`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 40 48 64 96 128. No arbitrary spacing.
+
+## Color
+No hex in components — tokens only. Pure white and pure black are forbidden; use `--cream` and `--ink`. Saturated colors are forbidden — there is no rule for a brand-blue, brand-purple, or signal-red. If a status needs to be flagged: sage for go, terracotta for warmth, `--destructive` for cancel — that is the entire palette.
+
+## Radius
+`--radius: 0`. Sharp corners only. Pills are disallowed (`pillsAllowed: false`) — they read web-app, not studio. Class times sit on hairline rules; pass tiers sit in hairline-bordered rectangles; nothing rounds.
+
+## Shadows
+**Minimal.** Single utility: `.hairline-bottom` (1px bottom rule in `--border`). No drop shadows. No glows. The studio doesn't lift.
+
+## Motion
+Two keyframes: `breath-fade` (1400ms entrance, opacity + 16px translate) and `breath-pulse` (4000ms loop, opacity 0.85 → 1 → 0.85). The pulse cycle is deliberately a four-second inhale-exhale. No ken-burns, no marquee, no parallax — the page is still on purpose.
+
+Easing `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored.
+
+## Component patterns
+- **Buttons:** lowercase text-link primary in sage, underline-on-hover. The single hero action may be a hairline-bordered rectangle with sage text — never filled. Terracotta is reserved for focus/ritual marks, never a button face.
+- **Class schedule rows:** *no card at all*. Recital-program lines: time on the left in mono, class name in italic display, instructor in body, hairline-bottom between rows.
+- **Instructor cards:** bordered top + bottom only, no fill, portrait above and bio below — never a tile with shadow.
+- **Pass tiers:** hairline-bordered rectangles, three across, sage price in display, terms in body, lowercase CTA underneath. Never highlighted or "most popular" — the studio doesn't sell up.
+- **Inputs:** border-bottom only, 1px `--ink-soft`. Mono uppercase label above (tracking 0.18em). Focus is a terracotta underline, never a box.
+
+## Recommended rich media
+Photography is the lead medium: instructor portraits in natural north-facing light, studios empty mid-afternoon, mat-edge close-ups, candle still-lifes. Color graded to warm cream-shadow, never high-key. Aspect ratios 4:5 portrait or 3:2 landscape. Never 16:9 cinematic. Never stock-photo "happy multicultural class clapping". No icons-on-pillow illustration. No 3D renders.
+
+**AI tool recommendations:** Midjourney with *"natural studio light, Kinfolk magazine, Kodak Portra 400, soft cream tones, slight grain"*. Avoid bright-saturated wellness stock.
+
+**Performance:** hero ≤120 KB AVIF. The studio site loads quickly because there is nothing heavy to load.
+
+**Avoid:** rainbow chakra graphics, lotus icon decoration, namaste hands emoji, motivational quotes in script fonts, dark-mode toggle, parallax, video autoplay, glassmorphic anything.
+
+## Component families
+None at install time.
+
+## Details
+- **Selection:** `hsl(var(--terracotta) / 0.22)` — the only place terracotta touches body text.
+- **Focus ring:** 1px solid terracotta — quiet, just visible.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/yoga-studio/tokens.ts

@@ -0,0 +1,163 @@
+import type { Direction } from "../schema";
+
+// yoga-studio — Alo / Y7 / Modo restraint. Cream paper, slim sans, single
+// sage-or-terracotta accent, breath-paced whitespace. Matt unrolled, room
+// quiet, instructor speaking softly. The opposite of a sports site.
+export const yogaStudio: Direction = {
+  name: "yoga-studio" as Direction["name"],
+  ethos:
+    "Alo cream-paper restraint · Y7 candlelit warmth · Modo sage minimalism · " +
+    "CorePower studio whitespace · The Class breathwork hush",
+  references: [
+    { brand: "Alo Yoga", trait: "cream paper, slim sans, almost-no-color storefront" },
+    { brand: "Y7 Studio", trait: "candlelit terracotta accent, single-word section headers" },
+    { brand: "Modo Yoga", trait: "sage-green ethical mark, breath-paced layout" },
+    { brand: "CorePower Yoga", trait: "studio whitespace, oversized roman-numeral schedule" },
+    { brand: "The Class by Taryn Toomey", trait: "ritual typography, low-contrast quiet luxury" },
+  ],
+  feel:
+    "Cream paper, slim sans, one earth accent — sage or terracotta, never both. " +
+    "Whitespace is paced to a four-count inhale. The class list reads like a recital program, " +
+    "not a calendar app. Lower-case where possible. The page exhales.",
+
+  fonts: {
+    display: {
+      family: "Cormorant Garamond",
+      fallback: ["EB Garamond", "Iowan Old Style", "Times New Roman", "serif"],
+      from: "Alo/Class slender display serif — high-contrast, almost handwritten in italic, lowercase-friendly",
+      googleFont: "Cormorant+Garamond",
+      weights: [300, 400, 500],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "Helvetica Neue", "sans-serif"],
+      from: "Alo/Modo clean modern sans — neutral, never decorative under instructor names and class titles",
+      googleFont: "Inter",
+      weights: [300, 400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      from: "tabular time-of-day for schedule rows — recital-program restraint, never code-block heavy",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.01em",                 // serif tightens slightly at display scale
+    bodyTracking: "0.005em",                    // a hair of air — breathwork pacing in copy too
+    fontFeatureSettings: '"ss01", "tnum", "calt"',
+    h1ScaleClamp: "clamp(2.25rem, 5vw, 4rem)",  // restrained — never JUMBOTRON, this is a studio not an arena
+    bodyBaseSize: "1.0625rem",                  // 17px — Alo-storefront comfortable read
+    bodyLineHeight: "1.7",                      // editorial pacing, not dashboard density
+  },
+
+  colors: {
+    background: { hsl: "38 30% 96%", from: "Alo cream paper — warm, off-white, never pure" },
+    foreground: { hsl: "30 14% 18%", from: "soft ink — bark brown, never pure black on cream" },
+    card: { hsl: "38 32% 98%", from: "elevated surface — one stop lighter than paper, hairline-defined" },
+    popover: { hsl: "38 34% 99%", from: "menu/popover — nearly white, sits cleanly above paper" },
+    primary: { hsl: "120 14% 38%", from: "Modo sage green — the single ethical mark, restrained" },
+    primaryForeground: { hsl: "38 30% 96%", from: "cream on sage — never high-contrast white" },
+    secondary: { hsl: "38 24% 92%", from: "deeper cream — secondary surface, recital-program tier" },
+    secondaryForeground: { hsl: "30 14% 18%", from: "ink on deeper cream" },
+    muted: { hsl: "38 22% 90%", from: "muted paper — sits between secondary and border, breath-shadow" },
+    mutedForeground: { hsl: "30 10% 46%", from: "instructor-name gray — warm, soft, conversational" },
+    accent: { hsl: "38 26% 88%", from: "hover paper — the lightest possible interaction surface" },
+    accentForeground: { hsl: "30 14% 18%", from: "ink on hover paper" },
+    border: { hsl: "30 14% 82%", from: "hairline rule — recital-program divider, never harsh" },
+    input: { hsl: "30 14% 82%", from: "same as border — single hairline language" },
+    ring: { hsl: "16 56% 48%", from: "Y7 terracotta — the secondary accent, used only as focus marker" },
+    destructive: { hsl: "8 56% 46%", from: "soft alert — class-canceled tone, never fire-engine red" },
+    destructiveForeground: { hsl: "38 30% 96%", from: "cream on alert" },
+    brand: {
+      sage: { hsl: "120 14% 38%", from: "Modo sage — primary ethical mark, also semantic primary" },
+      "sage-deep": { hsl: "118 16% 28%", from: "deeper sage — used only for hover on primary text-link" },
+      terracotta: { hsl: "16 56% 48%", from: "Y7 candle-glow terracotta — the warm accent, focus + ritual marks" },
+      cream: { hsl: "38 30% 96%", from: "Alo paper — the canvas, also background" },
+      ink: { hsl: "30 14% 18%", from: "bark — the body color, also foreground" },
+      "ink-soft": { hsl: "30 10% 46%", from: "instructor gray — secondary text" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 128],   // breath-paced — finite, generous
+    containerMax: "max-w-5xl",                  // narrow — studio not arena, mat-width reading
+    containerPadding: "px-6 lg:px-12",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-36 lg:pb-24",    // long inhale before the page starts
+      default: "py-20 lg:py-28",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "0",                                  // sharp — recital program, never web-app pillow
+    pillsAllowed: false,                        // pills read app/dashboard; studio is paper
+  },
+
+  shadows: {
+    style: "minimal",
+    utilities: {
+      "hairline-bottom":
+        "0 1px 0 0 hsl(var(--border))",        // recital-program rule, single utility
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 1400,                             // long inhale — slower than editorial on purpose
+      loop: 4000,                               // breath-pace loops, never quicker
+      ambient: 0,                               // no ken-burns, no marquee — the page is still
+    },
+    keyframes: {
+      "breath-fade": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 1400,
+        iteration: "once",
+        purpose: "section entrance — slow, single breath in, no overshoot",
+      },
+      "breath-pulse": {
+        css:
+          "0%, 100% { opacity: 0.85; }\n" +
+          "50% { opacity: 1; }",
+        defaultDuration: 4000,
+        iteration: "infinite",
+        purpose: "live-class dot — four-second cycle, the canonical inhale-exhale tempo",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "low",
+
+  patterns: {
+    button:
+      "Text-link primary by default — sage foreground, underline-on-hover, lowercase. " +
+      "The single hero action per page may render as a hairline-bordered rectangle with sage text, never filled. " +
+      "Terracotta is reserved for ritual marks (focus rings, breath dots) — never a button face.",
+    card:
+      "Sharp corners, hairline border (--border), bg-card. Padding p-8 lg:p-10. " +
+      "Class-schedule rows use no card at all — they are recital-program lines with hairline-bottom. " +
+      "Instructor cards are bordered top + bottom only, no fill, portrait above and bio below.",
+    input:
+      "Border-bottom only, 1px --ink-soft, bg transparent, no radius. " +
+      "Label above in mono uppercase tracking 0.18em — recital-program section header. " +
+      "Focus is a terracotta underline, never a box.",
+    cta:
+      "Lowercase text-link in sage, underline-on-hover. The hero may use a hairline-bordered rectangle. " +
+      "Never a filled button, never a gradient, never a pill.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--terracotta) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "1px solid hsl(var(--ring))",   // 1px terracotta — quiet, just visible
+    scrollbarStyle: "thin",
+  },
+};