@mkbabb/glass-ui 0.2.0

package/src/styles/theme.css

@@ -0,0 +1,138 @@
+/*
+ * theme.css — Tailwind CSS v4 @theme block
+ *
+ * Maps CSS custom properties to Tailwind utility-generating tokens.
+ * Import AFTER tokens.css and tailwindcss.
+ */
+
+@theme {
+    /* Container */
+    --container-center: true;
+    --container-padding-x: 2rem;
+    --container-2xl: 1400px;
+
+    /* ── Typography: golden-ratio scale (√φ ≈ 1.272) ── */
+    --font-size-2xs: var(--type-micro);
+    --font-size-xs: var(--type-caption);
+    --font-size-sm: var(--type-small);
+    --font-size-base: var(--type-body);
+    --font-size-lg: var(--type-prose);
+    --font-size-xl: var(--type-subheading);
+    --font-size-2xl: var(--type-heading);
+    --font-size-3xl: var(--type-title);
+    --font-size-4xl: var(--type-display-1);
+    --font-size-5xl: var(--type-display-2);
+    --font-size-6xl: var(--type-display-3);
+
+    /* ── Font families (overridden by presets) ── */
+    --font-display: "Fraunces", Georgia, serif;
+    --font-serif: "Fraunces", Georgia, serif;
+    --font-sans: system-ui, -apple-system, sans-serif;
+    --font-mono: "Fira Code", "Fira Mono", monospace;
+
+    /* ── Colors: reference dynamic CSS vars so .dark overrides work ── */
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+
+    --color-shadow: var(--shadow);
+
+    --color-gold: var(--color-gold);
+    --color-gold-light: var(--color-gold-light);
+    --color-gold-dark: var(--color-gold-dark);
+
+    /* ── Z-index: map design tokens → Tailwind z-* utilities ── */
+    --z-index-background: var(--z-background);
+    --z-index-content: var(--z-content);
+    --z-index-controls: var(--z-controls);
+    --z-index-bar: var(--z-bar);
+    --z-index-dock: var(--z-dock);
+    --z-index-overlay: var(--z-overlay);
+    --z-index-hovercard: var(--z-hovercard);
+    --z-index-popover: var(--z-popover);
+    --z-index-modal: var(--z-modal);
+    --z-index-fullscreen: var(--z-fullscreen);
+    --z-index-toast: var(--z-toast);
+    --z-index-toggle: var(--z-toggle);
+    --z-index-max: var(--z-max);
+
+    /* ── Border radius ── */
+    --radius: 0.5rem;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: var(--radius);
+    --radius-xl: 12px;
+    --radius-2xl: 1rem;
+    --radius-pill: 9999px;
+
+    /* Semantic radius */
+    --radius-card:   var(--radius-card);
+    --radius-panel:  var(--radius-panel);
+    --radius-dialog: var(--radius-dialog);
+    --radius-input:  var(--radius-input);
+    --radius-button: var(--radius-button);
+    --radius-badge:  var(--radius-badge);
+    --radius-dock:   var(--radius-dock);
+
+    /* ── Box shadows: map tokens → Tailwind shadow-* utilities ── */
+    --shadow-card: var(--shadow-card);
+    --shadow-card-hover: var(--shadow-card-hover);
+    --shadow-dock: var(--shadow-dock);
+    --shadow-dock-collapsed: var(--shadow-dock-collapsed);
+    --shadow-glass-subtle:   var(--glass-shadow-subtle);
+    --shadow-glass-default:  var(--glass-shadow-default);
+    --shadow-glass-medium:   var(--glass-shadow-medium);
+    --shadow-glass-elevated: var(--glass-shadow-elevated);
+    --shadow-cartoon-sm: var(--shadow-cartoon-sm);
+    --shadow-cartoon-md: var(--shadow-cartoon-md);
+    --shadow-cartoon-lg: var(--shadow-cartoon-lg);
+
+    /* ── Backdrop blur: glass tokens use full backdrop-filter values
+         (blur + saturate), so they can't map to Tailwind's backdrop-blur-*
+         utility directly. Use [backdrop-filter:var(--glass-blur-*)] instead. ── */
+
+    /* ── Easing: spring curves → ease-spring-* utilities ── */
+    --transition-timing-function-spring-smooth: var(--spring-smooth);
+    --transition-timing-function-spring-snappy: var(--spring-snappy);
+    --transition-timing-function-spring-bouncy: var(--spring-bouncy);
+    --transition-timing-function-spring-gentle: var(--spring-gentle);
+
+    /* ── Easing: cubic-bezier → ease-* utilities ── */
+    --transition-timing-function-standard: var(--ease-standard);
+    --transition-timing-function-out: var(--ease-out);
+    --transition-timing-function-in: var(--ease-in);
+    --transition-timing-function-out-expo: var(--ease-out-expo);
+
+    /* ── Duration: map tokens → Tailwind duration-* utilities ── */
+    --transition-duration-instant: var(--duration-instant);
+    --transition-duration-fast: var(--duration-fast);
+    --transition-duration-normal: var(--duration-normal);
+    --transition-duration-slow: var(--duration-slow);
+    --transition-duration-panel: var(--duration-panel);
+}
+
+/* Class-based dark mode */
+@variant dark (&:where(.dark, .dark *));

