@zendir/ui 0.5.0 → 0.6.1

package/dist/tokens/tokens.css

@@ -1,155 +1,533 @@
-/**
- * @zendir/ui — CSS Design Tokens
- *
- * AUTO-GENERATED from src/tokens/index.ts. DO NOT EDIT BY HAND.
- * Regenerate with: npm run build:tokens
- *
- * Usage:
- *   @import '@zendir/ui/tokens/css';
- *   .my-component { background: var(--zendir-bg-surface); }
- */
-
-:root {
-  /* ============================================================
-   * STATUS COLORS (Astro UX Compliant)
-   * ============================================================ */
-  --zendir-status-critical: #ff3838;
-  --zendir-status-serious: #ffb302;
-  --zendir-status-caution: #fce83a;
-  --zendir-status-normal: #56f000;
-  --zendir-status-standby: #2dccff;
-  --zendir-status-off: #a4abb6;
-
-  /* Light-theme status fill colors */
-  --zendir-status-critical-light: #ff2a04;
-  --zendir-status-serious-light: #ffaf3d;
-  --zendir-status-caution-light: #fad800;
-  --zendir-status-normal-light: #00e200;
-  --zendir-status-standby-light: #64d9ff;
-  --zendir-status-off-light: #7b8089;
-
-  /* Light-theme status border colors */
-  --zendir-status-critical-border: #661102;
-  --zendir-status-serious-border: #664618;
-  --zendir-status-caution-border: #645600;
-  --zendir-status-normal-border: #005a00;
-  --zendir-status-standby-border: #285766;
-  --zendir-status-off-border: #3c3e42;
-
-  /* ============================================================
-   * ACCENT COLORS
-   * ============================================================ */
-  --zendir-accent-primary: #4dacff;
-  --zendir-accent-secondary: #3d8ddb;
-  --zendir-accent-tertiary: #2e6eb3;
-
-  /* ============================================================
-   * SPACING
-   * ============================================================ */
-  --zendir-spacing-xs: 4px;
-  --zendir-spacing-sm: 8px;
-  --zendir-spacing-md: 16px;
-  --zendir-spacing-lg: 24px;
-  --zendir-spacing-xl: 32px;
-  --zendir-spacing-xxl: 48px;
-
-  /* ============================================================
-   * BORDER RADIUS
-   * ============================================================ */
-  --zendir-radius-none: 0;
-  --zendir-radius-sm: 2px;
-  --zendir-radius-md: 4px;
-  --zendir-radius-lg: 8px;
-  --zendir-radius-xl: 12px;
-  --zendir-radius-full: 9999px;
-
-  /* ============================================================
-   * TYPOGRAPHY
-   * Public Sans leads body, Sora leads headings, Roboto is the
-   * AstroUXDS-compliant fallback. OS-native fonts complete the chain.
-   * @see https://www.astrouxds.com/foundations/typography/
-   * ============================================================ */
-  --zendir-font-primary: "Public Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  --zendir-font-heading: "Sora", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  --zendir-font-mono: "Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;
-
-  /* Font sizes (rem-based, AstroUXDS scale) */
-  --zendir-font-size-micro: 0.5625rem;
-  --zendir-font-size-xxs: 0.625rem;
-  --zendir-font-size-xs: 0.625rem;
-  --zendir-font-size-sm: 0.75rem;
-  --zendir-font-size-base: 0.875rem;
-  --zendir-font-size-md: 0.875rem;
-  --zendir-font-size-lg: 1rem;
-  --zendir-font-size-xl: 1.25rem;
-  --zendir-font-size-xxl: 1.5rem;
-  --zendir-font-size-xxxl: 2.125rem;
-  --zendir-font-size-display: 3.75rem;
-
-  /* Font weights — AstroUXDS supports only 300/400/500/700 */
-  --zendir-font-weight-light: 300;
-  --zendir-font-weight-normal: 400;
-  --zendir-font-weight-medium: 500;
-  --zendir-font-weight-bold: 700;
-
-  /* Line heights */
-  --zendir-line-height-tight: 1.25;
-  --zendir-line-height-normal: 1.5;
-  --zendir-line-height-relaxed: 1.75;
-
-  /* ============================================================
-   * SHADOWS
-   * ============================================================ */
-  --zendir-shadow-none: none;
-  --zendir-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --zendir-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
-  --zendir-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.3);
-  --zendir-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
-  --zendir-shadow-glow: 0 0 20px rgba(77, 172, 255, 0.4);
-
-  /* ============================================================
-   * ANIMATION
-   * ============================================================ */
-  --zendir-animation-fast: 150ms ease;
-  --zendir-animation-normal: 250ms ease;
-  --zendir-animation-slow: 400ms ease;
-}
-
-/* ============================================================
- * DARK THEME (default)
- * ============================================================ */
-:root,
-[data-theme="dark"] {
-  --zendir-bg-base: #101923;
-  --zendir-bg-surface: #1b2d3e;
-  --zendir-bg-elevated: #243647;
-  --zendir-bg-overlay: rgba(0, 0, 0, 0.7);
-
-  --zendir-text-primary: #ffffff;
-  --zendir-text-secondary: #9ea7ad;
-  --zendir-text-tertiary: #6b7175;
-  --zendir-text-muted: #52595f;
-
-  --zendir-border-default: #3c4b5a;
-  --zendir-border-muted: #2b3d4e;
-  --zendir-border-focus: #4dacff;
-}
-
-/* ============================================================
- * LIGHT THEME
- * ============================================================ */
-[data-theme="light"] {
-  --zendir-bg-base: #f5f6f9;
-  --zendir-bg-surface: #ffffff;
-  --zendir-bg-elevated: #ffffff;
-  --zendir-bg-overlay: rgba(0, 0, 0, 0.5);
-
-  --zendir-text-primary: #1b2d3e;
-  --zendir-text-secondary: #4c5a67;
-  --zendir-text-tertiary: #7a8891;
-  --zendir-text-muted: #a4adb5;
-
-  --zendir-border-default: #c4c8cc;
-  --zendir-border-muted: #e1e4e8;
-  --zendir-border-focus: #4dacff;
-}
+/**
+ * @zendir/ui — CSS Design Tokens
+ *
+ * SOURCE OF TRUTH — hand-maintained. Edit color/token values here.
+ * `npm run build:tokens` reads this file and regenerates the typed name
+ * constants in css-vars.ts (never the reverse). The scales here mirror the
+ * primitive palettes in src/tokens/palettes/*.ts (the TypeScript source for
+ * JS consumers and the ThemeProvider runtime); keep the two in sync by hand.
+ *
+ * Usage:
+ *   @import '@zendir/ui/tokens/css';
+ *   .my-component { background: var(--zendir-bg-surface); }
+ */
+
+:root {
+  /* ============================================================
+   * STATUS COLORS (Astro UX Compliant)
+   * ============================================================ */
+  --zendir-status-critical: #ff3838;
+  --zendir-status-serious: #ffb302;
+  --zendir-status-caution: #fce83a;
+  --zendir-status-normal: #56f000;
+  --zendir-status-standby: #2dccff;
+  --zendir-status-off: #a4abb6;
+
+  /* Light-theme status fill colors */
+  --zendir-status-critical-light: #ff2a04;
+  --zendir-status-serious-light: #ffaf3d;
+  --zendir-status-caution-light: #fad800;
+  --zendir-status-normal-light: #00e200;
+  --zendir-status-standby-light: #64d9ff;
+  --zendir-status-off-light: #7b8089;
+
+  /* Light-theme status border colors */
+  --zendir-status-critical-border: #661102;
+  --zendir-status-serious-border: #664618;
+  --zendir-status-caution-border: #645600;
+  --zendir-status-normal-border: #005a00;
+  --zendir-status-standby-border: #285766;
+  --zendir-status-off-border: #3c3e42;
+
+  /* ============================================================
+   * SPACING
+   * ============================================================ */
+  --zendir-spacing-xs: 4px;
+  --zendir-spacing-sm: 8px;
+  --zendir-spacing-md: 16px;
+  --zendir-spacing-lg: 24px;
+  --zendir-spacing-xl: 32px;
+  --zendir-spacing-xxl: 48px;
+
+  /* ============================================================
+   * BORDER RADIUS
+   * ============================================================ */
+  --zendir-radius-none: 0;
+  --zendir-radius-sm: 2px;
+  --zendir-radius-md: 4px;
+  --zendir-radius-lg: 8px;
+  --zendir-radius-xl: 16px;
+  --zendir-radius-full: 9999px;
+
+  /* ============================================================
+   * TYPOGRAPHY
+   * Public Sans leads body, Sora leads headings, Roboto is the
+   * AstroUXDS-compliant fallback. OS-native fonts complete the chain.
+   * @see https://www.astrouxds.com/foundations/typography/
+   * ============================================================ */
+  --zendir-font-primary:
+    "Public Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Helvetica Neue", Arial, sans-serif;
+  --zendir-font-heading:
+    "Sora", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Helvetica Neue", Arial, sans-serif;
+  --zendir-font-mono:
+    "Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;
+
+  /* Font sizes (rem-based, AstroUXDS scale) */
+  --zendir-font-size-micro: 0.5625rem;
+  --zendir-font-size-xxs: 0.625rem;
+  --zendir-font-size-xs: 0.75rem;
+  --zendir-font-size-sm: 0.875rem;
+  --zendir-font-size-base: 1rem;
+  --zendir-font-size-md: 1.125rem;
+  --zendir-font-size-lg: 1.25rem;
+  --zendir-font-size-xl: 1.5rem;
+  --zendir-font-size-xxl: 2.125rem;
+  --zendir-font-size-xxxl: 3rem;
+  --zendir-font-size-display: 3.75rem;
+
+  /* Font weights — AstroUXDS supports only 300/400/500/700 */
+  --zendir-font-weight-light: 300;
+  --zendir-font-weight-normal: 400;
+  --zendir-font-weight-medium: 500;
+  --zendir-font-weight-semibold: 500;
+  --zendir-font-weight-bold: 700;
+
+  /* Line heights */
+  --zendir-line-height-tight: 1.25;
+  --zendir-line-height-normal: 1.5;
+  --zendir-line-height-relaxed: 1.75;
+
+  /* ============================================================
+   * SHADOWS
+   * ============================================================ */
+  --zendir-shadow-none: none;
+  --zendir-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --zendir-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --zendir-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.3);
+  --zendir-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --zendir-shadow-glow: 0 0 20px rgba(77, 172, 255, 0.4);
+
+  /* ============================================================
+   * ANIMATION
+   * ============================================================ */
+  --zendir-animation-fast: 150ms ease;
+  --zendir-animation-normal: 250ms ease;
+  --zendir-animation-slow: 400ms ease;
+}
+
+/* ============================================================
+ * PRIMITIVE PALETTES (Layer 0 — src/tokens/palettes)
+ * Raw scales; prefer the semantic tokens above for UI surfaces.
+ * ============================================================ */
+:root {
+  /* Zendir Colour System */
+  --zendir-eb-50: #eef2ff;
+  --zendir-eb-100: #e0e7ff;
+  --zendir-eb-200: #c4d2ff;
+  --zendir-eb-300: #9eb4ff;
+  --zendir-eb-400: #6f89ff;
+  --zendir-eb-500: #5061ff;
+  --zendir-eb-600: #3e3cff;
+  --zendir-eb-700: #352edf;
+  --zendir-eb-800: #2a2bb2;
+  --zendir-eb-900: #252e8a;
+  --zendir-eb-950: #151c50;
+  --zendir-pb-50: #eef2ff;
+  --zendir-pb-100: #dee7fe;
+  --zendir-pb-200: #c3d4fe;
+  --zendir-pb-300: #9bb6ff;
+  --zendir-pb-400: #698eff;
+  --zendir-pb-500: #466afc;
+  --zendir-pb-600: #2f4af0;
+  --zendir-pb-700: #263dd3;
+  --zendir-pb-800: #1b2da0;
+  --zendir-pb-900: #192b7a;
+  --zendir-pb-950: #0d1945;
+  --zendir-uv-50: #f5f3fd;
+  --zendir-uv-100: #eae6fa;
+  --zendir-uv-200: #d8cff9;
+  --zendir-uv-300: #c6b4ff;
+  --zendir-uv-400: #9d70ff;
+  --zendir-uv-500: #8744f3;
+  --zendir-uv-600: #7515e2;
+  --zendir-uv-700: #6600cd;
+  --zendir-uv-800: #5400ab;
+  --zendir-uv-900: #421182;
+  --zendir-uv-950: #251048;
+  --zendir-neutral-50: #f6f7fd;
+  --zendir-neutral-100: #edf2fc;
+  --zendir-neutral-200: #dde5f4;
+  --zendir-neutral-300: #c8d1e6;
+  --zendir-neutral-400: #8899bc;
+  --zendir-neutral-500: #596b8e;
+  --zendir-neutral-600: #445272;
+  --zendir-neutral-700: #303c58;
+  --zendir-neutral-800: #1b243d;
+  --zendir-neutral-900: #0d1429;
+  --zendir-neutral-950: #030414;
+
+  /* Astro UXDS status ramps */
+  --zendir-astro-red-400: #ff5f60;
+  --zendir-astro-red-500: #ff3838;
+  --zendir-astro-red-600: #ff2a04;
+  --zendir-astro-red-700: #c8102e;
+  --zendir-astro-red-800: #8b1703;
+  --zendir-astro-red-900: #661102;
+  --zendir-astro-amber-400: #ffcc57;
+  --zendir-astro-amber-500: #ffb302;
+  --zendir-astro-amber-600: #ffaf3d;
+  --zendir-astro-amber-700: #ff8c00;
+  --zendir-astro-amber-800: #975f0e;
+  --zendir-astro-amber-900: #664618;
+  --zendir-astro-yellow-400: #fded61;
+  --zendir-astro-yellow-500: #fce83a;
+  --zendir-astro-yellow-600: #fad800;
+  --zendir-astro-yellow-700: #c7ab00;
+  --zendir-astro-yellow-800: #917d01;
+  --zendir-astro-yellow-900: #645600;
+  --zendir-astro-green-400: #99f666;
+  --zendir-astro-green-500: #56f000;
+  --zendir-astro-green-600: #00e200;
+  --zendir-astro-green-700: #00ad23;
+  --zendir-astro-green-800: #007a33;
+  --zendir-astro-green-900: #005a00;
+  --zendir-astro-cyan-400: #5ce2ff;
+  --zendir-astro-cyan-500: #64d9ff;
+  --zendir-astro-cyan-600: #2dccff;
+  --zendir-astro-cyan-700: #20a9d5;
+  --zendir-astro-cyan-800: #35798e;
+  --zendir-astro-cyan-900: #285766;
+
+  /* Tailwind CSS v4.2 */
+  --zendir-tw-red-50: #fef2f2;
+  --zendir-tw-red-100: #ffe2e2;
+  --zendir-tw-red-200: #ffcaca;
+  --zendir-tw-red-300: #ffa3a4;
+  --zendir-tw-red-400: #ff6568;
+  --zendir-tw-red-500: #fb2c36;
+  --zendir-tw-red-600: #e40016;
+  --zendir-tw-red-700: #bf000f;
+  --zendir-tw-red-800: #9f0712;
+  --zendir-tw-red-900: #82181a;
+  --zendir-tw-red-950: #460809;
+  --zendir-tw-orange-50: #fff7ed;
+  --zendir-tw-orange-100: #ffedd5;
+  --zendir-tw-orange-200: #ffd7a8;
+  --zendir-tw-orange-300: #ffb970;
+  --zendir-tw-orange-400: #ff8b1f;
+  --zendir-tw-orange-500: #fc7100;
+  --zendir-tw-orange-600: #ec5600;
+  --zendir-tw-orange-700: #c43e00;
+  --zendir-tw-orange-800: #9f2d00;
+  --zendir-tw-orange-900: #7e2a0c;
+  --zendir-tw-orange-950: #441306;
+  --zendir-tw-yellow-50: #fefce8;
+  --zendir-tw-yellow-100: #fef9c2;
+  --zendir-tw-yellow-200: #fff085;
+  --zendir-tw-yellow-300: #ffe030;
+  --zendir-tw-yellow-400: #f7c900;
+  --zendir-tw-yellow-500: #eab300;
+  --zendir-tw-yellow-600: #ca8a00;
+  --zendir-tw-yellow-700: #a26200;
+  --zendir-tw-yellow-800: #874c00;
+  --zendir-tw-yellow-900: #733e0a;
+  --zendir-tw-yellow-950: #432004;
+  --zendir-tw-green-50: #f0fdf4;
+  --zendir-tw-green-100: #dcfce7;
+  --zendir-tw-green-200: #b9f8cf;
+  --zendir-tw-green-300: #7bf1a8;
+  --zendir-tw-green-400: #05df72;
+  --zendir-tw-green-500: #00c65a;
+  --zendir-tw-green-600: #00a447;
+  --zendir-tw-green-700: #00813a;
+  --zendir-tw-green-800: #016630;
+  --zendir-tw-green-900: #0d542b;
+  --zendir-tw-green-950: #032e15;
+  --zendir-tw-sky-50: #f0f9ff;
+  --zendir-tw-sky-100: #dff2fe;
+  --zendir-tw-sky-200: #b8e6fe;
+  --zendir-tw-sky-300: #78d4ff;
+  --zendir-tw-sky-400: #00bbfd;
+  --zendir-tw-sky-500: #00a5ea;
+  --zendir-tw-sky-600: #0084c7;
+  --zendir-tw-sky-700: #0069a2;
+  --zendir-tw-sky-800: #005986;
+  --zendir-tw-sky-900: #024a70;
+  --zendir-tw-sky-950: #052f4a;
+  --zendir-tw-blue-50: #eff6ff;
+  --zendir-tw-blue-100: #dbeafe;
+  --zendir-tw-blue-200: #bedbff;
+  --zendir-tw-blue-300: #91c5ff;
+  --zendir-tw-blue-400: #56a2ff;
+  --zendir-tw-blue-500: #3280ff;
+  --zendir-tw-blue-600: #155dfc;
+  --zendir-tw-blue-700: #1447e6;
+  --zendir-tw-blue-800: #193cb8;
+  --zendir-tw-blue-900: #1c398e;
+  --zendir-tw-blue-950: #162456;
+  --zendir-tw-indigo-50: #eef2ff;
+  --zendir-tw-indigo-100: #e0e7ff;
+  --zendir-tw-indigo-200: #c7d2ff;
+  --zendir-tw-indigo-300: #a4b4ff;
+  --zendir-tw-indigo-400: #7d87ff;
+  --zendir-tw-indigo-500: #6260ff;
+  --zendir-tw-indigo-600: #4f39f6;
+  --zendir-tw-indigo-700: #432dd7;
+  --zendir-tw-indigo-800: #372aac;
+  --zendir-tw-indigo-900: #312c85;
+  --zendir-tw-indigo-950: #1e1a4d;
+  --zendir-tw-purple-50: #faf5ff;
+  --zendir-tw-purple-100: #f3e8ff;
+  --zendir-tw-purple-200: #e9d5ff;
+  --zendir-tw-purple-300: #d8b4ff;
+  --zendir-tw-purple-400: #bf7eff;
+  --zendir-tw-purple-500: #ab4eff;
+  --zendir-tw-purple-600: #9810fa;
+  --zendir-tw-purple-700: #8200d9;
+  --zendir-tw-purple-800: #6e11b0;
+  --zendir-tw-purple-900: #59168b;
+  --zendir-tw-purple-950: #3c0366;
+  --zendir-tw-pink-50: #fdf2f8;
+  --zendir-tw-pink-100: #fce7f3;
+  --zendir-tw-pink-200: #fccee8;
+  --zendir-tw-pink-300: #fda5d5;
+  --zendir-tw-pink-400: #fb64b6;
+  --zendir-tw-pink-500: #f6339a;
+  --zendir-tw-pink-600: #e30076;
+  --zendir-tw-pink-700: #c2005c;
+  --zendir-tw-pink-800: #a2004c;
+  --zendir-tw-pink-900: #861043;
+  --zendir-tw-pink-950: #510424;
+  --zendir-tw-rose-50: #fff1f2;
+  --zendir-tw-rose-100: #ffe4e6;
+  --zendir-tw-rose-200: #ffccd3;
+  --zendir-tw-rose-300: #ffa3ae;
+  --zendir-tw-rose-400: #ff6880;
+  --zendir-tw-rose-500: #ff2357;
+  --zendir-tw-rose-600: #e60045;
+  --zendir-tw-rose-700: #c1003a;
+  --zendir-tw-rose-800: #a30037;
+  --zendir-tw-rose-900: #8b0836;
+  --zendir-tw-rose-950: #4d0218;
+  --zendir-tw-slate-50: #f8fafc;
+  --zendir-tw-slate-100: #f1f5f9;
+  --zendir-tw-slate-200: #e2e8f0;
+  --zendir-tw-slate-300: #cad5e2;
+  --zendir-tw-slate-400: #90a1b9;
+  --zendir-tw-slate-500: #62748e;
+  --zendir-tw-slate-600: #45556c;
+  --zendir-tw-slate-700: #314158;
+  --zendir-tw-slate-800: #1d293d;
+  --zendir-tw-slate-900: #0f172b;
+  --zendir-tw-slate-950: #020618;
+  --zendir-tw-neutral-50: #fafafa;
+  --zendir-tw-neutral-100: #f5f5f5;
+  --zendir-tw-neutral-200: #e5e5e5;
+  --zendir-tw-neutral-300: #d4d4d4;
+  --zendir-tw-neutral-400: #a1a1a1;
+  --zendir-tw-neutral-500: #737373;
+  --zendir-tw-neutral-600: #525252;
+  --zendir-tw-neutral-700: #404040;
+  --zendir-tw-neutral-800: #262626;
+  --zendir-tw-neutral-900: #171717;
+  --zendir-tw-neutral-950: #0a0a0a;
+}
+
+/* ============================================================
+ * ZEN (HYBRID) THEME (default)
+ * ============================================================ */
+:root,
+[data-theme="hybrid"],
+[data-theme="dark"] {
+  --zendir-bg-base: #09090b;
+  --zendir-bg-surface: rgba(24, 24, 27, 0.98);
+  --zendir-bg-elevated: rgba(39, 39, 42, 0.98);
+  --zendir-bg-overlay: rgba(0, 0, 0, 0.85);
+
+  --zendir-text-primary: #ffffff;
+  --zendir-text-secondary: #a1a1aa;
+  --zendir-text-tertiary: #8e8e96;
+  --zendir-text-muted: #8e8e96;
+
+  --zendir-border-default: rgba(139, 92, 246, 0.3);
+  --zendir-border-muted: rgba(63, 63, 70, 0.5);
+  --zendir-border-focus: #8b5cf6;
+
+  --zendir-accent-primary: #8b5cf6;
+  --zendir-accent-secondary: #a78bfa;
+  --zendir-accent-tertiary: #7c3aed;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #8b5cf6;
+}
+
+/* ============================================================
+ * ASTRO THEME
+ * ============================================================ */
+[data-theme="astro"] {
+  --zendir-bg-base: #101923;
+  --zendir-bg-surface: #1b2d3e;
+  --zendir-bg-elevated: #243b53;
+  --zendir-bg-overlay: rgba(16, 25, 35, 0.95);
+
+  --zendir-text-primary: #ffffff;
+  --zendir-text-secondary: #b7c5d3;
+  --zendir-text-tertiary: #8fa4b7;
+  --zendir-text-muted: #8fa4b7;
+
+  --zendir-border-default: #2b659b;
+  --zendir-border-muted: #172635;
+  --zendir-border-focus: #4dacff;
+
+  --zendir-accent-primary: #4dacff;
+  --zendir-accent-secondary: #56f000;
+  --zendir-accent-tertiary: #a371f7;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #4dacff;
+}
+
+[data-theme="astro"][data-mode="light"],
+[data-theme="hybrid"][data-mode="light"],
+[data-theme="nebula"][data-mode="light"],
+[data-theme="purple-hue"][data-mode="light"],
+[data-theme="light"] {
+  --zendir-bg-base: #eaeef4;
+  --zendir-bg-surface: #f5f8fc;
+  --zendir-bg-elevated: #ffffff;
+  --zendir-bg-overlay: rgba(234, 238, 244, 0.95);
+
+  --zendir-text-primary: #1b2d3e;
+  --zendir-text-secondary: #51667c;
+  --zendir-text-tertiary: #556a7c;
+  --zendir-text-muted: #556a7c;
+
+  --zendir-border-default: #2b659b;
+  --zendir-border-muted: #d1d5db;
+  --zendir-border-focus: #0066cc;
+
+  --zendir-accent-primary: #0066cc;
+  --zendir-accent-secondary: #56f000;
+  --zendir-accent-tertiary: #7c3aed;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #4dacff;
+}
+
+/* ============================================================
+ * NEBULA THEME
+ * ============================================================ */
+[data-theme="nebula"] {
+  --zendir-bg-base: #070a18;
+  --zendir-bg-surface: #0d1429;
+  --zendir-bg-elevated: #121b36;
+  --zendir-bg-overlay: rgba(7, 10, 24, 0.9);
+
+  --zendir-text-primary: #f6f7fd;
+  --zendir-text-secondary: #c8d1e6;
+  --zendir-text-tertiary: #8899bc;
+  --zendir-text-muted: #596b8e;
+
+  --zendir-border-default: #1b243d;
+  --zendir-border-muted: #121b36;
+  --zendir-border-focus: #8744f3;
+
+  --zendir-accent-primary: #8744f3;
+  --zendir-accent-secondary: #9d70ff;
+  --zendir-accent-tertiary: #7515e2;
+
+  --zendir-semantic-success: #00c65a;
+  --zendir-semantic-warning: #eab300;
+  --zendir-semantic-error: #fb2c36;
+  --zendir-semantic-info: #5061ff;
+}
+
+/* ============================================================
+ * PURPLE HUE THEME
+ * ============================================================ */
+[data-theme="purple-hue"] {
+  --zendir-bg-base: #0a0a0f;
+  --zendir-bg-surface: rgba(18, 18, 28, 0.98);
+  --zendir-bg-elevated: rgba(28, 28, 42, 0.98);
+  --zendir-bg-overlay: rgba(0, 0, 0, 0.9);
+
+  --zendir-text-primary: #fafafa;
+  --zendir-text-secondary: #a1a1aa;
+  --zendir-text-tertiary: #8e8e96;
+  --zendir-text-muted: #8e8e96;
+
+  --zendir-border-default: rgba(139, 92, 246, 0.25);
+  --zendir-border-muted: rgba(55, 48, 82, 0.5);
+  --zendir-border-focus: #8b5cf6;
+
+  --zendir-accent-primary: #8b5cf6;
+  --zendir-accent-secondary: #a78bfa;
+  --zendir-accent-tertiary: #7c3aed;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #a78bfa;
+}
+
+/* ============================================================
+ * TRANSPARENT THEMES
+ * ============================================================ */
+[data-theme="transparent"],
+[data-theme="transparent-bold"] {
+  --zendir-bg-base: rgba(8, 12, 20, 0.95);
+  --zendir-bg-surface: rgba(15, 20, 35, 0.85);
+  --zendir-bg-elevated: rgba(25, 35, 55, 0.8);
+  --zendir-bg-overlay: rgba(0, 0, 0, 0.75);
+
+  --zendir-text-primary: #f0f4f8;
+  --zendir-text-secondary: #94a3b8;
+  --zendir-text-tertiary: #7b8da1;
+  --zendir-text-muted: #7b8da1;
+
+  --zendir-border-default: rgba(139, 92, 246, 0.25);
+  --zendir-border-muted: rgba(139, 92, 246, 0.15);
+  --zendir-border-focus: #8b5cf6;
+
+  --zendir-accent-primary: #8b5cf6;
+  --zendir-accent-secondary: #a78bfa;
+  --zendir-accent-tertiary: #7c3aed;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #8b5cf6;
+}
+
+[data-theme="transparent-minimal"] {
+  --zendir-bg-base: rgba(8, 12, 20, 0.95);
+  --zendir-bg-surface: rgba(15, 20, 35, 0.85);
+  --zendir-bg-elevated: rgba(25, 35, 55, 0.8);
+  --zendir-bg-overlay: rgba(0, 0, 0, 0.75);
+
+  --zendir-text-primary: #f0f4f8;
+  --zendir-text-secondary: #94a3b8;
+  --zendir-text-tertiary: #7b8da1;
+  --zendir-text-muted: #7b8da1;
+
+  --zendir-border-default: rgba(139, 92, 246, 0.25);
+  --zendir-border-muted: rgba(139, 92, 246, 0.15);
+  --zendir-border-focus: #8b5cf6;
+
+  --zendir-accent-primary: #8b5cf6;
+  --zendir-accent-secondary: #a78bfa;
+  --zendir-accent-tertiary: #7c3aed;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #8b5cf6;
+}