@hadoku/themes 0.0.0-stage → 5.12.15

package/src/style.css

@@ -0,0 +1,1421 @@
+/**
+ * Hadoku Theme System
+ * Beautiful color themes using CSS custom properties
+ *
+ * Usage: Set data-theme attribute on html element or container
+ * Example: <html data-theme="dark">
+ *
+ * Themes: light (default), dark, strawberry-light, strawberry-dark,
+ *         ocean-light, ocean-dark, cyberpunk-light, cyberpunk-dark,
+ *         coffee-light, coffee-dark, lavender-light, lavender-dark,
+ *         nature-light, nature-dark, pink-light, pink-dark,
+ *         izakaya-light, izakaya-dark
+ *
+ * TAILWIND v4 COMPATIBILITY
+ * =========================
+ * Variables are namespaced with --hdk-* prefix to avoid collisions with
+ * Tailwind v4's internal CSS variables (--spacing-*, --radius-*, etc.).
+ *
+ * Variable Namespaces:
+ *   --hdk-space-*   : Spacing (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl)
+ *   --hdk-text-*    : Font sizes (xs, sm, md, base, lg)
+ *   --hdk-radius-*  : Border radius (sm, [default], lg)
+ *   --hdk-shadow-*  : Shadows (sm, md, lg, focus, focus-sm, focus-alt)
+ *   --color-*       : Colors (no conflict with Tailwind, kept as-is)
+ *
+ * CONTRAST TEXT VARIABLES (--color-on-*)
+ * ======================================
+ * The --color-on-{role} variables define the text color for use ON TOP OF
+ * that role's background color (e.g., text on a primary-colored button).
+ *
+ *   --color-on-primary : Text color on --color-primary surfaces
+ *   --color-on-success : Text color on --color-success surfaces
+ *   --color-on-warning : Text color on --color-warning surfaces
+ *   --color-on-danger  : Text color on --color-danger surfaces
+ *   --color-on-neutral : Text color on --color-neutral surfaces
+ *
+ * IMPORTANT: These are computed from the LUMINANCE OF THE COLOR, not the
+ * theme mode. A bright yellow in dark mode still needs black text.
+ * Rule: if relative luminance > 0.179, use black; otherwise use white.
+ *
+ * SEMANTIC COLOR CONVENTION
+ * =========================
+ * The names "success", "danger", "warning" describe semantic ROLES in the
+ * UI — buttons, badges, feedback indicators. However, themes are free to
+ * assign ANY visually distinct colors to these roles. For example:
+ *   - Ocean theme: success=orange, danger=pink
+ *   - Coffee theme: success=gold, danger=brown
+ *   - Cyberpunk: success=neon green, danger=magenta
+ *
+ * This is intentional — themes express personality through color choice.
+ * The names indicate WHERE colors are used (complete button, delete button,
+ * status badges), not what hue they must be. The only hard requirement is
+ * that success, danger, and primary are visually distinct from each other.
+ *
+ * For Tailwind integration, see tailwind-integration.css or docs.
+ */
+
+/* --advanced-gradient is registered as non-inheriting so a parent matching
+   [data-theme='light'] (e.g. <html> set by the page-load init script) can't
+   bleed its gradient into a descendant on a different theme. Without this,
+   a container nested inside <html data-theme='light'> with its own
+   data-theme='coffee-light' inherits the light gradient via CSS variable
+   inheritance — which is what bit us in production. */
+@property --advanced-gradient {
+  syntax: '*';
+  inherits: false;
+}
+
+/* Every theme block below declares `color-scheme`, so a consumer never has to
+   know which theme names are light and which are dark. Six child apps used to
+   each carry a hand-written list of theme names for exactly this, and every
+   one of them had gone stale — all six were missing izakaya, hadoku-task was
+   missing nature too, so those themes got no color-scheme at all and their
+   scrollbars and form controls rendered for the wrong mode. `dark only` on the
+   dark themes is the Dark Reader hint: it says the surface is already dark,
+   do not re-invert it. */
+
+/* ===== LIGHT THEME (Default) ===== */
+:root,
+[data-theme='light'] {
+  color-scheme: light;
+  /* Primary */
+  --color-primary: #2563eb;
+  --color-primary-dark: #1d4ed8;
+  --color-primary-bg: #eff6ff;
+  --color-primary-hover: rgba(37, 99, 235, 0.06);
+  --color-on-primary: white;
+  --color-on-primary-bg: #2563eb;
+
+  /* Success */
+  --color-success: #0ea5e9;
+  --color-success-dark: #0284c7;
+  --color-success-bg: rgba(14, 165, 233, 0.1);
+  --color-success-hover: rgba(14, 165, 233, 0.06);
+  --color-on-success: black;
+  --color-on-success-bg: #0067a7;
+
+  /* Warning */
+  --color-warning: #f59e0b;
+  --color-warning-dark: #ce7a00;
+  --color-warning-bg: rgba(245, 158, 11, 0.1);
+  --color-warning-hover: rgba(245, 158, 11, 0.06);
+  --color-on-warning: black;
+  --color-on-warning-bg: #9e4d00;
+
+  /* Danger */
+  --color-danger: #f97316;
+  --color-danger-dark: #ea580c;
+  --color-danger-bg: #ffedd5;
+  --color-danger-hover: rgba(249, 115, 22, 0.06);
+  --color-on-danger: black;
+  --color-on-danger-bg: #c13e00;
+
+  /* Neutral */
+  --color-neutral: #637389;
+  --color-neutral-dark: #435267;
+  --color-neutral-bg: #e2e8f0;
+  --color-neutral-hover: rgba(100, 116, 139, 0.06);
+  --color-on-neutral: white;
+  --color-on-neutral-bg: #58677d;
+
+  /* Text */
+  --color-text: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-tertiary: #64748b;
+  --color-text-muted: #94a3b8;
+
+  /* Borders */
+  --color-border: #cdd4db;
+  --color-border-light: #dfe5ed;
+
+  /* Backgrounds */
+  --color-bg: #e7eef5;
+  --color-bg-card: #ffffff;
+  --color-bg-alt: #e7eef5;
+  --color-bg-hover: #e2e9f0;
+  --color-bg-overlay: rgba(15, 23, 42, 0.5);
+
+  /* Spacing (namespaced to avoid Tailwind v4 collision with max-w-*, etc.) */
+  --hdk-space-xs: 2px;
+  --hdk-space-sm: 4px;
+  --hdk-space-md: 8px;
+  --hdk-space-lg: 12px;
+  --hdk-space-xl: 16px;
+  --hdk-space-2xl: 20px;
+  --hdk-space-3xl: 24px;
+  --hdk-space-4xl: 40px;
+  --hdk-space-5xl: 60px;
+
+  /* Typography (namespaced for Tailwind v4 compatibility) */
+  --font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --hdk-text-xs: 12px;
+  --hdk-text-sm: 14px;
+  --hdk-text-md: 15px;
+  --hdk-text-base: 16px;
+  --hdk-text-lg: 24px;
+
+  --font-weight-normal: 400;
+  --font-weight-semibold: 500;
+  --font-weight-bold: 600;
+
+  --line-height-normal: 1.4;
+  --line-height-relaxed: 1.5;
+
+  /* Layout (namespaced for Tailwind v4 compatibility) */
+  --hdk-radius-sm: 4px;
+  --hdk-radius: 6px;
+  --hdk-radius-lg: 8px;
+
+  /* Shadows (namespaced for Tailwind v4 compatibility) */
+  --hdk-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
+  --hdk-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.08);
+  --hdk-shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.15);
+  --hdk-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.2);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(37, 99, 235, 0.2);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(37, 99, 235, 0.1);
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-smooth: 0.2s ease;
+}
+
+/* ===== LIGHT THEME — advanced visual contract =====
+   Scoped to [data-theme='light'] only (NOT :root) so the gradient
+   doesn't leak into other themes that don't override it. Renders
+   only when data-theme-mode='advanced' (via @wolffm/themes/advanced.css). */
+[data-theme='light'] {
+  --advanced-stop-1-l: 0.82;
+  --advanced-stop-1-c: 0.18;
+  --advanced-stop-1-h: 55;
+  --advanced-stop-2-l: 0.78;
+  --advanced-stop-2-c: 0.2;
+  --advanced-stop-2-h: 40;
+  --advanced-stop-3-l: 0.72;
+  --advanced-stop-3-c: 0.22;
+  --advanced-stop-3-h: 25;
+  --advanced-stop-4-l: 0.7;
+  --advanced-stop-4-c: 0.18;
+  --advanced-stop-4-h: 10;
+  --advanced-stop-5-l: 0.72;
+  --advanced-stop-5-c: 0.16;
+  --advanced-stop-5-h: 355;
+  --advanced-stop-6-l: 0.68;
+  --advanced-stop-6-c: 0.14;
+  --advanced-stop-6-h: 190;
+  --advanced-stop-7-l: 0.6;
+  --advanced-stop-7-c: 0.16;
+  --advanced-stop-7-h: 200;
+  --advanced-stop-8-l: 0.5;
+  --advanced-stop-8-c: 0.18;
+  --advanced-stop-8-h: 210;
+  --advanced-gradient: linear-gradient(
+    135deg,
+    oklch(var(--advanced-stop-1-l) var(--advanced-stop-1-c) var(--advanced-stop-1-h)) 0%,
+    oklch(var(--advanced-stop-2-l) var(--advanced-stop-2-c) var(--advanced-stop-2-h)) 15%,
+    oklch(var(--advanced-stop-3-l) var(--advanced-stop-3-c) var(--advanced-stop-3-h)) 30%,
+    oklch(var(--advanced-stop-4-l) var(--advanced-stop-4-c) var(--advanced-stop-4-h)) 45%,
+    oklch(var(--advanced-stop-5-l) var(--advanced-stop-5-c) var(--advanced-stop-5-h)) 55%,
+    oklch(var(--advanced-stop-6-l) var(--advanced-stop-6-c) var(--advanced-stop-6-h)) 70%,
+    oklch(var(--advanced-stop-7-l) var(--advanced-stop-7-c) var(--advanced-stop-7-h)) 85%,
+    oklch(var(--advanced-stop-8-l) var(--advanced-stop-8-c) var(--advanced-stop-8-h)) 100%
+  );
+}
+
+/* ===== DARK THEME ===== */
+[data-theme='dark'] {
+  color-scheme: dark only;
+  /* Primary */
+  --color-primary: #b793ff;
+  --color-primary-dark: #a17de7;
+  --color-primary-bg: rgba(183, 147, 255, 0.16);
+  --color-primary-hover: rgba(183, 147, 255, 0.12);
+  --color-on-primary: black;
+  --color-on-primary-bg: #b793ff;
+
+  /* Success */
+  --color-success: #fcde3d;
+  --color-success-dark: #e5c70e;
+  --color-success-bg: rgba(252, 222, 61, 0.15);
+  --color-success-hover: rgba(252, 222, 61, 0.1);
+  --color-on-success: black;
+  --color-on-success-bg: #fcde3d;
+
+  /* Warning */
+  --color-warning: #ffb848;
+  --color-warning-dark: #e7a22b;
+  --color-warning-bg: rgba(255, 184, 72, 0.15);
+  --color-warning-hover: rgba(255, 184, 72, 0.1);
+  --color-on-warning: black;
+  --color-on-warning-bg: #ffb848;
+
+  /* Danger */
+  --color-danger: #f46a82;
+  --color-danger-dark: #db536d;
+  --color-danger-bg: rgba(244, 106, 130, 0.15);
+  --color-danger-hover: rgba(244, 106, 130, 0.1);
+  --color-on-danger: black;
+  --color-on-danger-bg: #fb7088;
+
+  /* Neutral */
+  --color-neutral: #9d9ea6;
+  --color-neutral-dark: #888991;
+  --color-neutral-bg: #2f3038;
+  --color-neutral-hover: rgba(157, 158, 166, 0.1);
+  --color-on-neutral: black;
+  --color-on-neutral-bg: #9d9ea6;
+
+  /* Text */
+  --color-text: #f4f2f9;
+  --color-text-secondary: #dcd9e3;
+  --color-text-tertiary: #c0bbcb;
+  --color-text-muted: #948f9e;
+
+  /* Borders */
+  --color-border: #3c3d40;
+  --color-border-light: #525256;
+
+  /* Backgrounds */
+  --color-bg: #151618;
+  --color-bg-card: #222325;
+  --color-bg-alt: #101013;
+  --color-bg-hover: #2c2c30;
+  --color-bg-overlay: rgba(0, 0, 0, 0.72);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --hdk-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5);
+  --hdk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
+  --hdk-shadow-focus: 0 0 0 3px rgba(183, 147, 255, 0.3);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(183, 147, 255, 0.3);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(183, 147, 255, 0.2);
+}
+
+/* ===== STRAWBERRY LIGHT THEME ===== */
+[data-theme='strawberry-light'] {
+  color-scheme: light;
+  /* Primary */
+  --color-primary: #ff6b9d;
+  --color-primary-dark: #ff477a;
+  --color-primary-bg: #fff5f8;
+  --color-primary-hover: rgba(255, 107, 157, 0.1);
+  --color-on-primary: black;
+  --color-on-primary-bg: #c6356d;
+
+  /* Success */
+  --color-success: #22c55e;
+  --color-success-dark: #16a34a;
+  --color-success-bg: rgba(34, 197, 94, 0.1);
+  --color-success-hover: rgba(34, 197, 94, 0.06);
+  --color-on-success: black;
+  --color-on-success-bg: #006d00;
+
+  /* Warning */
+  --color-warning: #f59e0b;
+  --color-warning-dark: #ce7a00;
+  --color-warning-bg: rgba(245, 158, 11, 0.1);
+  --color-warning-hover: rgba(245, 158, 11, 0.06);
+  --color-on-warning: black;
+  --color-on-warning-bg: #984700;
+
+  /* Danger */
+  --color-danger: #ec4899;
+  --color-danger-dark: #db2777;
+  --color-danger-bg: #ffe4e9;
+  --color-danger-hover: rgba(236, 72, 153, 0.06);
+  --color-on-danger: black;
+  --color-on-danger-bg: #c51a78;
+
+  /* Neutral */
+  --color-neutral: #94a3b8;
+  --color-neutral-dark: #728094;
+  --color-neutral-bg: #fdd5e0;
+  --color-neutral-hover: rgba(148, 163, 184, 0.06);
+  --color-on-neutral: black;
+  --color-on-neutral-bg: #546275;
+
+  /* Text */
+  --color-text: #1f1c1e;
+  --color-text-secondary: #6b5a5e;
+  --color-text-tertiary: #a78b92;
+  --color-text-muted: #c4a4ab;
+
+  /* Borders */
+  --color-border: #f3becf;
+  --color-border-light: #f6d7e0;
+
+  /* Backgrounds */
+  --color-bg: #f0e6e9;
+  --color-bg-card: #fff9fc;
+  --color-bg-alt: #ecdde1;
+  --color-bg-hover: #eccdd6;
+  --color-bg-overlay: rgba(255, 107, 157, 0.3);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(255, 107, 157, 0.08);
+  --hdk-shadow-md: 0 2px 4px rgba(255, 107, 157, 0.12);
+  --hdk-shadow-lg: 0 8px 24px rgba(255, 107, 157, 0.2);
+  --hdk-shadow-focus: 0 0 0 3px rgba(255, 107, 157, 0.25);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(255, 107, 157, 0.25);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(255, 107, 157, 0.15);
+}
+
+/* ===== STRAWBERRY DARK THEME ===== */
+[data-theme='strawberry-dark'] {
+  color-scheme: dark only;
+  /* Primary */
+  --color-primary: #f6526f;
+  --color-primary-dark: #dd395b;
+  --color-primary-bg: rgba(246, 82, 111, 0.16);
+  --color-primary-hover: rgba(246, 82, 111, 0.12);
+  --color-on-primary: black;
+  --color-on-primary-bg: #ff6781;
+
+  /* Success */
+  --color-success: #6fda75;
+  --color-success-dark: #57c35f;
+  --color-success-bg: rgba(111, 218, 117, 0.15);
+  --color-success-hover: rgba(111, 218, 117, 0.1);
+  --color-on-success: black;
+  --color-on-success-bg: #6fda75;
+
+  /* Warning */
+  --color-warning: #fdbe45;
+  --color-warning-dark: #e5a725;
+  --color-warning-bg: rgba(253, 190, 69, 0.15);
+  --color-warning-hover: rgba(253, 190, 69, 0.1);
+  --color-on-warning: black;
+  --color-on-warning-bg: #fdbe45;
+
+  /* Danger */
+  --color-danger: #f2823b;
+  --color-danger-dark: #da6c1f;
+  --color-danger-bg: rgba(242, 130, 59, 0.15);
+  --color-danger-hover: rgba(242, 130, 59, 0.1);
+  --color-on-danger: black;
+  --color-on-danger-bg: #f2823b;
+
+  /* Neutral */
+  --color-neutral: #889e94;
+  --color-neutral-dark: #73897f;
+  --color-neutral-bg: #20362c;
+  --color-neutral-hover: rgba(136, 158, 148, 0.1);
+  --color-on-neutral: black;
+  --color-on-neutral-bg: #8ba197;
+
+  /* Text */
+  --color-text: #ffefef;
+  --color-text-secondary: #edd4d6;
+  --color-text-tertiary: #dbb2b7;
+  --color-text-muted: #ab888c;
+
+  /* Borders */
+  --color-border: #2f5838;
+  --color-border-light: #3f704a;
+
+  /* Backgrounds */
+  --color-bg: #0a1a13;
+  --color-bg-card: #16271f;
+  --color-bg-alt: #05140e;
+  --color-bg-hover: #1e3129;
+  --color-bg-overlay: rgba(0, 0, 0, 0.72);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --hdk-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5);
+  --hdk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
+  --hdk-shadow-focus: 0 0 0 3px rgba(246, 82, 111, 0.3);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(246, 82, 111, 0.3);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(246, 82, 111, 0.2);
+}
+
+/* ===== OCEAN LIGHT THEME ===== */
+[data-theme='ocean-light'] {
+  color-scheme: light;
+  /* Primary */
+  --color-primary: #06b6d4;
+  --color-primary-dark: #0891b2;
+  --color-primary-bg: #ecfeff;
+  --color-primary-hover: rgba(6, 182, 212, 0.08);
+  --color-on-primary: black;
+  --color-on-primary-bg: #007b97;
+
+  /* Success */
+  --color-success: #f97316;
+  --color-success-dark: #ea580c;
+  --color-success-bg: rgba(249, 115, 22, 0.1);
+  --color-success-hover: rgba(249, 115, 22, 0.06);
+  --color-on-success: black;
+  --color-on-success-bg: #af2c00;
+
+  /* Warning */
+  --color-warning: #eab308;
+  --color-warning-dark: #c48e00;
+  --color-warning-bg: rgba(234, 179, 8, 0.1);
+  --color-warning-hover: rgba(234, 179, 8, 0.06);
+  --color-on-warning: black;
+  --color-on-warning-bg: #8a5600;
+
+  /* Danger */
+  --color-danger: #ec4899;
+  --color-danger-dark: #db2777;
+  --color-danger-bg: #fce7f3;
+  --color-danger-hover: rgba(236, 72, 153, 0.06);
+  --color-on-danger: black;
+  --color-on-danger-bg: #c51a78;
+
+  /* Neutral */
+  --color-neutral: #637389;
+  --color-neutral-dark: #435267;
+  --color-neutral-bg: #e0f2fe;
+  --color-neutral-hover: rgba(100, 116, 139, 0.06);
+  --color-on-neutral: white;
+  --color-on-neutral-bg: #5b6a80;
+
+  /* Text */
+  --color-text: #0c4a6e;
+  --color-text-secondary: #075985;
+  --color-text-tertiary: #0ea5e9;
+  --color-text-muted: #38bdf8;
+
+  /* Borders */
+  --color-border: #95e2eb;
+  --color-border-light: #c4eef2;
+
+  /* Backgrounds */
+  --color-bg: #e6eff5;
+  --color-bg-card: #ffffff;
+  --color-bg-alt: #d6e8f4;
+  --color-bg-hover: #c5f0f4;
+  --color-bg-overlay: rgba(8, 47, 73, 0.3);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(6, 182, 212, 0.08);
+  --hdk-shadow-md: 0 2px 4px rgba(6, 182, 212, 0.12);
+  --hdk-shadow-lg: 0 8px 24px rgba(6, 182, 212, 0.2);
+  --hdk-shadow-focus: 0 0 0 3px rgba(6, 182, 212, 0.25);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(6, 182, 212, 0.25);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(6, 182, 212, 0.15);
+}
+
+/* ===== OCEAN DARK THEME ===== */
+[data-theme='ocean-dark'] {
+  color-scheme: dark only;
+  /* Primary */
+  --color-primary: #06b6d4;
+  --color-primary-dark: #0891b2;
+  --color-primary-bg: #0c4a6e;
+  --color-primary-hover: rgba(6, 182, 212, 0.15);
+  --color-on-primary: black;
+  --color-on-primary-bg: #30c6e5;
+
+  /* Success */
+  --color-success: #f97316;
+  --color-success-dark: #ea580c;
+  --color-success-bg: rgba(249, 115, 22, 0.15);
+  --color-success-hover: rgba(249, 115, 22, 0.1);
+  --color-on-success: black;
+  --color-on-success-bg: #ffb568;
+
+  /* Warning */
+  --color-warning: #fbbf24;
+  --color-warning-dark: #d59a00;
+  --color-warning-bg: rgba(251, 191, 36, 0.15);
+  --color-warning-hover: rgba(251, 191, 36, 0.1);
+  --color-on-warning: black;
+  --color-on-warning-bg: #ffc935;
+
+  /* Danger */
+  --color-danger: #ec4899;
+  --color-danger-dark: #db2777;
+  --color-danger-bg: #500724;
+  --color-danger-hover: rgba(236, 72, 153, 0.1);
+  --color-on-danger: black;
+  --color-on-danger-bg: #f34f9f;
+
+  /* Neutral */
+  --color-neutral: #637389;
+  --color-neutral-dark: #435267;
+  --color-neutral-bg: #1e3a52;
+  --color-neutral-hover: rgba(100, 116, 139, 0.1);
+  --color-on-neutral: white;
+  --color-on-neutral-bg: #95a6be;
+
+  /* Text */
+  --color-text: #e0f2fe;
+  --color-text-secondary: #bae6fd;
+  --color-text-tertiary: #7dd3fc;
+  --color-text-muted: #0ea5e9;
+
+  /* Borders */
+  --color-border: #34697f;
+  --color-border-light: #0e7490;
+
+  /* Backgrounds */
+  --color-bg: #082f49;
+  --color-bg-card: #0c4a6e;
+  --color-bg-alt: #164e63;
+  --color-bg-hover: #0e7490;
+  --color-bg-overlay: rgba(0, 0, 0, 0.7);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --hdk-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.6);
+  --hdk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
+  --hdk-shadow-focus: 0 0 0 3px rgba(6, 182, 212, 0.3);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(6, 182, 212, 0.3);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(6, 182, 212, 0.2);
+}
+
+/* ===== CYBERPUNK LIGHT THEME ===== */
+[data-theme='cyberpunk-light'] {
+  color-scheme: light;
+  /* Primary */
+  --color-primary: #ff006e;
+  --color-primary-dark: #ea005e;
+  --color-primary-bg: #fff0f7;
+  --color-primary-hover: rgba(255, 0, 110, 0.08);
+  --color-on-primary: black;
+  --color-on-primary-bg: #d90052;
+
+  /* Success */
+  --color-success: #00f5d4;
+  --color-success-dark: #00d9c0;
+  --color-success-bg: rgba(0, 245, 212, 0.1);
+  --color-success-hover: rgba(0, 245, 212, 0.06);
+  --color-on-success: black;
+  --color-on-success-bg: #007158;
+
+  /* Warning */
+  --color-warning: #ff9f1c;
+  --color-warning-dark: #d77b00;
+  --color-warning-bg: rgba(255, 159, 28, 0.1);
+  --color-warning-hover: rgba(255, 159, 28, 0.06);
+  --color-on-warning: black;
+  --color-on-warning-bg: #a04800;
+
+  /* Danger */
+  --color-danger: #fb5607;
+  --color-danger-dark: #e04f06;
+  --color-danger-bg: #ffe8dc;
+  --color-danger-hover: rgba(251, 86, 7, 0.06);
+  --color-on-danger: black;
+  --color-on-danger-bg: #cc2200;
+
+  /* Neutral */
+  --color-neutral: #9849d8;
+  --color-neutral-dark: #761eb1;
+  --color-neutral-bg: #e9d5ff;
+  --color-neutral-hover: rgba(157, 78, 221, 0.06);
+  --color-on-neutral: white;
+  --color-on-neutral-bg: #8634c4;
+
+  /* Text */
+  --color-text: #1a1a2e;
+  --color-text-secondary: #3d3d5c;
+  --color-text-tertiary: #6b6b8a;
+  --color-text-muted: #9999b3;
+
+  /* Borders */
+  --color-border: #dacaf8;
+  --color-border-light: #eadff9;
+
+  /* Backgrounds */
+  --color-bg: #ececf5;
+  --color-bg-card: #ffffff;
+  --color-bg-alt: #e8e6f2;
+  --color-bg-hover: #e3d8f2;
+  --color-bg-overlay: rgba(26, 26, 46, 0.4);
+
+  --hdk-shadow-sm: 0 1px 3px rgba(255, 0, 110, 0.12);
+  --hdk-shadow-md: 0 2px 6px rgba(255, 0, 110, 0.18);
+  --hdk-shadow-lg: 0 8px 24px rgba(255, 0, 110, 0.25);
+  --hdk-shadow-focus: 0 0 0 3px rgba(255, 0, 110, 0.3);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(255, 0, 110, 0.3);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(255, 0, 110, 0.2);
+}
+
+/* ===== CYBERPUNK DARK THEME ===== */
+[data-theme='cyberpunk-dark'] {
+  color-scheme: dark only;
+  /* Primary */
+  --color-primary: #22d3ee;
+  --color-primary-dark: #06b6d4;
+  --color-primary-bg: #0a1929;
+  --color-primary-hover: rgba(34, 211, 238, 0.15);
+  --color-on-primary: black;
+  --color-on-primary-bg: #22d3ee;
+
+  /* Success */
+  --color-success: #39ff14;
+  --color-success-dark: #00ff00;
+  --color-success-bg: rgba(57, 255, 20, 0.15);
+  --color-success-hover: rgba(57, 255, 20, 0.1);
+  --color-on-success: black;
+  --color-on-success-bg: #39ff14;
+
+  /* Warning */
+  --color-warning: #ffbe0b;
+  --color-warning-dark: #d89900;
+  --color-warning-bg: rgba(255, 190, 11, 0.15);
+  --color-warning-hover: rgba(255, 190, 11, 0.1);
+  --color-on-warning: black;
+  --color-on-warning-bg: #ffbe0b;
+
+  /* Danger */
+  --color-danger: #ff10f0;
+  --color-danger-dark: #ff00ff;
+  --color-danger-bg: #800080;
+  --color-danger-hover: rgba(255, 16, 240, 0.1);
+  --color-on-danger: black;
+  --color-on-danger-bg: #ff89ff;
+
+  /* Neutral */
+  --color-neutral: #637389;
+  --color-neutral-dark: #435267;
+  --color-neutral-bg: #1e293b;
+  --color-neutral-hover: rgba(100, 116, 139, 0.1);
+  --color-on-neutral: white;
+  --color-on-neutral-bg: #8394ab;
+
+  /* Text */
+  --color-text: #e0f2fe;
+  --color-text-secondary: #67e8f9;
+  --color-text-tertiary: #22d3ee;
+  --color-text-muted: #0891b2;
+
+  /* Borders */
+  --color-border: #164e63;
+  --color-border-light: #0e7490;
+
+  /* Backgrounds */
+  --color-bg: #020617;
+  --color-bg-card: #0c1929;
+  --color-bg-alt: #1e293b;
+  --color-bg-hover: #0f172a;
+  --color-bg-overlay: rgba(0, 0, 0, 0.8);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(34, 211, 238, 0.2);
+  --hdk-shadow-md: 0 2px 4px rgba(34, 211, 238, 0.3);
+  --hdk-shadow-lg: 0 8px 24px rgba(34, 211, 238, 0.4);
+  --hdk-shadow-focus: 0 0 0 3px rgba(34, 211, 238, 0.4);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(34, 211, 238, 0.4);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(34, 211, 238, 0.3);
+
+  /* Advanced contract: neon-grid 8-stop gradient (cyan → magenta → violet).
+     Renders only when data-theme-mode='advanced' (via @wolffm/themes/advanced.css). */
+  --advanced-stop-1-l: 0.32;
+  --advanced-stop-1-c: 0.12;
+  --advanced-stop-1-h: 220;
+  --advanced-stop-2-l: 0.42;
+  --advanced-stop-2-c: 0.18;
+  --advanced-stop-2-h: 200;
+  --advanced-stop-3-l: 0.5;
+  --advanced-stop-3-c: 0.2;
+  --advanced-stop-3-h: 195;
+  --advanced-stop-4-l: 0.45;
+  --advanced-stop-4-c: 0.22;
+  --advanced-stop-4-h: 280;
+  --advanced-stop-5-l: 0.4;
+  --advanced-stop-5-c: 0.26;
+  --advanced-stop-5-h: 320;
+  --advanced-stop-6-l: 0.46;
+  --advanced-stop-6-c: 0.28;
+  --advanced-stop-6-h: 340;
+  --advanced-stop-7-l: 0.38;
+  --advanced-stop-7-c: 0.22;
+  --advanced-stop-7-h: 290;
+  --advanced-stop-8-l: 0.28;
+  --advanced-stop-8-c: 0.16;
+  --advanced-stop-8-h: 250;
+  --advanced-gradient: linear-gradient(
+    135deg,
+    oklch(var(--advanced-stop-1-l) var(--advanced-stop-1-c) var(--advanced-stop-1-h)) 0%,
+    oklch(var(--advanced-stop-2-l) var(--advanced-stop-2-c) var(--advanced-stop-2-h)) 15%,
+    oklch(var(--advanced-stop-3-l) var(--advanced-stop-3-c) var(--advanced-stop-3-h)) 30%,
+    oklch(var(--advanced-stop-4-l) var(--advanced-stop-4-c) var(--advanced-stop-4-h)) 45%,
+    oklch(var(--advanced-stop-5-l) var(--advanced-stop-5-c) var(--advanced-stop-5-h)) 60%,
+    oklch(var(--advanced-stop-6-l) var(--advanced-stop-6-c) var(--advanced-stop-6-h)) 75%,
+    oklch(var(--advanced-stop-7-l) var(--advanced-stop-7-c) var(--advanced-stop-7-h)) 88%,
+    oklch(var(--advanced-stop-8-l) var(--advanced-stop-8-c) var(--advanced-stop-8-h)) 100%
+  );
+}
+
+/* ===== COFFEE LIGHT THEME ===== */
+[data-theme='coffee-light'] {
+  color-scheme: light;
+  /* Primary */
+  --color-primary: #ea580c;
+  --color-primary-dark: #d54300;
+  --color-primary-bg: #fffbeb;
+  --color-primary-hover: rgba(234, 88, 12, 0.08);
+  --color-on-primary: black;
+  --color-on-primary-bg: #cd3c00;
+
+  /* Success */
+  --color-success: #eab308;
+  --color-success-dark: #ca8a04;
+  --color-success-bg: rgba(234, 179, 8, 0.1);
+  --color-success-hover: rgba(234, 179, 8, 0.06);
+  --color-on-success: black;
+  --color-on-success-bg: #8a5600;
+
+  /* Warning */
+  --color-warning: #d97706;
+  --color-warning-dark: #bb5b00;
+  --color-warning-bg: rgba(217, 119, 6, 0.1);
+  --color-warning-hover: rgba(217, 119, 6, 0.06);
+  --color-on-warning: black;
+  --color-on-warning-bg: #a04300;
+
+  /* Danger */
+  --color-danger: #78350f;
+  --color-danger-dark: #92400e;
+  --color-danger-bg: #fef3c7;
+  --color-danger-hover: rgba(120, 53, 15, 0.06);
+  --color-on-danger: white;
+  --color-on-danger-bg: #78350f;
+
+  /* Neutral */
+  --color-neutral: #77706b;
+  --color-neutral-dark: #56504b;
+  --color-neutral-bg: #fde68a;
+  --color-neutral-hover: rgba(120, 113, 108, 0.06);
+  --color-on-neutral: white;
+  --color-on-neutral-bg: #6b6560;
+
+  /* Text */
+  --color-text: #1c1917;
+  --color-text-secondary: #44403c;
+  --color-text-tertiary: #78716c;
+  --color-text-muted: #a8a29e;
+
+  /* Borders */
+  --color-border: #ead377;
+  --color-border-light: #f0e5ba;
+
+  /* Backgrounds */
+  --color-bg: #f1edde;
+  --color-bg-card: #ffffff;
+  --color-bg-alt: #f0e5ba;
+  --color-bg-hover: #f0ca9d;
+  --color-bg-overlay: rgba(28, 25, 23, 0.3);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(234, 88, 12, 0.08);
+  --hdk-shadow-md: 0 2px 4px rgba(234, 88, 12, 0.12);
+  --hdk-shadow-lg: 0 8px 24px rgba(234, 88, 12, 0.2);
+  --hdk-shadow-focus: 0 0 0 3px rgba(234, 88, 12, 0.25);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(234, 88, 12, 0.25);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(234, 88, 12, 0.15);
+}
+
+/* ===== COFFEE DARK THEME ===== */
+[data-theme='coffee-dark'] {
+  color-scheme: dark only;
+  /* Primary */
+  --color-primary: #ea580c;
+  --color-primary-dark: #d54300;
+  --color-primary-bg: #292524;
+  --color-primary-hover: rgba(234, 88, 12, 0.15);
+  --color-on-primary: black;
+  --color-on-primary-bg: #f15f1a;
+
+  /* Success */
+  --color-success: #facc15;
+  --color-success-dark: #eab308;
+  --color-success-bg: rgba(250, 204, 21, 0.15);
+  --color-success-hover: rgba(250, 204, 21, 0.1);
+  --color-on-success: black;
+  --color-on-success-bg: #facc15;
+
+  /* Warning */
+  --color-warning: #f59e0b;
+  --color-warning-dark: #ce7a00;
+  --color-warning-bg: rgba(245, 158, 11, 0.15);
+  --color-warning-hover: rgba(245, 158, 11, 0.1);
+  --color-on-warning: black;
+  --color-on-warning-bg: #ffab29;
+
+  /* Danger */
+  --color-danger: #57534e;
+  --color-danger-dark: #44403c;
+  --color-danger-bg: #1c1917;
+  --color-danger-hover: rgba(87, 83, 78, 0.1);
+  --color-on-danger: white;
+  --color-on-danger-bg: #88847e;
+
+  /* Neutral */
+  --color-neutral: #77706b;
+  --color-neutral-dark: #56504b;
+  --color-neutral-bg: #3e3933;
+  --color-neutral-hover: rgba(120, 113, 108, 0.1);
+  --color-on-neutral: white;
+  --color-on-neutral-bg: #aea6a1;
+
+  /* Text */
+  --color-text: #fef3c7;
+  --color-text-secondary: #fde68a;
+  --color-text-tertiary: #fbbf24;
+  --color-text-muted: #d97706;
+
+  /* Borders */
+  --color-border: #44403c;
+  --color-border-light: #57534e;
+
+  /* Backgrounds */
+  --color-bg: #1c1917;
+  --color-bg-card: #292524;
+  --color-bg-alt: #3e3933;
+  --color-bg-hover: #44403c;
+  --color-bg-overlay: rgba(0, 0, 0, 0.75);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
+  --hdk-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.7);
+  --hdk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);
+  --hdk-shadow-focus: 0 0 0 3px rgba(234, 88, 12, 0.3);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(234, 88, 12, 0.3);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(234, 88, 12, 0.2);
+}
+
+/* ===== LAVENDER LIGHT THEME ===== */
+[data-theme='lavender-light'] {
+  color-scheme: light;
+  /* Primary */
+  --color-primary: #c084fc;
+  --color-primary-dark: #a855f7;
+  --color-primary-bg: #faf5ff;
+  --color-primary-hover: rgba(192, 132, 252, 0.08);
+  --color-on-primary: black;
+  --color-on-primary-bg: #8e52c6;
+
+  /* Success */
+  --color-success: #84cc16;
+  --color-success-dark: #65a30d;
+  --color-success-bg: rgba(132, 204, 22, 0.1);
+  --color-success-hover: rgba(132, 204, 22, 0.06);
+  --color-on-success: black;
+  --color-on-success-bg: #256700;
+
+  /* Warning */
+  --color-warning: #f59e0b;
+  --color-warning-dark: #ce7a00;
+  --color-warning-bg: rgba(245, 158, 11, 0.1);
+  --color-warning-hover: rgba(245, 158, 11, 0.06);
+  --color-on-warning: black;
+  --color-on-warning-bg: #914100;
+
+  /* Danger */
+  --color-danger: #5e60ea;
+  --color-danger-dark: #4f46e5;
+  --color-danger-bg: #e0e7ff;
+  --color-danger-hover: rgba(99, 102, 241, 0.06);
+  --color-on-danger: white;
+  --color-on-danger-bg: #5453dc;
+
+  /* Neutral */
+  --color-neutral: #71717a;
+  --color-neutral-dark: #515159;
+  --color-neutral-bg: #e4e4e7;
+  --color-neutral-hover: rgba(113, 113, 122, 0.06);
+  --color-on-neutral: white;
+  --color-on-neutral-bg: #63636b;
+
+  /* Text */
+  --color-text: #1f1f29;
+  --color-text-secondary: #52525b;
+  --color-text-tertiary: #71717a;
+  --color-text-muted: #a1a1aa;
+
+  /* Borders */
+  --color-border: #d8c4ee;
+  --color-border-light: #e6dbf1;
+
+  /* Backgrounds */
+  --color-bg: #eae6ef;
+  --color-bg-card: #fdf8ff;
+  --color-bg-alt: #e1d6ed;
+  --color-bg-hover: #d7c3ed;
+  --color-bg-overlay: rgba(192, 132, 252, 0.25);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(192, 132, 252, 0.06);
+  --hdk-shadow-md: 0 2px 4px rgba(192, 132, 252, 0.1);
+  --hdk-shadow-lg: 0 8px 24px rgba(192, 132, 252, 0.15);
+  --hdk-shadow-focus: 0 0 0 3px rgba(192, 132, 252, 0.2);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(192, 132, 252, 0.2);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(192, 132, 252, 0.15);
+}
+
+/* ===== LAVENDER DARK THEME ===== */
+[data-theme='lavender-dark'] {
+  color-scheme: dark only;
+  /* Primary */
+  --color-primary: #cba1fa;
+  --color-primary-dark: #b58be2;
+  --color-primary-bg: rgba(203, 161, 250, 0.16);
+  --color-primary-hover: rgba(203, 161, 250, 0.12);
+  --color-on-primary: black;
+  --color-on-primary-bg: #d1a7ff;
+
+  /* Success */
+  --color-success: #b3e14d;
+  --color-success-dark: #9dca30;
+  --color-success-bg: rgba(179, 225, 77, 0.15);
+  --color-success-hover: rgba(179, 225, 77, 0.1);
+  --color-on-success: black;
+  --color-on-success-bg: #b3e14d;
+
+  /* Warning */
+  --color-warning: #fdbe45;
+  --color-warning-dark: #e5a725;
+  --color-warning-bg: rgba(253, 190, 69, 0.15);
+  --color-warning-hover: rgba(253, 190, 69, 0.1);
+  --color-on-warning: black;
+  --color-on-warning-bg: #fdbe45;
+
+  /* Danger */
+  --color-danger: #f06f84;
+  --color-danger-dark: #d7596f;
+  --color-danger-bg: rgba(240, 111, 132, 0.15);
+  --color-danger-hover: rgba(240, 111, 132, 0.1);
+  --color-on-danger: black;
+  --color-on-danger-bg: #ff8c9f;
+
+  /* Neutral */
+  --color-neutral: #9098ab;
+  --color-neutral-dark: #7b8395;
+  --color-neutral-bg: #253154;
+  --color-neutral-hover: rgba(144, 152, 171, 0.1);
+  --color-on-neutral: black;
+  --color-on-neutral-bg: #969eb1;
+
+  /* Text */
+  --color-text: #f3f2fd;
+  --color-text-secondary: #dad9e8;
+  --color-text-tertiary: #bdbad4;
+  --color-text-muted: #918fa6;
+
+  /* Borders */
+  --color-border: #333e5b;
+  --color-border-light: #3b496e;
+
+  /* Backgrounds */
+  --color-bg: #0e172f;
+  --color-bg-card: #192341;
+  --color-bg-alt: #27324e;
+  --color-bg-hover: #222d4d;
+  --color-bg-overlay: rgba(0, 0, 0, 0.72);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --hdk-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5);
+  --hdk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
+  --hdk-shadow-focus: 0 0 0 3px rgba(203, 161, 250, 0.3);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(203, 161, 250, 0.3);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(203, 161, 250, 0.2);
+}
+
+/* ===== PINK LIGHT THEME ===== */
+[data-theme='pink-light'] {
+  color-scheme: light;
+  /* Primary */
+  --color-primary: #ff69b4;
+  --color-primary-dark: #ff1493;
+  --color-primary-bg: #fff0f5;
+  --color-primary-hover: rgba(255, 105, 180, 0.08);
+  --color-on-primary: black;
+  --color-on-primary-bg: #c32e80;
+
+  /* Success */
+  --color-success: #ffb3d9;
+  --color-success-dark: #ff8fcc;
+  --color-success-bg: rgba(255, 179, 217, 0.15);
+  --color-success-hover: rgba(255, 179, 217, 0.06);
+  --color-on-success: black;
+  --color-on-success-bg: #8f4c70;
+
+  /* Warning */
+  --color-warning: #fbbf24;
+  --color-warning-dark: #d59a00;
+  --color-warning-bg: rgba(251, 191, 36, 0.1);
+  --color-warning-hover: rgba(251, 191, 36, 0.06);
+  --color-on-warning: black;
+  --color-on-warning-bg: #8d5500;
+
+  /* Danger */
+  --color-danger: #9856b3;
+  --color-danger-dark: #8e44ad;
+  --color-danger-bg: #e8daef;
+  --color-danger-hover: rgba(155, 89, 182, 0.06);
+  --color-on-danger: white;
+  --color-on-danger-bg: #8644a0;
+
+  /* Neutral */
+  --color-neutral: #d4a5a5;
+  --color-neutral-dark: #af8282;
+  --color-neutral-bg: #ffd9e0;
+  --color-neutral-hover: rgba(212, 165, 165, 0.06);
+  --color-on-neutral: black;
+  --color-on-neutral-bg: #825858;
+
+  /* Text */
+  --color-text: #4a2a3a;
+  --color-text-secondary: #88576c;
+  --color-text-tertiary: #c48ca0;
+  --color-text-muted: #e5b3c8;
+
+  /* Borders */
+  --color-border: #ffc0cb;
+  --color-border-light: #ffd9e0;
+
+  /* Backgrounds */
+  --color-bg: #f4eaee;
+  --color-bg-card: #ffffff;
+  --color-bg-alt: #f0e2e7;
+  --color-bg-hover: #f0cbd2;
+  --color-bg-overlay: rgba(255, 105, 180, 0.2);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(255, 105, 180, 0.08);
+  --hdk-shadow-md: 0 2px 4px rgba(255, 105, 180, 0.12);
+  --hdk-shadow-lg: 0 8px 24px rgba(255, 105, 180, 0.15);
+  --hdk-shadow-focus: 0 0 0 3px rgba(255, 105, 180, 0.25);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(255, 105, 180, 0.25);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(255, 105, 180, 0.15);
+}
+
+/* ===== PINK DARK THEME ===== */
+[data-theme='pink-dark'] {
+  color-scheme: dark only;
+  /* Primary */
+  --color-primary: #f799be;
+  --color-primary-dark: #df83a8;
+  --color-primary-bg: rgba(247, 153, 190, 0.16);
+  --color-primary-hover: rgba(247, 153, 190, 0.12);
+  --color-on-primary: black;
+  --color-on-primary-bg: #f799be;
+
+  /* Success */
+  --color-success: #63e6be;
+  --color-success-dark: #48cfa8;
+  --color-success-bg: rgba(99, 230, 190, 0.15);
+  --color-success-hover: rgba(99, 230, 190, 0.1);
+  --color-on-success: black;
+  --color-on-success-bg: #63e6be;
+
+  /* Warning */
+  --color-warning: #fdbe45;
+  --color-warning-dark: #e5a725;
+  --color-warning-bg: rgba(253, 190, 69, 0.15);
+  --color-warning-hover: rgba(253, 190, 69, 0.1);
+  --color-on-warning: black;
+  --color-on-warning-bg: #fdbe45;
+
+  /* Danger */
+  --color-danger: #ae7ee2;
+  --color-danger-dark: #9869cb;
+  --color-danger-bg: rgba(174, 126, 226, 0.15);
+  --color-danger-hover: rgba(174, 126, 226, 0.1);
+  --color-on-danger: black;
+  --color-on-danger-bg: #b787ec;
+
+  /* Neutral */
+  --color-neutral: #a5929a;
+  --color-neutral-dark: #907d85;
+  --color-neutral-bg: #3b2b32;
+  --color-neutral-hover: rgba(165, 146, 154, 0.1);
+  --color-on-neutral: black;
+  --color-on-neutral-bg: #a8959d;
+
+  /* Text */
+  --color-text: #ffeef5;
+  --color-text-secondary: #ead4dd;
+  --color-text-tertiary: #d7b2c2;
+  --color-text-muted: #a88896;
+
+  /* Borders */
+  --color-border: #4a373f;
+  --color-border-light: #624b55;
+
+  /* Backgrounds */
+  --color-bg: #1d1217;
+  --color-bg-card: #2c1e24;
+  --color-bg-alt: #170d12;
+  --color-bg-hover: #36282e;
+  --color-bg-overlay: rgba(0, 0, 0, 0.72);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --hdk-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5);
+  --hdk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
+  --hdk-shadow-focus: 0 0 0 3px rgba(247, 153, 190, 0.4);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(247, 153, 190, 0.4);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(247, 153, 190, 0.3);
+}
+
+/* ===== NATURE LIGHT THEME ===== */
+[data-theme='nature-light'] {
+  color-scheme: light;
+  /* Primary */
+  --color-primary: #6bbe4e;
+  --color-primary-dark: #5aa942;
+  --color-primary-bg: #f4faf1;
+  --color-primary-hover: rgba(107, 190, 78, 0.08);
+  --color-on-primary: black;
+  --color-on-primary-bg: #2c7f00;
+
+  /* Success */
+  --color-success: #a7d88f;
+  --color-success-dark: #8dc473;
+  --color-success-bg: rgba(167, 216, 143, 0.15);
+  --color-success-hover: rgba(167, 216, 143, 0.06);
+  --color-on-success: black;
+  --color-on-success-bg: #426e29;
+
+  /* Warning */
+  --color-warning: #ca8a04;
+  --color-warning-dark: #a66800;
+  --color-warning-bg: rgba(202, 138, 4, 0.1);
+  --color-warning-hover: rgba(202, 138, 4, 0.06);
+  --color-on-warning: black;
+  --color-on-warning-bg: #8d5100;
+
+  /* Danger */
+  --color-danger: #c8643b;
+  --color-danger-dark: #bc5930;
+  --color-danger-bg: #f9e8e1;
+  --color-danger-hover: rgba(200, 100, 59, 0.06);
+  --color-on-danger: black;
+  --color-on-danger-bg: #ad4c21;
+
+  /* Neutral */
+  --color-neutral: #cfc6b0;
+  --color-neutral-dark: #aaa28c;
+  --color-neutral-bg: #ebe7dc;
+  --color-neutral-hover: rgba(207, 198, 176, 0.06);
+  --color-on-neutral: black;
+  --color-on-neutral-bg: #6d6551;
+
+  /* Text */
+  --color-text: #2c2c2c;
+  --color-text-secondary: #5a5a5a;
+  --color-text-tertiary: #8a8a8a;
+  --color-text-muted: #acacac;
+
+  /* Borders */
+  --color-border: #dad3bf;
+  --color-border-light: #e9e5da;
+
+  /* Backgrounds */
+  --color-bg: #efede4;
+  --color-bg-card: #ffffff;
+  --color-bg-alt: #ebe8de;
+  --color-bg-hover: #e1ddd2;
+  --color-bg-overlay: rgba(44, 44, 44, 0.5);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(107, 190, 78, 0.08);
+  --hdk-shadow-md: 0 2px 4px rgba(107, 190, 78, 0.12);
+  --hdk-shadow-lg: 0 8px 24px rgba(107, 190, 78, 0.2);
+  --hdk-shadow-focus: 0 0 0 3px rgba(107, 190, 78, 0.25);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(107, 190, 78, 0.25);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(107, 190, 78, 0.15);
+}
+
+/* ===== NATURE DARK THEME ===== */
+[data-theme='nature-dark'] {
+  color-scheme: dark only;
+  /* Primary */
+  --color-primary: #5ac041;
+  --color-primary-dark: #42a926;
+  --color-primary-bg: rgba(90, 192, 65, 0.16);
+  --color-primary-hover: rgba(90, 192, 65, 0.12);
+  --color-on-primary: black;
+  --color-on-primary-bg: #5ac041;
+
+  /* Success */
+  --color-success: #52db9c;
+  --color-success-dark: #34c487;
+  --color-success-bg: rgba(82, 219, 156, 0.15);
+  --color-success-hover: rgba(82, 219, 156, 0.1);
+  --color-on-success: black;
+  --color-on-success-bg: #52db9c;
+
+  /* Warning */
+  --color-warning: #f7c243;
+  --color-warning-dark: #e0ab22;
+  --color-warning-bg: rgba(247, 194, 67, 0.15);
+  --color-warning-hover: rgba(247, 194, 67, 0.1);
+  --color-on-warning: black;
+  --color-on-warning-bg: #f7c243;
+
+  /* Danger */
+  --color-danger: #bc4f2b;
+  --color-danger-dark: #a63b14;
+  --color-danger-bg: rgba(190, 81, 45, 0.15);
+  --color-danger-hover: rgba(190, 81, 45, 0.1);
+  --color-on-danger: white;
+  --color-on-danger-bg: #ec7b56;
+
+  /* Neutral */
+  --color-neutral: #8f8476;
+  --color-neutral-dark: #807568;
+  --color-neutral-bg: #3b3229;
+  --color-neutral-hover: rgba(143, 132, 118, 0.1);
+  --color-on-neutral: black;
+  --color-on-neutral-bg: #a89c8e;
+
+  /* Text */
+  --color-text: #f8f4e1;
+  --color-text-secondary: #e2dbc1;
+  --color-text-tertiary: #cabe92;
+  --color-text-muted: #9d926c;
+
+  /* Borders */
+  --color-border: #604734;
+  --color-border-light: #795c45;
+
+  /* Backgrounds */
+  --color-bg: #1e1811;
+  --color-bg-card: #2c251d;
+  --color-bg-alt: #18130c;
+  --color-bg-hover: #372f26;
+  --color-bg-overlay: rgba(0, 0, 0, 0.72);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --hdk-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.6);
+  --hdk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);
+  --hdk-shadow-focus: 0 0 0 3px rgba(90, 192, 65, 0.35);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(90, 192, 65, 0.35);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(90, 192, 65, 0.25);
+}
+
+/* Izakaya Theme - Winner of Kitsune Theme Contest */
+/* See THEME_GRAVEYARD.md for the eliminated Kitsune Springs A/B/C themes */
+
+[data-theme='izakaya-light'] {
+  color-scheme: light;
+  /* Primary */
+  --color-primary: #41baae;
+  --color-primary-dark: #369c92;
+  --color-primary-bg: rgba(65, 186, 174, 0.05);
+  --color-primary-hover: rgba(65, 186, 174, 0.08);
+  --color-on-primary: black;
+  --color-on-primary-bg: #00534a;
+
+  /* Success */
+  --color-success: #a6d8ad;
+  --color-success-dark: #8ccb94;
+  --color-success-bg: rgba(166, 216, 173, 0.15);
+  --color-success-hover: rgba(166, 216, 173, 0.06);
+  --color-on-success: black;
+  --color-on-success-bg: #275530;
+
+  /* Warning */
+  --color-warning: #d4a574;
+  --color-warning-dark: #af8252;
+  --color-warning-bg: rgba(212, 165, 116, 0.15);
+  --color-warning-hover: rgba(212, 165, 116, 0.06);
+  --color-on-warning: black;
+  --color-on-warning-bg: #673e07;
+
+  /* Danger */
+  --color-danger: #c04731;
+  --color-danger-dark: #a23b29;
+  --color-danger-bg: #f97a6f;
+  --color-danger-hover: rgba(192, 71, 49, 0.06);
+  --color-on-danger: white;
+  --color-on-danger-bg: #720000;
+
+  /* Neutral */
+  --color-neutral: #a8999e;
+  --color-neutral-dark: #85777b;
+  --color-neutral-bg: #d8c8b0;
+  --color-neutral-hover: rgba(168, 153, 158, 0.06);
+  --color-on-neutral: black;
+  --color-on-neutral-bg: #5e5055;
+
+  /* Text */
+  --color-text: #2a2a2a;
+  --color-text-secondary: rgba(42, 42, 42, 0.8);
+  --color-text-tertiary: rgba(42, 42, 42, 0.6);
+  --color-text-muted: rgba(42, 42, 42, 0.4);
+
+  /* Borders */
+  --color-border: #bfa1a0;
+  --color-border-light: #ceaecb;
+
+  /* Backgrounds */
+  --color-bg: #f2e6cd;
+  --color-bg-card: #f1c8c8;
+  --color-bg-alt: #d8b888;
+  --color-bg-hover: #d1b1ce;
+  --color-bg-overlay: rgba(42, 42, 42, 0.45);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(65, 186, 174, 0.08);
+  --hdk-shadow-md: 0 2px 4px rgba(65, 186, 174, 0.12);
+  --hdk-shadow-lg: 0 8px 24px rgba(65, 186, 174, 0.2);
+  --hdk-shadow-focus: 0 0 0 3px rgba(65, 186, 174, 0.25);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(65, 186, 174, 0.25);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(65, 186, 174, 0.15);
+}
+
+/* See THEME_GRAVEYARD.md for the eliminated Kitsune Springs A/B/C dark themes */
+
+[data-theme='izakaya-dark'] {
+  color-scheme: dark only;
+  /* Primary */
+  --color-primary: #04c5b5;
+  --color-primary-dark: #00ac9e;
+  --color-primary-bg: rgba(4, 197, 181, 0.16);
+  --color-primary-hover: rgba(4, 197, 181, 0.12);
+  --color-on-primary: black;
+  --color-on-primary-bg: #04c5b5;
+
+  /* Success */
+  --color-success: #61d19a;
+  --color-success-dark: #48ba85;
+  --color-success-bg: rgba(97, 209, 154, 0.15);
+  --color-success-hover: rgba(97, 209, 154, 0.1);
+  --color-on-success: black;
+  --color-on-success-bg: #61d19a;
+
+  /* Warning */
+  --color-warning: #fdbe45;
+  --color-warning-dark: #e5a725;
+  --color-warning-bg: rgba(253, 190, 69, 0.15);
+  --color-warning-hover: rgba(253, 190, 69, 0.1);
+  --color-on-warning: black;
+  --color-on-warning-bg: #fdbe45;
+
+  /* Danger */
+  --color-danger: #c13e2e;
+  --color-danger-dark: #a92517;
+  --color-danger-bg: rgba(193, 62, 46, 0.15);
+  --color-danger-hover: rgba(193, 62, 46, 0.1);
+  --color-on-danger: white;
+  --color-on-danger-bg: #f66f5b;
+
+  /* Neutral */
+  --color-neutral: #7f7f87;
+  --color-neutral-dark: #76767e;
+  --color-neutral-bg: #2d343b;
+  --color-neutral-hover: rgba(127, 127, 135, 0.1);
+  --color-on-neutral: black;
+  --color-on-neutral-bg: #9d9da5;
+
+  /* Text */
+  --color-text: #f5f2f5;
+  --color-text-secondary: #ddd9dd;
+  --color-text-tertiary: #c1bcc1;
+  --color-text-muted: #959095;
+
+  /* Borders */
+  --color-border: #71574b;
+  --color-border-light: #8c6c5e;
+
+  /* Backgrounds */
+  --color-bg: #14191e;
+  --color-bg-card: #20262c;
+  --color-bg-alt: #0f1318;
+  --color-bg-hover: #2a3036;
+  --color-bg-overlay: rgba(0, 0, 0, 0.72);
+
+  --hdk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --hdk-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.55);
+  --hdk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
+  --hdk-shadow-focus: 0 0 0 3px rgba(4, 197, 181, 0.32);
+  --hdk-shadow-focus-sm: 0 0 0 2px rgba(4, 197, 181, 0.32);
+  --hdk-shadow-focus-alt: 0 0 0 2px rgba(4, 197, 181, 0.18);
+}