package/src/styles/tokens.css

@@ -0,0 +1,333 @@
+/*
+ * tokens.css — Unified design tokens for @mkbabb/glass-ui
+ *
+ * Shared structural tokens used by all consumer projects.
+ * Project-specific colors/fonts are overridden in each consumer's local CSS.
+ */
+
+:root {
+    /* ═══════════════════════════════════════════════
+       §1  DURATION
+       ═══════════════════════════════════════════════ */
+    --duration-instant: 0.1s;
+    --duration-fast: 0.2s;
+    --duration-normal: 0.3s;
+    --duration-slow: 0.45s;
+    --duration-panel: 0.55s;
+    --duration-xl: 1s;
+    --duration-xxl: 1.5s;
+    --duration-linger: 2.5s;
+
+    /* ═══════════════════════════════════════════════
+       §2  EASING — Spring curves via linear()
+       ═══════════════════════════════════════════════
+
+       Generated from damped spring physics:
+         x(t) = 1 - e^(-ζωt)(cos(ωd·t) + (ζ/√(1-ζ²))sin(ωd·t))
+
+       smooth:  ζ=1.0  — critically damped, no overshoot
+       snappy:  ζ=0.65 — 7% overshoot, quick settle
+       bouncy:  ζ=0.45 — 20% overshoot, visible bounce-settle
+       gentle:  ζ=0.85 — barely perceptible overshoot, slow ease
+    */
+
+    /* Spring curves (primary — use for entrances) */
+    --spring-smooth: linear(0, 0.0974, 0.2816, 0.4656, 0.6189, 0.7361, 0.821, 0.8806, 0.9213, 0.9487, 0.9668, 0.9787, 0.9864, 0.9914, 0.9945, 0.9966, 0.9978, 0.9987, 0.9992, 0.9995, 0.9997, 0.9998, 0.9999, 0.9999, 1);
+    --spring-snappy: linear(0, 0.0727, 0.2386, 0.4363, 0.6262, 0.7861, 0.9075, 0.9902, 1.0395, 1.0628, 1.068, 1.0619, 1.0501, 1.0366, 1.0239, 1.0133, 1.0054, 1.0001, 0.997, 0.9956, 0.9954, 0.9959, 0.9967, 0.9976, 0.9985, 0.9992, 0.9997, 1, 1.0002, 1.0003, 1.0003);
+    --spring-bouncy: linear(0, 0.0492, 0.1748, 0.3455, 0.5335, 0.7169, 0.8796, 1.0117, 1.1087, 1.1706, 1.2005, 1.2039, 1.1874, 1.1575, 1.1206, 1.0818, 1.0454, 1.0141, 0.9895, 0.9723, 0.962, 0.958, 0.959, 0.9635, 0.9703, 0.9781, 0.986, 0.9931, 0.9991, 1.0036, 1.0066, 1.0082, 1.0087, 1.0082, 1.007, 1.0055, 1.0039, 1.0023, 1.0009);
+    --spring-gentle: linear(0, 0.1018, 0.3031, 0.5094, 0.6812, 0.8083, 0.8945, 0.9486, 0.98, 0.9964, 1.0038, 1.0061, 1.006, 1.0049, 1.0036, 1.0024, 1.0015, 1.0008, 1.0004, 1.0002, 1.0001, 1, 1, 1, 1);
+
+    /* Core cubic-bezier (for exits, fallback, non-spring uses) */
+    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+
+    /* ═══════════════════════════════════════════════
+       §3  Z-INDEX SCALE
+       ═══════════════════════════════════════════════ */
+    --z-background: 0;
+    --z-content: 10;
+    --z-controls: 20;
+    --z-bar: 30;
+    --z-dock: 40;
+    --z-overlay: 50;
+    --z-hovercard: 60;
+    --z-popover: 70;
+    --z-modal: 80;
+    --z-fullscreen: 90;
+    --z-toast: 100;
+    --z-toggle: 999;
+    --z-max: 9999;
+    --z-debug: 99999;
+
+    /* ═══════════════════════════════════════════════
+       §4  BORDER RADIUS
+       ═══════════════════════════════════════════════ */
+    --radius: 0.5rem;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: var(--radius);
+    --radius-xl: 12px;
+    --radius-2xl: 1rem;
+    --radius-pill: 9999px;
+
+    /* Semantic aliases */
+    --radius-card:   var(--radius-2xl);
+    --radius-panel:  var(--radius-xl);
+    --radius-dialog: var(--radius-2xl);
+    --radius-input:  var(--radius);
+    --radius-button: var(--radius);
+    --radius-badge:  var(--radius-pill);
+    --radius-dock:   var(--radius-pill);
+
+    /* ═══════════════════════════════════════════════
+       §5  BOX SHADOWS
+       Projects define --shadow-color in their preset.
+       ═══════════════════════════════════════════════ */
+    --shadow-color: hsl(0 0% 0%);
+
+    /* Elevation scale */
+    --shadow-xs: 0 1px 3px color-mix(in srgb, var(--shadow-color) 4%, transparent),
+        0 1px 2px color-mix(in srgb, var(--shadow-color) 6%, transparent);
+    --shadow-sm: 0 2px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent);
+    --shadow-md: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+    --shadow-lg: 0 4px 20px color-mix(in srgb, var(--shadow-color) 12%, transparent);
+    --shadow-xl: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent);
+    --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 25%, transparent);
+
+    /* Cartoon / offset shadows */
+    --shadow-cartoon-sm: -3px 2px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
+        0 3px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
+        -3px 3px 1px color-mix(in srgb, var(--shadow-color) 6%, transparent);
+    --shadow-cartoon-md: -4px 3px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
+        0 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
+        -4px 4px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+    --shadow-cartoon-lg: -6px 4px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
+        0 6px 1px color-mix(in srgb, var(--shadow-color) 12%, transparent),
+        -6px 6px 2px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+
+    /* Card offset shadow */
+    --shadow-card: 4px 4px 0px 0px color-mix(in srgb, var(--shadow-color) 50%, transparent);
+    --shadow-card-hover: 5px 5px 0px 0px color-mix(in srgb, var(--shadow-color) 60%, transparent);
+
+    /* Dock shadows */
+    --shadow-dock: 0 4px 20px color-mix(in srgb, var(--shadow-color) 25%, transparent), 0 0 0 1px color-mix(in srgb, var(--shadow-color) 15%, transparent);
+    --shadow-dock-collapsed: 0 2px 12px color-mix(in srgb, var(--shadow-color) 20%, transparent), 0 0 0 1px color-mix(in srgb, var(--shadow-color) 15%, transparent);
+
+    /* Cartoon shadow colors */
+    --shadow-cartoon-color: rgb(0 0 0 / 0.12);
+    --shadow-cartoon-color-soft: rgb(0 0 0 / 0.06);
+    --shadow-cartoon-color-hover: rgb(0 0 0 / 0.16);
+    --shadow-cartoon-color-hover-soft: rgb(0 0 0 / 0.08);
+
+    /* ═══════════════════════════════════════════════
+       §6  GLASSMORPHISM — Four-tier surface system
+       subtle   → lightest (dock bg, input bg, hover overlays)
+       default  → standard (cards, content containers, select triggers)
+       medium   → heavier  (popovers, dropdowns, floating panels)
+       elevated → heaviest (dialogs, command palette, modal overlays)
+       ═══════════════════════════════════════════════ */
+
+    /* Opacity primitives */
+    --glass-opacity-subtle:   0.30;
+    --glass-opacity-default:  0.50;
+    --glass-opacity-medium:   0.65;
+    --glass-opacity-elevated: 0.80;
+
+    /* Blur primitives */
+    --glass-blur-subtle:   blur(4px) saturate(1.05);
+    --glass-blur-default:  blur(8px) saturate(1.2);
+    --glass-blur-medium:   blur(12px) saturate(1.3);
+    --glass-blur-elevated: blur(16px) saturate(1.4);
+
+    /* Composed backgrounds */
+    --glass-bg-subtle:   color-mix(in srgb, var(--card) calc(var(--glass-opacity-subtle) * 100%), transparent);
+    --glass-bg-default:  color-mix(in srgb, var(--card) calc(var(--glass-opacity-default) * 100%), transparent);
+    --glass-bg-medium:   color-mix(in srgb, var(--card) calc(var(--glass-opacity-medium) * 100%), transparent);
+    --glass-bg-elevated: color-mix(in srgb, var(--card) calc(var(--glass-opacity-elevated) * 100%), transparent);
+
+    /* Composed borders — foreground-tinted for Apple-like luminosity */
+    --glass-border-subtle:   color-mix(in srgb, var(--foreground) 8%, transparent);
+    --glass-border-default:  color-mix(in srgb, var(--foreground) 10%, transparent);
+    --glass-border-medium:   color-mix(in srgb, var(--foreground) 12%, transparent);
+    --glass-border-elevated: color-mix(in srgb, var(--foreground) 15%, transparent);
+
+    /* Shadow per tier */
+    --glass-shadow-subtle:   var(--shadow-sm);
+    --glass-shadow-default:  var(--shadow-md);
+    --glass-shadow-medium:   var(--shadow-lg);
+    --glass-shadow-elevated: var(--shadow-xl),
+        0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent);
+
+    /* Shared decorative */
+    --glass-grain-opacity: 0.035;
+    --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.25);
+
+    /* ═══════════════════════════════════════════════
+       §7  ANIMATION OFFSETS
+       ═══════════════════════════════════════════════ */
+    --animation-slide-sm: 3px;
+    --animation-slide-md: 6px;
+    --animation-slide-lg: 8px;
+    --popover-offset: 0.375rem;
+
+    /* ═══════════════════════════════════════════════
+       §7b HOVER LIFT OFFSETS
+       ═══════════════════════════════════════════════ */
+    --lift-sm: -1px;
+    --lift-md: -2px;
+    --lift-lg: -4px;
+
+    /* ═══════════════════════════════════════════════
+       §7c LAYOUT TOKENS
+       ═══════════════════════════════════════════════ */
+    --mask-fade-width: 1rem;
+    --max-width-input: 24rem;
+    --paper-texture-size: 200px 200px;
+
+    /* ═══════════════════════════════════════════════
+       §7d BORDER OPACITY SCALE
+       ═══════════════════════════════════════════════ */
+    --border-opacity-light: 0.15;
+    --border-opacity-medium: 0.25;
+    --border-opacity-strong: 0.6;
+
+    /* ═══════════════════════════════════════════════
+       §8  SIZING
+       ═══════════════════════════════════════════════ */
+    --size-icon-btn: 2.5rem;
+
+    /* Dock geometry — consumers may override locally */
+    --dock-h: calc(var(--size-icon-btn) + 0.75rem + 3px);
+    --dock-margin: 0.5rem;
+    --dock-menubar-reserve: 4rem;
+
+    /* ═══════════════════════════════════════════════
+       §8b  COMPONENT FONT OVERRIDES
+       Consumers override these locally.
+       ═══════════════════════════════════════════════ */
+    --select-font: inherit;
+
+    /* ═══════════════════════════════════════════════
+       §9  INTERACTIVE SCALE TRANSFORMS
+       ═══════════════════════════════════════════════ */
+    --scale-hover: 1.08;
+    --scale-hover-dock: 1.1;
+    --scale-press: 0.95;
+    --scale-press-dock: 0.92;
+    --scale-press-btn: 0.97;
+
+    /* ═══════════════════════════════════════════════
+       §10 FOCUS RING
+       ═══════════════════════════════════════════════ */
+    --focus-ring-width: 2px;
+    --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--ring) 30%, transparent),
+        0 0 8px color-mix(in srgb, var(--ring) 15%, transparent);
+
+    /* ═══════════════════════════════════════════════
+       §11 PAPER TEXTURES
+       ═══════════════════════════════════════════════ */
+    --paper-clean-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+    --paper-aged-texture: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
+
+    /* ═══════════════════════════════════════════════
+       §9  DEFAULT COLOR PALETTE (consumers override locally)
+       ═══════════════════════════════════════════════ */
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(222.2 84% 4.9%);
+    --muted: hsl(210 40% 96.1%);
+    --muted-foreground: hsl(215.4 16.3% 46.9%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(222.2 84% 4.9%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(222.2 84% 4.9%);
+    --border: hsl(214.3 31.8% 91.4%);
+    --input: hsl(214.3 31.8% 91.4%);
+    --primary: hsl(222.2 47.4% 11.2%);
+    --primary-foreground: hsl(210 40% 98%);
+    --secondary: hsl(210 40% 96.1%);
+    --secondary-foreground: hsl(222.2 47.4% 11.2%);
+    --accent: hsl(210 40% 96.1%);
+    --accent-foreground: hsl(222.2 47.4% 11.2%);
+    --destructive: hsl(0 84.2% 60.2%);
+    --destructive-foreground: hsl(210 40% 98%);
+    --ring: hsl(222.2 84% 4.9%);
+    --shadow: hsl(0 0% 65%);
+
+    /* ═══════════════════════════════════════════════
+       §12 GOLD PALETTE
+       ═══════════════════════════════════════════════ */
+    --color-gold: hsl(43 74% 49%);
+    --color-gold-light: hsl(51 100% 50%);
+    --color-gold-dark: hsl(34 87% 38%);
+
+    /* ═══════════════════════════════════════════════
+       §13 RAINBOW PALETTE
+       ═══════════════════════════════════════════════ */
+
+    /* Rainbow vivid */
+    --rainbow-red: hsl(0 85% 60%);
+    --rainbow-orange: hsl(30 90% 55%);
+    --rainbow-yellow: hsl(55 90% 55%);
+    --rainbow-green: hsl(130 70% 50%);
+    --rainbow-blue: hsl(210 80% 55%);
+    --rainbow-indigo: hsl(260 70% 60%);
+    --rainbow-violet: hsl(300 75% 60%);
+
+    /* Rainbow pastel */
+    --rainbow-pastel-red: hsl(0 50% 78%);
+    --rainbow-pastel-orange: hsl(25 55% 76%);
+    --rainbow-pastel-yellow: hsl(50 55% 78%);
+    --rainbow-pastel-green: hsl(130 35% 74%);
+    --rainbow-pastel-blue: hsl(220 45% 76%);
+    --rainbow-pastel-indigo: hsl(260 35% 76%);
+    --rainbow-pastel-violet: hsl(280 40% 78%);
+}
+
+/* ═══════════════════════════════════════════════
+   §10  DEFAULT DARK MODE (consumers override locally)
+   ═══════════════════════════════════════════════ */
+.dark {
+    /* Glass opacity boosted for dark backgrounds */
+    --glass-opacity-subtle:   0.42;
+    --glass-opacity-default:  0.58;
+    --glass-opacity-medium:   0.72;
+    --glass-opacity-elevated: 0.88;
+
+    --glass-grain-opacity: 0.06;
+    --glass-highlight: inset 0 0.5px 0 0 hsl(0 0% 100% / 0.08);
+
+    --background: hsl(224 71% 4%);
+    --foreground: hsl(210 40% 98%);
+    --muted: hsl(217.2 32.6% 17.5%);
+    --muted-foreground: hsl(215 20.2% 65.1%);
+    --popover: hsl(224 71% 4%);
+    --popover-foreground: hsl(210 40% 98%);
+    --card: hsl(224 50% 10%);
+    --card-foreground: hsl(210 40% 98%);
+    --border: hsl(216 34% 17%);
+    --input: hsl(216 34% 17%);
+    --primary: hsl(210 40% 98%);
+    --primary-foreground: hsl(222.2 47.4% 11.2%);
+    --secondary: hsl(217.2 32.6% 17.5%);
+    --secondary-foreground: hsl(210 40% 98%);
+    --accent: hsl(217.2 32.6% 17.5%);
+    --accent-foreground: hsl(210 40% 98%);
+    --destructive: hsl(0 72% 50%);
+    --destructive-foreground: hsl(210 40% 98%);
+    --ring: hsl(212.7 26.8% 83.9%);
+    --shadow: hsl(0 0% 10%);
+    --shadow-card: 4px 4px 0px 0px color-mix(in srgb, var(--shadow-color) 85%, transparent);
+    --shadow-card-hover: 5px 5px 0px 0px color-mix(in srgb, var(--shadow-color) 95%, transparent);
+
+    --shadow-cartoon-color: rgb(255 255 255 / 0.07);
+    --shadow-cartoon-color-soft: rgb(255 255 255 / 0.03);
+    --shadow-cartoon-color-hover: rgb(255 255 255 / 0.10);
+    --shadow-cartoon-color-hover-soft: rgb(255 255 255 / 0.05);
+
+    /* Gold — boosted for dark backgrounds */
+    --color-gold: hsl(43 74% 55%);
+    --color-gold-light: hsl(51 100% 55%);
+    --color-gold-dark: hsl(34 87% 45%);
+}