@amulet-laboratories/hex 0.3.0

package/src/scoped/themes/garden.css

@@ -0,0 +1,123 @@
+/* Hex — garden (scoped) */
+
+/* Hex — Garden Design Tokens
+ * Warm botanical palette derived from Garden Estudio's brand identity.
+ * Deep purple background, warm cream text, rose accents, botanical greens.
+ * Dark mode marketing theme — suited for portfolio and showcase sites.
+ *
+ * Full palette (13 swatch colors):
+ *   #331F3C  deep purple     — background
+ *   #AC3954  dark rose       — secondary, borders
+ *   #EB4963  amulet rose     — primary brand
+ *   #F16874  warm pink       — accent
+ *   #F58384  coral pink      — destructive
+ *   #F99C94  warm salmon     — status
+ *   #F9B0A2  light salmon    — muted foreground
+ *   #F8C7B3  apricot         — soft accent
+ *   #F7D7B9  peach           — warning
+ *   #F5E3BC  warm cream      — foreground text
+ *   #EDECC0  pale chartreuse — subtle highlights
+ *   #D8E8C3  sage green      — info
+ *   #CBE6C5  mint green      — success
+ *
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
+ */
+
+[data-hex-theme='garden'] {
+  --color-background: #331f3c;
+  --color-foreground: #f5e3bc;
+  --color-card: #eb4963;
+  --color-card-foreground: #f5e3bc;
+  --color-popover: #331f3c;
+  --color-popover-foreground: #f5e3bc;
+  --color-primary: #eb4963;
+  --color-primary-foreground: #f5e3bc;
+  --color-secondary: #ac3954;
+  --color-secondary-foreground: #f5e3bc;
+  --color-muted: #ac3954;
+  --color-muted-foreground: #f9b0a2;
+  --color-accent: #f16874;
+  --color-accent-foreground: #331f3c;
+  --color-destructive: #f58384;
+  --color-destructive-foreground: #331f3c;
+  --color-success: #cbe6c5;
+  --color-warning: #f7d7b9;
+  --color-info: #d8e8c3;
+  --color-border: #ac3954;
+  --color-input: #ac3954;
+  --color-ring: #eb4963;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
+  --font-sans: 'Roboto Slab', 'Georgia', 'Times New Roman', serif;
+  --font-serif: 'Roboto Slab', 'Georgia', 'Times New Roman', serif;
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --radius: 7px;
+  --background: #331f3c;
+  --foreground: #f5e3bc;
+  --card: #eb4963;
+  --card-foreground: #f5e3bc;
+  --popover: #331f3c;
+  --popover-foreground: #f5e3bc;
+  --primary: #eb4963;
+  --primary-foreground: #f5e3bc;
+  --secondary: #ac3954;
+  --secondary-foreground: #f5e3bc;
+  --muted: #ac3954;
+  --muted-foreground: #f9b0a2;
+  --accent: #f16874;
+  --accent-foreground: #331f3c;
+  --destructive: #f58384;
+  --destructive-foreground: #331f3c;
+  --success: #cbe6c5;
+  --warning: #f7d7b9;
+  --info: #d8e8c3;
+  --border: #ac3954;
+  --input: #ac3954;
+  --ring: #eb4963;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --garden-deep-purple: #331f3c;
+  --garden-dark-rose: #ac3954;
+  --garden-rose: #eb4963;
+  --garden-warm-pink: #f16874;
+  --garden-coral: #f58384;
+  --garden-warm-salmon: #f99c94;
+  --garden-light-salmon: #f9b0a2;
+  --garden-apricot: #f8c7b3;
+  --garden-peach: #f7d7b9;
+  --garden-cream: #f5e3bc;
+  --garden-chartreuse: #edecc0;
+  --garden-sage: #d8e8c3;
+  --garden-mint: #cbe6c5;
+  --rig-button-hover-bg: #ac3954;
+  --rig-scrollbar-thumb: rgba(245, 227, 188, 0.18);
+  --rig-scrollbar-thumb-hover: rgba(245, 227, 188, 0.35);
+}

