@amulet-laboratories/hex 0.3.0

package/src/scoped/themes/aldricpace.css

@@ -0,0 +1,115 @@
+/* Hex — aldricpace (scoped) */
+
+/* Hex — Aldricpace Design Tokens
+ * Conservative law firm. Cold light mode with navy and brass accents.
+ * Institutional restraint — suited for professional services, legal, finance.
+ *
+ * Full palette (8 swatch colors):
+ *   #FAFBFC  cold white    — background
+ *   #F2F4F7  fog           — card
+ *   #E6E9EF  slate wash    — secondary, muted
+ *   #1B2033  ink           — foreground text
+ *   #555E73  graphite      — muted foreground
+ *   #2B4C7E  navy          — primary, ring
+ *   #8B6F4E  brass         — accent
+ *   #9E3B3B  merlot        — destructive
+ *
+ * @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='aldricpace'] {
+  --color-background: #fafbfc;
+  --color-foreground: #1b2033;
+  --color-card: #f2f4f7;
+  --color-card-foreground: #1b2033;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1b2033;
+  --color-primary: #2b4c7e;
+  --color-primary-foreground: #fafbfc;
+  --color-secondary: #e6e9ef;
+  --color-secondary-foreground: #1b2033;
+  --color-muted: #e6e9ef;
+  --color-muted-foreground: #555e73;
+  --color-accent: #8b6f4e;
+  --color-accent-foreground: #fafbfc;
+  --color-destructive: #9e3b3b;
+  --color-destructive-foreground: #fafbfc;
+  --color-success: #3b7a57;
+  --color-warning: #b8952a;
+  --color-info: #2b4c7e;
+  --color-border: #d1d5de;
+  --color-input: #d1d5de;
+  --color-ring: #2b4c7e;
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'Inter', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'EB Garamond', Georgia, serif;
+  --font-heading: 'EB Garamond', 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: 3px;
+  --background: #fafbfc;
+  --foreground: #1b2033;
+  --card: #f2f4f7;
+  --card-foreground: #1b2033;
+  --popover: #ffffff;
+  --popover-foreground: #1b2033;
+  --primary: #2b4c7e;
+  --primary-foreground: #fafbfc;
+  --secondary: #e6e9ef;
+  --secondary-foreground: #1b2033;
+  --muted: #e6e9ef;
+  --muted-foreground: #555e73;
+  --accent: #8b6f4e;
+  --accent-foreground: #fafbfc;
+  --destructive: #9e3b3b;
+  --destructive-foreground: #fafbfc;
+  --success: #3b7a57;
+  --warning: #b8952a;
+  --info: #2b4c7e;
+  --border: #d1d5de;
+  --input: #d1d5de;
+  --ring: #2b4c7e;
+  --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;
+  --ap-cold-white: #fafbfc;
+  --ap-fog: #f2f4f7;
+  --ap-slate: #e6e9ef;
+  --ap-ink: #1b2033;
+  --ap-graphite: #555e73;
+  --ap-navy: #2b4c7e;
+  --ap-brass: #8b6f4e;
+  --ap-merlot: #9e3b3b;
+  --rig-button-hover-bg: #e6e9ef;
+  --rig-scrollbar-thumb: rgba(27, 32, 51, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(27, 32, 51, 0.25);
+  --site-nav-utility-bg: var(--color-primary);
+  --site-max-width: 64rem;
+}

package/src/scoped/themes/briarcove.css

@@ -0,0 +1,123 @@
+/* Hex — briarcove (scoped) */
+
+/* Hex — Briarcove Design Tokens
+ * Studio clarity. Clean white canvas with violet accents.
+ * WCAG 2.1 AA compliant. Pure white background, dark purple-tinted foreground.
+ * Light mode studio theme — suited for creative platforms and portfolios.
+ *
+ * Full palette (10 swatch colors):
+ *   #FFFFFF  white           — background
+ *   #F5F2FA  violet tint     — card
+ *   #EDE8F5  lavender        — secondary, muted
+ *   #D8D0E5  violet border   — borders
+ *   #6A5A80  purple gray     — muted foreground
+ *   #1A1428  dark violet     — foreground text
+ *   #6D42C4  violet          — primary, accent, info
+ *   #DC2626  red             — destructive
+ *   #D97706  amber           — warning
+ *   #16A34A  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='briarcove'] {
+  --color-background: #ffffff;
+  --color-foreground: #1a1428;
+  --color-card: #f5f2fa;
+  --color-card-foreground: #1a1428;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1a1428;
+  --color-primary: #6d42c4;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #ede8f5;
+  --color-secondary-foreground: #1a1428;
+  --color-muted: #ede8f5;
+  --color-muted-foreground: #6a5a80;
+  --color-accent: #d97706;
+  --color-accent-foreground: #ffffff;
+  --color-destructive: #dc2626;
+  --color-destructive-foreground: #ffffff;
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-info: #6d42c4;
+  --color-border: #d8d0e5;
+  --color-input: #d8d0e5;
+  --color-ring: #6d42c4;
+  --font-sans: 'Libre Franklin', 'Inter', system-ui, sans-serif;
+  --font-mono: 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Merriweather', Georgia, serif;
+  --font-heading: 'Merriweather', 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: 3px;
+  --background: #ffffff;
+  --foreground: #1a1428;
+  --card: #f5f2fa;
+  --card-foreground: #1a1428;
+  --popover: #ffffff;
+  --popover-foreground: #1a1428;
+  --primary: #6d42c4;
+  --primary-foreground: #ffffff;
+  --secondary: #ede8f5;
+  --secondary-foreground: #1a1428;
+  --muted: #ede8f5;
+  --muted-foreground: #6a5a80;
+  --accent: #d97706;
+  --accent-foreground: #ffffff;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #16a34a;
+  --warning: #d97706;
+  --info: #6d42c4;
+  --border: #d8d0e5;
+  --input: #d8d0e5;
+  --ring: #6d42c4;
+  --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;
+  --bc-white: #ffffff;
+  --bc-violet-tint: #f5f2fa;
+  --bc-lavender: #ede8f5;
+  --bc-dark: #1a1428;
+  --bc-purple-gray: #6a5a80;
+  --bc-violet: #6d42c4;
+  --bc-red: #dc2626;
+  --bc-amber: #d97706;
+  --bc-green: #16a34a;
+  --bc-violet-border: #d8d0e5;
+  --rig-button-hover-bg: #5c37a6;
+  --rig-button-hover-fg: #ffffff;
+  --rig-button-secondary-bg: transparent;
+  --rig-button-secondary-fg: var(--color-foreground);
+  --rig-button-secondary-hover-bg: #ede8f5;
+  --rig-button-secondary-hover-fg: var(--color-foreground);
+  --rig-scrollbar-thumb: rgba(26, 20, 40, 0.15);
+  --rig-scrollbar-thumb-hover: rgba(26, 20, 40, 0.3);
+}

package/src/scoped/themes/briarcovelib.css

@@ -0,0 +1,111 @@
+/* Hex — briarcovelib (scoped) */
+
+/* Hex — Briarcovelib Design Tokens
+ * Public library. Warm light mode with sienna and slate blue.
+ * Civic warmth — welcoming, literary, community-focused.
+ *
+ * Full palette (7 swatch colors):
+ *   #FAF8F4  vellum          — background
+ *   #F0ECE3  linen           — card
+ *   #E2DCD0  sandstone       — secondary, muted
+ *   #2B2622  umber           — foreground text
+ *   #6B6054  driftwood       — muted foreground
+ *   #9E5229  sienna          — primary, ring
+ *   #3A6B8C  slate blue      — 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='briarcovelib'] {
+  --color-background: #faf8f4;
+  --color-foreground: #2b2622;
+  --color-card: #f0ece3;
+  --color-card-foreground: #2b2622;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #2b2622;
+  --color-primary: #9e5229;
+  --color-primary-foreground: #faf8f4;
+  --color-secondary: #e2dcd0;
+  --color-secondary-foreground: #2b2622;
+  --color-muted: #e2dcd0;
+  --color-muted-foreground: #6b6054;
+  --color-accent: #3a6b8c;
+  --color-accent-foreground: #faf8f4;
+  --color-destructive: #b83232;
+  --color-destructive-foreground: #faf8f4;
+  --color-success: #3b7a57;
+  --color-warning: #c49030;
+  --color-info: #3a6b8c;
+  --color-border: #d0c8ba;
+  --color-input: #d0c8ba;
+  --color-ring: #9e5229;
+  --font-sans: 'Cabin', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Cabin', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Bitter', Georgia, serif;
+  --font-heading: 'Bitter', 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: 6px;
+  --background: #faf8f4;
+  --foreground: #2b2622;
+  --card: #f0ece3;
+  --card-foreground: #2b2622;
+  --popover: #ffffff;
+  --popover-foreground: #2b2622;
+  --primary: #9e5229;
+  --primary-foreground: #faf8f4;
+  --secondary: #e2dcd0;
+  --secondary-foreground: #2b2622;
+  --muted: #e2dcd0;
+  --muted-foreground: #6b6054;
+  --accent: #3a6b8c;
+  --accent-foreground: #faf8f4;
+  --destructive: #b83232;
+  --destructive-foreground: #faf8f4;
+  --success: #3b7a57;
+  --warning: #c49030;
+  --info: #3a6b8c;
+  --border: #d0c8ba;
+  --input: #d0c8ba;
+  --ring: #9e5229;
+  --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;
+  --bl-vellum: #faf8f4;
+  --bl-linen: #f0ece3;
+  --bl-sandstone: #e2dcd0;
+  --bl-umber: #2b2622;
+  --bl-driftwood: #6b6054;
+  --bl-sienna: #9e5229;
+  --bl-slate: #3a6b8c;
+  --rig-button-hover-bg: #e2dcd0;
+  --rig-scrollbar-thumb: rgba(43, 38, 34, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(43, 38, 34, 0.25);
+}

package/src/scoped/themes/compass.css

@@ -0,0 +1,111 @@
+/* Hex — compass (scoped) */
+
+/* Hex — Compass Design Tokens
+ * Veterinary clinic. Soft light mode with true green and warm coral.
+ * Clinical warmth — reassuring, accessible, nature-forward.
+ *
+ * Full palette (7 swatch colors):
+ *   #F8FDF6  mint green       — background
+ *   #F0F5EE  soft sage        — card
+ *   #E0ECE0  pale eucalyptus  — secondary, muted
+ *   #1A2A1A  deep moss        — foreground text
+ *   #4A6A4A  fern             — muted foreground
+ *   #2B743B  true green       — primary, ring
+ *   #BB572D  warm coral       — accent, action
+ *
+ * @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='compass'] {
+  --color-background: #f8fdf6;
+  --color-foreground: #1a2a1a;
+  --color-card: #f0f5ee;
+  --color-card-foreground: #1a2a1a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1a2a1a;
+  --color-primary: #2b743b;
+  --color-primary-foreground: #f8fdf6;
+  --color-secondary: #e0ece0;
+  --color-secondary-foreground: #1a2a1a;
+  --color-muted: #e0ece0;
+  --color-muted-foreground: #4a6a4a;
+  --color-accent: #bb572d;
+  --color-accent-foreground: #f8fdf6;
+  --color-destructive: #cc3b3b;
+  --color-destructive-foreground: #f8fdf6;
+  --color-success: #2b743b;
+  --color-warning: #d4a030;
+  --color-info: #4a7a9e;
+  --color-border: #c0d8c0;
+  --color-input: #c0d8c0;
+  --color-ring: #2b743b;
+  --font-sans: 'Outfit', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Outfit', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif;
+  --font-heading: 'Outfit', '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: 8px;
+  --background: #f8fdf6;
+  --foreground: #1a2a1a;
+  --card: #f0f5ee;
+  --card-foreground: #1a2a1a;
+  --popover: #ffffff;
+  --popover-foreground: #1a2a1a;
+  --primary: #2b743b;
+  --primary-foreground: #f8fdf6;
+  --secondary: #e0ece0;
+  --secondary-foreground: #1a2a1a;
+  --muted: #e0ece0;
+  --muted-foreground: #4a6a4a;
+  --accent: #bb572d;
+  --accent-foreground: #f8fdf6;
+  --destructive: #cc3b3b;
+  --destructive-foreground: #f8fdf6;
+  --success: #2b743b;
+  --warning: #d4a030;
+  --info: #4a7a9e;
+  --border: #c0d8c0;
+  --input: #c0d8c0;
+  --ring: #2b743b;
+  --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;
+  --ca-mint-green: #f8fdf6;
+  --ca-sage: #f0f5ee;
+  --ca-eucalyptus: #e0ece0;
+  --ca-moss: #1a2a1a;
+  --ca-fern: #4a6a4a;
+  --ca-green: #2b743b;
+  --ca-coral: #bb572d;
+  --rig-button-hover-bg: #e0ece0;
+  --rig-scrollbar-thumb: rgba(26, 42, 26, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(26, 42, 26, 0.25);
+}

package/src/scoped/themes/duskline.css

@@ -0,0 +1,117 @@
+/* Hex — duskline (scoped) */
+
+/* Hex — Duskline Design Tokens
+ * Digital frost. Cold-running terminal with teal-cyan glow.
+ * Dark mode investigative palette — cold blue-black background, cool white text,
+ * teal-cyan highlights that pulse like frozen circuitry.
+ *
+ * Full palette (7 swatch colors):
+ *   #0A0F14  cold black     — background
+ *   #121A22  cold graphite  — card, popover
+ *   #1A2430  cold charcoal  — secondary, muted
+ *   #4A6478  dim            — subtle text
+ *   #7090A2  steel          — muted foreground
+ *   #3CC8B4  teal-cyan      — primary, accent, ring (h≈170)
+ *   #D8E4EC  cool white     — foreground text
+ *
+ * @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='duskline'] {
+  --color-background: #0a0f14;
+  --color-foreground: #d8e4ec;
+  --color-card: #121a22;
+  --color-card-foreground: #d8e4ec;
+  --color-popover: #121a22;
+  --color-popover-foreground: #d8e4ec;
+  --color-primary: #3cc8b4;
+  --color-primary-foreground: #0a0f14;
+  --color-secondary: #1a2430;
+  --color-secondary-foreground: #d8e4ec;
+  --color-muted: #1a2430;
+  --color-muted-foreground: #7090a2;
+  --color-accent: #d4a040;
+  --color-accent-foreground: #0a0f14;
+  --color-destructive: #c94545;
+  --color-destructive-foreground: #d8e4ec;
+  --color-success: #2db87a;
+  --color-warning: #d4a040;
+  --color-info: #5a8ab8;
+  --color-border: #1e3040;
+  --color-input: #1e3040;
+  --color-ring: #3cc8b4;
+  --font-sans: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
+  --font-heading: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 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: 2px;
+  --background: #0a0f14;
+  --foreground: #d8e4ec;
+  --card: #121a22;
+  --card-foreground: #d8e4ec;
+  --popover: #121a22;
+  --popover-foreground: #d8e4ec;
+  --primary: #3cc8b4;
+  --primary-foreground: #0a0f14;
+  --secondary: #1a2430;
+  --secondary-foreground: #d8e4ec;
+  --muted: #1a2430;
+  --muted-foreground: #7090a2;
+  --accent: #d4a040;
+  --accent-foreground: #0a0f14;
+  --destructive: #c94545;
+  --destructive-foreground: #d8e4ec;
+  --success: #2db87a;
+  --warning: #d4a040;
+  --info: #5a8ab8;
+  --border: #1e3040;
+  --input: #1e3040;
+  --ring: #3cc8b4;
+  --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;
+  --dk-black: #0a0f14;
+  --dk-graphite: #121a22;
+  --dk-charcoal: #1a2430;
+  --dk-steel: #7090a2;
+  --dk-dim: #4a6478;
+  --dk-cyan: #3cc8b4;
+  --dk-white: #d8e4ec;
+  --rig-button-hover-bg: #2ea89a;
+  --rig-button-hover-fg: #0a0f14;
+  --rig-button-secondary-bg: transparent;
+  --rig-button-secondary-fg: var(--color-foreground);
+  --rig-button-secondary-hover-bg: #1a2430;
+  --rig-button-secondary-hover-fg: var(--color-foreground);
+  --rig-scrollbar-thumb: rgba(216, 228, 236, 0.1);
+  --rig-scrollbar-thumb-hover: rgba(216, 228, 236, 0.22);
+  --site-footer-color: var(--color-background);
+}

package/src/scoped/themes/forge.css

@@ -0,0 +1,123 @@
+/* Hex — forge (scoped) */
+
+/* Hex — Forge Design Tokens
+ * 1980s spacecraft cockpit hardware — CRT phosphor displays, beige ABS plastic
+ * housings, brushed aluminum channels, dark rubber gaskets.
+ * Dark mode industrial theme — deep carbon hull, yellow phosphor accents,
+ * IBM Plex instrument typography, machined 2px radii.
+ *
+ * Key palette:
+ *   #0E0D0C  deep carbon hull     — background
+ *   #1E1C1A  dark composite panel  — card / muted / sidebar
+ *   #2A2826  elevated panel        — popover / overlay
+ *   #3A3530  dark panel seam       — border
+ *   #D4CCBA  warm off-white        — foreground (12.8:1 on base)
+ *   #8A8478  mid warm gray         — muted foreground (5.8:1 on base)
+ *   #E6C830  CRT yellow phosphor   — primary accent (h≈55)
+ *   #33DD33  phosphor green        — success (9.6:1 on base)
+ *   #FFCC44  bright yellow         — warning
+ *   #FF4444  phosphor red          — destructive (5.4:1 on base)
+ *   #4488FF  phosphor blue         — info (5.6:1 on base)
+ *
+ * @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='forge'] {
+  --color-background: #0e0d0c;
+  --color-foreground: #d4ccba;
+  --color-card: #1e1c1a;
+  --color-card-foreground: #d4ccba;
+  --color-popover: #2a2826;
+  --color-popover-foreground: #d4ccba;
+  --color-primary: #e6c830;
+  --color-primary-foreground: #0e0d0c;
+  --color-secondary: #1e1c1a;
+  --color-secondary-foreground: #d4ccba;
+  --color-muted: #1e1c1a;
+  --color-muted-foreground: #8a8478;
+  --color-accent: #e6c830;
+  --color-accent-foreground: #0e0d0c;
+  --color-destructive: #ff4444;
+  --color-destructive-foreground: #0e0d0c;
+  --color-success: #33dd33;
+  --color-warning: #ffcc44;
+  --color-info: #4488ff;
+  --color-border: #3a3530;
+  --color-input: #3a3530;
+  --color-ring: #e6c830;
+  --font-mono: 'IBM Plex Mono', 'Courier New', ui-monospace, monospace;
+  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
+  --font-serif: 'IBM Plex 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: 2px;
+  --background: #0e0d0c;
+  --foreground: #d4ccba;
+  --card: #1e1c1a;
+  --card-foreground: #d4ccba;
+  --popover: #2a2826;
+  --popover-foreground: #d4ccba;
+  --primary: #e6c830;
+  --primary-foreground: #0e0d0c;
+  --secondary: #1e1c1a;
+  --secondary-foreground: #d4ccba;
+  --muted: #1e1c1a;
+  --muted-foreground: #8a8478;
+  --accent: #e6c830;
+  --accent-foreground: #0e0d0c;
+  --destructive: #ff4444;
+  --destructive-foreground: #0e0d0c;
+  --success: #33dd33;
+  --warning: #ffcc44;
+  --info: #4488ff;
+  --border: #3a3530;
+  --input: #3a3530;
+  --ring: #e6c830;
+  --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;
+  --forge-hull: #0e0d0c;
+  --forge-panel: #1e1c1a;
+  --forge-overlay: #2a2826;
+  --forge-well: #060605;
+  --forge-seam: #3a3530;
+  --forge-seam-subtle: #1e1c1a;
+  --forge-text: #d4ccba;
+  --forge-text-mid: #8a8478;
+  --forge-text-dim: #5a5548;
+  --forge-yellow: #e6c830;
+  --forge-yellow-bright: #f0d84a;
+  --forge-green: #33dd33;
+  --forge-red: #ff4444;
+  --forge-blue: #4488ff;
+  --rig-scrollbar-thumb: rgba(212, 204, 186, 0.15);
+  --rig-scrollbar-thumb-hover: rgba(212, 204, 186, 0.28);
+  --rig-button-hover-bg: #c4aa28;
+}