package/src/scoped/themes/greyline.css

@@ -0,0 +1,116 @@
+/* Hex — greyline (scoped) */
+
+/* Hex — Greyline Design Tokens
+ * True achromatic monochrome. Grayscale newspaper / monochrome monitor.
+ * Dark mode corporate/consultancy theme — suited for professional services.
+ * Every color is pure gray (h=0, s=0) — no blue, no warm tint.
+ *
+ * Palette:
+ *   #0c0c0c  near-black      — background
+ *   #141414  charcoal        — card, popover
+ *   #1c1c1c  dark gray       — secondary, muted
+ *   #2a2a2a  border gray     — borders
+ *   #606060  medium gray     — muted foreground
+ *   #9a9a9a  silver          — primary brand
+ *   #b5b5b5  light silver    — accent
+ *   #e8e8e8  near-white      — foreground text
+ *   #f87171  red             — destructive
+ *   #fbbf24  amber           — warning
+ *   #34d399  emerald         — success
+ *   #60a5fa  blue            — info
+ *
+ * @theme feeds Tailwind v4 utility generation.
+ * :root provides standalone CSS custom property access.
+ */
+
+[data-hex-theme='greyline'] {
+  --color-background: #0c0c0c;
+  --color-foreground: #e8e8e8;
+  --color-card: #141414;
+  --color-card-foreground: #e8e8e8;
+  --color-popover: #141414;
+  --color-popover-foreground: #e8e8e8;
+  --color-primary: #9a9a9a;
+  --color-primary-foreground: #0c0c0c;
+  --color-secondary: #1c1c1c;
+  --color-secondary-foreground: #e8e8e8;
+  --color-muted: #1c1c1c;
+  --color-muted-foreground: #606060;
+  --color-accent: #b5b5b5;
+  --color-accent-foreground: #0c0c0c;
+  --color-destructive: #f87171;
+  --color-destructive-foreground: #0c0c0c;
+  --color-success: #34d399;
+  --color-warning: #fbbf24;
+  --color-info: #60a5fa;
+  --color-border: #2a2a2a;
+  --color-input: #2a2a2a;
+  --color-ring: #9a9a9a;
+  --font-mono: 'IBM Plex Mono', 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
+  --font-sans: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --radius: 4px;
+  --background: #0c0c0c;
+  --foreground: #e8e8e8;
+  --card: #141414;
+  --card-foreground: #e8e8e8;
+  --popover: #141414;
+  --popover-foreground: #e8e8e8;
+  --primary: #9a9a9a;
+  --primary-foreground: #0c0c0c;
+  --secondary: #1c1c1c;
+  --secondary-foreground: #e8e8e8;
+  --muted: #1c1c1c;
+  --muted-foreground: #606060;
+  --accent: #b5b5b5;
+  --accent-foreground: #0c0c0c;
+  --destructive: #f87171;
+  --destructive-foreground: #0c0c0c;
+  --success: #34d399;
+  --warning: #fbbf24;
+  --info: #60a5fa;
+  --border: #2a2a2a;
+  --input: #2a2a2a;
+  --ring: #9a9a9a;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --gl-black: #0c0c0c;
+  --gl-charcoal: #141414;
+  --gl-surface: #1c1c1c;
+  --gl-border: #2a2a2a;
+  --gl-muted: #606060;
+  --gl-silver: #9a9a9a;
+  --gl-silver-light: #b5b5b5;
+  --gl-white: #e8e8e8;
+  --rig-button-hover-bg: #1c1c1c;
+  --rig-scrollbar-thumb: rgba(232, 232, 232, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(232, 232, 232, 0.25);
+}

package/src/scoped/themes/kbcv.css

@@ -0,0 +1,111 @@
+/* Hex — kbcv (scoped) */
+
+/* Hex — KBCV Design Tokens
+ * Community radio station. Warm neutral with analog character.
+ * Parchment background, broadcast red, dial green accents.
+ *
+ * Full palette (7 swatch colors):
+ *   #F7F3EE  parchment       — background
+ *   #EDEAE4  oatmeal         — card
+ *   #DDD7CE  kraft           — secondary, muted
+ *   #2A2521  espresso        — foreground text
+ *   #706459  walnut          — muted foreground
+ *   #B83232  broadcast red   — primary, ring
+ *   #2D6A4F  dial green      — accent
+ *
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
+ */
+
+[data-hex-theme='kbcv'] {
+  --color-background: #f7f3ee;
+  --color-foreground: #2a2521;
+  --color-card: #edeae4;
+  --color-card-foreground: #2a2521;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #2a2521;
+  --color-primary: #b83232;
+  --color-primary-foreground: #fffdf8;
+  --color-secondary: #ddd7ce;
+  --color-secondary-foreground: #2a2521;
+  --color-muted: #ddd7ce;
+  --color-muted-foreground: #706459;
+  --color-accent: #2d6a4f;
+  --color-accent-foreground: #fffdf8;
+  --color-destructive: #b83232;
+  --color-destructive-foreground: #fffdf8;
+  --color-success: #2d6a4f;
+  --color-warning: #d4a030;
+  --color-info: #4a6a8a;
+  --color-border: #cbc4ba;
+  --color-input: #cbc4ba;
+  --color-ring: #b83232;
+  --font-sans: 'Chivo', 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Newsreader', Georgia, serif;
+  --font-heading: 'Chivo', 'Inter', system-ui, sans-serif;
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --radius: 6px;
+  --background: #f7f3ee;
+  --foreground: #2a2521;
+  --card: #edeae4;
+  --card-foreground: #2a2521;
+  --popover: #ffffff;
+  --popover-foreground: #2a2521;
+  --primary: #b83232;
+  --primary-foreground: #fffdf8;
+  --secondary: #ddd7ce;
+  --secondary-foreground: #2a2521;
+  --muted: #ddd7ce;
+  --muted-foreground: #706459;
+  --accent: #2d6a4f;
+  --accent-foreground: #fffdf8;
+  --destructive: #b83232;
+  --destructive-foreground: #fffdf8;
+  --success: #2d6a4f;
+  --warning: #d4a030;
+  --info: #4a6a8a;
+  --border: #cbc4ba;
+  --input: #cbc4ba;
+  --ring: #b83232;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --kbcv-parchment: #f7f3ee;
+  --kbcv-oatmeal: #edeae4;
+  --kbcv-kraft: #ddd7ce;
+  --kbcv-espresso: #2a2521;
+  --kbcv-walnut: #706459;
+  --kbcv-red: #b83232;
+  --kbcv-green: #2d6a4f;
+  --rig-button-hover-bg: #ddd7ce;
+  --rig-scrollbar-thumb: rgba(42, 37, 33, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(42, 37, 33, 0.25);
+}

package/src/scoped/themes/lanternhouse.css

@@ -0,0 +1,111 @@
+/* Hex — lanternhouse (scoped) */
+
+/* Hex — Lanternhouse Design Tokens
+ * Evening observatory. Soft violet glow on deep plum.
+ * Boutique hospitality theme with lavender accent on dark plum canvas.
+ *
+ * Full palette (7 swatch colors):
+ *   #110E18  dark plum       — background
+ *   #1A1624  deep violet     — card, popover
+ *   #221E30  muted plum      — secondary, muted
+ *   #E4DFF0  lavender white  — foreground text
+ *   #8A80A0  dusty violet    — muted foreground
+ *   #7A8EB8  cool blue       — info
+ *   #A87BD4  soft lavender   — primary, accent (h≈280)
+ *
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
+ */
+
+[data-hex-theme='lanternhouse'] {
+  --color-background: #110e18;
+  --color-foreground: #e4dff0;
+  --color-card: #1a1624;
+  --color-card-foreground: #e4dff0;
+  --color-popover: #1a1624;
+  --color-popover-foreground: #e4dff0;
+  --color-primary: #a87bd4;
+  --color-primary-foreground: #110e18;
+  --color-secondary: #221e30;
+  --color-secondary-foreground: #e4dff0;
+  --color-muted: #221e30;
+  --color-muted-foreground: #8a80a0;
+  --color-accent: #a87bd4;
+  --color-accent-foreground: #110e18;
+  --color-destructive: #c04a4a;
+  --color-destructive-foreground: #e4dff0;
+  --color-success: #5aaa70;
+  --color-warning: #d4a843;
+  --color-info: #7a8eb8;
+  --color-border: #2e2840;
+  --color-input: #2e2840;
+  --color-ring: #a87bd4;
+  --font-sans: 'Josefin Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Josefin Sans', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Bodoni Moda', 'Lora', Georgia, serif;
+  --font-heading: 'Bodoni Moda', 'Lora', Georgia, serif;
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --radius: 5px;
+  --background: #110e18;
+  --foreground: #e4dff0;
+  --card: #1a1624;
+  --card-foreground: #e4dff0;
+  --popover: #1a1624;
+  --popover-foreground: #e4dff0;
+  --primary: #a87bd4;
+  --primary-foreground: #110e18;
+  --secondary: #221e30;
+  --secondary-foreground: #e4dff0;
+  --muted: #221e30;
+  --muted-foreground: #8a80a0;
+  --accent: #a87bd4;
+  --accent-foreground: #110e18;
+  --destructive: #c04a4a;
+  --destructive-foreground: #e4dff0;
+  --success: #5aaa70;
+  --warning: #d4a843;
+  --info: #7a8eb8;
+  --border: #2e2840;
+  --input: #2e2840;
+  --ring: #a87bd4;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --lh-plum: #110e18;
+  --lh-deep: #1a1624;
+  --lh-charcoal: #221e30;
+  --lh-cream: #e4dff0;
+  --lh-dusty: #8a80a0;
+  --lh-steel: #7a8eb8;
+  --lh-lavender: #a87bd4;
+  --rig-button-hover-bg: #221e30;
+  --rig-scrollbar-thumb: rgba(228, 223, 240, 0.15);
+  --rig-scrollbar-thumb-hover: rgba(228, 223, 240, 0.3);
+}

package/src/scoped/themes/marenlys.css

@@ -0,0 +1,112 @@
+/* Hex — marenlys (scoped) */
+
+/* Hex — Marenlys Design Tokens
+ * Editorial polish. Crisp white with magenta-pink signature.
+ * Ultra-light mode artist portfolio theme with magenta-pink accent.
+ *
+ * Full palette (7 swatch colors):
+ *   #FAFAFA  gallery white   — background
+ *   #FAF5F8  pink tint       — card
+ *   #F2E8F0  blush           — secondary, muted
+ *   #1A0A18  dark magenta    — foreground text
+ *   #846578  mauve           — muted foreground
+ *   #E5D5E0  rose border     — borders
+ *   #C43A8A  magenta-pink    — primary, accent
+ *
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
+ */
+
+[data-hex-theme='marenlys'] {
+  --color-background: #fafafa;
+  --color-foreground: #1a0a18;
+  --color-card: #faf5f8;
+  --color-card-foreground: #1a0a18;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1a0a18;
+  --color-primary: #c43a8a;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f2e8f0;
+  --color-secondary-foreground: #1a0a18;
+  --color-muted: #f2e8f0;
+  --color-muted-foreground: #846578;
+  --color-accent: #c43a8a;
+  --color-accent-foreground: #ffffff;
+  --color-destructive: #cc4444;
+  --color-destructive-foreground: #ffffff;
+  --color-success: #44884a;
+  --color-warning: #b8952a;
+  --color-info: #7a5a9a;
+  --color-border: #e5d5e0;
+  --color-input: #e5d5e0;
+  --color-ring: #c43a8a;
+  --font-sans: 'Instrument Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Instrument Sans', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Instrument Serif', Georgia, serif;
+  --font-heading: 'Instrument Serif', Georgia, serif;
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --radius: 0px;
+  --background: #fafafa;
+  --foreground: #1a0a18;
+  --card: #faf5f8;
+  --card-foreground: #1a0a18;
+  --popover: #ffffff;
+  --popover-foreground: #1a0a18;
+  --primary: #c43a8a;
+  --primary-foreground: #ffffff;
+  --secondary: #f2e8f0;
+  --secondary-foreground: #1a0a18;
+  --muted: #f2e8f0;
+  --muted-foreground: #846578;
+  --accent: #c43a8a;
+  --accent-foreground: #ffffff;
+  --destructive: #cc4444;
+  --destructive-foreground: #ffffff;
+  --success: #44884a;
+  --warning: #b8952a;
+  --info: #7a5a9a;
+  --border: #e5d5e0;
+  --input: #e5d5e0;
+  --ring: #c43a8a;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --ml-gallery: #fafafa;
+  --ml-pink-tint: #faf5f8;
+  --ml-blush: #f2e8f0;
+  --ml-dark-magenta: #1a0a18;
+  --ml-mauve: #846578;
+  --ml-rose-border: #e5d5e0;
+  --ml-magenta: #c43a8a;
+  --rig-button-hover-bg: #f2e8f0;
+  --rig-scrollbar-thumb: rgba(26, 10, 24, 0.08);
+  --rig-scrollbar-thumb-hover: rgba(26, 10, 24, 0.18);
+  --site-max-width: 64rem;
+}

package/src/scoped/themes/quizbit.css

@@ -0,0 +1,101 @@
+/* Hex — quizbit (scoped) */
+
+/* Hex — Quizbit Design Tokens
+ * Dark earth palette with warm bronze accents on parchment highlights.
+ * Amulet brand family: warm ink (#12100c), bronze (#c9956d), parchment (#f5f1ed).
+ * Personality quiz hub — playful yet sophisticated dark theme.
+ *
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
+ */
+
+[data-hex-theme='quizbit'] {
+  --color-background: #12100c;
+  --color-foreground: #f5f1ed;
+  --color-card: #1e1a14;
+  --color-card-foreground: #f5f1ed;
+  --color-popover: #1e1a14;
+  --color-popover-foreground: #f5f1ed;
+  --color-primary: #c9956d;
+  --color-primary-foreground: #12100c;
+  --color-secondary: #2a2520;
+  --color-secondary-foreground: #f5f1ed;
+  --color-muted: #2a2520;
+  --color-muted-foreground: #a89e94;
+  --color-accent: #d4a574;
+  --color-accent-foreground: #12100c;
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #f5f1ed;
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-info: #3b82f6;
+  --color-border: #302a22;
+  --color-input: #302a22;
+  --color-ring: #c9956d;
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-serif: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
+  --radius: 8px;
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.875rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 1rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+  --font-display: var(--font-sans);
+  --font-heading: var(--font-sans);
+  --background: #12100c;
+  --foreground: #f5f1ed;
+  --card: #1e1a14;
+  --card-foreground: #f5f1ed;
+  --popover: #1e1a14;
+  --popover-foreground: #f5f1ed;
+  --primary: #c9956d;
+  --primary-foreground: #12100c;
+  --secondary: #2a2520;
+  --secondary-foreground: #f5f1ed;
+  --muted: #2a2520;
+  --muted-foreground: #a89e94;
+  --accent: #d4a574;
+  --accent-foreground: #12100c;
+  --destructive: #ef4444;
+  --destructive-foreground: #f5f1ed;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --info: #3b82f6;
+  --border: #302a22;
+  --input: #302a22;
+  --ring: #c9956d;
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --quizbit-ink: #12100c;
+  --quizbit-ink-light: #1e1a14;
+  --quizbit-bronze: #c9956d;
+  --quizbit-bronze-light: #d4a574;
+  --quizbit-parchment: #f5f1ed;
+  --quizbit-muted: #a89e94;
+  --rig-button-hover-bg: #302a22;
+  --rig-scrollbar-thumb: rgba(201, 149, 109, 0.18);
+  --rig-scrollbar-thumb-hover: rgba(201, 149, 109, 0.35);
+}