khal-os 1.260324.2

package/src/theme/animations.css

@@ -0,0 +1,68 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Animations — easing curves, duration tokens, keyframes
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Easing curves ── */
+
+:root {
+  --khal-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --khal-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --khal-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* ── Duration tokens ── */
+
+:root {
+  --khal-duration-fast: 150ms;
+  --khal-duration-normal: 250ms;
+  --khal-duration-slow: 400ms;
+}
+
+/* ── Orb drift keyframes (animated desktop background) ── */
+
+@keyframes khal-drift-1 {
+  0% { transform: translate(0, 0) scale(1); }
+  100% { transform: translate(10vw, 5vh) scale(1.1); }
+}
+
+@keyframes khal-drift-2 {
+  0% { transform: translate(0, 0) scale(1); }
+  100% { transform: translate(-8vw, -6vh) scale(1.05); }
+}
+
+@keyframes khal-drift-3 {
+  0% { transform: translate(0, 0) scale(1); }
+  100% { transform: translate(5vw, -8vh) scale(1.08); }
+}
+
+/* ── Notification slide-in ── */
+
+@keyframes notif-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ── Pulse animation (status dots) ── */
+
+@keyframes khal-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* ── Reduced motion ── */
+
+@media (prefers-reduced-motion: reduce) {
+  .khal-animated-bg .khal-orb {
+    animation: none !important;
+  }
+}
+
+[data-reduce-motion="true"] .khal-animated-bg .khal-orb {
+  animation: none !important;
+}

package/src/theme/base.css

@@ -0,0 +1,123 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Base — global element styles, scrollbar, focus ring, z-index overrides
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  touch-action: manipulation;
+  font-feature-settings: "rlig" 1, "calt" 0;
+  text-rendering: optimizeLegibility;
+  font-synthesis: none;
+  @supports (font-synthesis-weight: none) {
+    font-synthesis: initial;
+    font-synthesis-weight: none;
+  }
+}
+
+code {
+  font-family: var(--font-mono);
+}
+
+::selection {
+  background: var(--ds-gray-alpha-400);
+  color: var(--ds-white);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--ds-gray-alpha-300);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ds-gray-alpha-400);
+}
+
+/* Raise CommandMenu dialog/overlay above windows (z-[8000])
+   and the taskbar (z-[9000]) so it's always accessible. */
+[cmdk-overlay],
+[cmdk-dialog] {
+  z-index: 9999 !important;
+}
+
+/* Raise the Vaul drawer (mobile CommandMenu) above everything too. */
+[vaul-drawer-overlay],
+[vaul-drawer] {
+  z-index: 9999 !important;
+}
+
+/* ─── Animated Background ─── */
+
+.khal-animated-bg {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* ─── Global Focus Ring ─── */
+
+:focus-visible {
+  outline: 2px solid var(--khal-accent-primary);
+  outline-offset: 2px;
+}
+
+/* Remove focus ring for mouse users */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* ─── Command Menu Overrides ─── */
+
+[cmdk-item][data-selected="true"] {
+  background: var(--khal-accent-subtle) !important;
+}
+
+[cmdk-group-heading] {
+  color: var(--khal-text-muted) !important;
+}
+
+[cmdk-separator] {
+  background: var(--khal-border-default) !important;
+}
+
+/* Command menu dialog background */
+[cmdk-dialog] [cmdk-root] {
+  background: var(--khal-menu-bg);
+  border: 1px solid var(--khal-menu-border);
+}
+
+[cmdk-input] {
+  color: var(--khal-text-primary);
+  caret-color: var(--khal-accent-primary);
+}
+
+[cmdk-input]:focus,
+[cmdk-input]:focus-visible {
+  outline: none;
+}
+
+[cmdk-input]::placeholder {
+  color: var(--khal-text-muted);
+}

package/src/theme/controls.css

@@ -0,0 +1,35 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Controls — accent colors, interactive element tokens
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Light mode ── */
+
+:root {
+  /* Accent — Blue */
+  --khal-accent-primary: #2563eb;
+  --khal-accent-secondary: #3b82f6;
+  --khal-accent-hover: #1d4ed8;
+  --khal-accent-active: #1e40af;
+  --khal-accent-subtle: rgba(37, 99, 235, 0.08);
+  --khal-accent-subtle-hover: rgba(59, 130, 246, 0.14);
+
+  /* Interactive element tokens */
+  --khal-split-handle-accent: var(--khal-accent-primary);
+  --khal-desktop-icon-hover: var(--khal-accent-subtle);
+}
+
+/* ── Dark mode ── */
+
+.dark {
+  /* Accent — Blue */
+  --khal-accent-primary: #3b82f6;
+  --khal-accent-secondary: #60a5fa;
+  --khal-accent-hover: #60a5fa;
+  --khal-accent-active: #93c5fd;
+  --khal-accent-subtle: rgba(59, 130, 246, 0.12);
+  --khal-accent-subtle-hover: rgba(59, 130, 246, 0.2);
+
+  /* Interactive element tokens */
+  --khal-split-handle-accent: var(--khal-accent-primary);
+  --khal-desktop-icon-hover: var(--khal-accent-subtle);
+}

package/src/theme/design-tokens.css

@@ -0,0 +1,276 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Design Tokens — Geist color system (light + dark), shadows, focus, motion
+   These are the base color primitives used by the Tailwind @theme mapping.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+:root {
+  font-size: 16px;
+
+  /* Design system base tokens */
+  --ds-black: oklch(0 0 0);
+  --ds-white: oklch(1 0 0);
+
+  --ds-background-100: oklch(1 0 0);
+  --ds-background-200: oklch(0.984 0 0);
+
+  --ds-gray-100: oklch(0.961 0 0);
+  --ds-gray-200: oklch(0.94 0 0);
+  --ds-gray-300: oklch(0.925 0 0);
+  --ds-gray-400: oklch(0.937 0 0);
+  --ds-gray-500: oklch(0.836 0 0);
+  --ds-gray-600: oklch(0.732 0 0);
+  --ds-gray-700: oklch(0.65 0 0);
+  --ds-gray-800: oklch(0.59 0 0);
+  --ds-gray-900: oklch(0.51 0 0);
+  --ds-gray-1000: oklch(0.205 0 0);
+
+  --ds-gray-alpha-100: oklch(0 0 0 / 0.05);
+  --ds-gray-alpha-200: oklch(0 0 0 / 0.081);
+  --ds-gray-alpha-300: oklch(0 0 0 / 0.1);
+  --ds-gray-alpha-400: oklch(0 0 0 / 0.08);
+  --ds-gray-alpha-500: oklch(0 0 0 / 0.21);
+  --ds-gray-alpha-600: oklch(0 0 0 / 0.24);
+  --ds-gray-alpha-700: oklch(0 0 0 / 0.44);
+  --ds-gray-alpha-800: oklch(0 0 0 / 0.51);
+  --ds-gray-alpha-900: oklch(0 0 0 / 0.61);
+  --ds-gray-alpha-1000: oklch(0 0 0 / 0.91);
+
+  --ds-blue-100: oklch(97.32% 0.0141 251.56);
+  --ds-blue-200: oklch(96.29% 0.0195 250.59);
+  --ds-blue-300: oklch(94.58% 0.0293 249.85);
+  --ds-blue-400: oklch(91.58% 0.0473 245.12);
+  --ds-blue-500: oklch(82.75% 0.0979 248.48);
+  --ds-blue-600: oklch(73.08% 0.1583 248.13);
+  --ds-blue-700: oklch(57.61% 0.2508 258.23);
+  --ds-blue-800: oklch(51.51% 0.2399 257.85);
+  --ds-blue-900: oklch(53.18% 0.2399 256.99);
+  --ds-blue-1000: oklch(26.67% 0.1099 254.34);
+
+  --ds-red-100: oklch(96.5% 0.0223 13.09);
+  --ds-red-200: oklch(95.41% 0.0299 14.25);
+  --ds-red-300: oklch(94.33% 0.0369 15.01);
+  --ds-red-400: oklch(91.51% 0.0471 19.8);
+  --ds-red-500: oklch(84.47% 0.1018 17.71);
+  --ds-red-600: oklch(71.12% 0.1881 21.22);
+  --ds-red-700: oklch(62.56% 0.2524 23.03);
+  --ds-red-800: oklch(58.19% 0.2482 25.15);
+  --ds-red-900: oklch(54.99% 0.232 25.29);
+  --ds-red-1000: oklch(24.8% 0.1041 18.86);
+
+  --ds-amber-100: oklch(97.48% 0.0331 85.79);
+  --ds-amber-200: oklch(96.81% 0.0495 90.24);
+  --ds-amber-300: oklch(95.93% 0.0636 90.52);
+  --ds-amber-400: oklch(91.02% 0.1322 88.25);
+  --ds-amber-500: oklch(86.55% 0.1583 79.63);
+  --ds-amber-600: oklch(80.25% 0.1953 73.59);
+  --ds-amber-700: oklch(81.87% 0.1969 76.46);
+  --ds-amber-800: oklch(77.21% 0.1991 64.28);
+  --ds-amber-900: oklch(52.79% 0.1496 54.65);
+  --ds-amber-1000: oklch(30.83% 0.099 45.48);
+
+  --ds-green-100: oklch(97.59% 0.0289 145.42);
+  --ds-green-200: oklch(96.92% 0.037 147.15);
+  --ds-green-300: oklch(94.6% 0.0674 144.23);
+  --ds-green-400: oklch(91.49% 0.0976 146.24);
+  --ds-green-500: oklch(85.45% 0.1627 146.3);
+  --ds-green-600: oklch(80.25% 0.214 145.18);
+  --ds-green-700: oklch(64.58% 0.1746 147.27);
+  --ds-green-800: oklch(57.81% 0.1507 147.5);
+  --ds-green-900: oklch(51.75% 0.1453 147.65);
+  --ds-green-1000: oklch(29.15% 0.1197 147.38);
+
+  --ds-teal-100: oklch(97.72% 0.0359 186.7);
+  --ds-teal-200: oklch(97.06% 0.0347 180.66);
+  --ds-teal-300: oklch(94.92% 0.0478 182.07);
+  --ds-teal-400: oklch(92.76% 0.0718 183.78);
+  --ds-teal-500: oklch(86.88% 0.1344 182.42);
+  --ds-teal-600: oklch(81.5% 0.161 178.96);
+  --ds-teal-700: oklch(64.92% 0.1572 181.95);
+  --ds-teal-800: oklch(57.53% 0.1392 181.66);
+  --ds-teal-900: oklch(52.08% 0.1251 182.93);
+  --ds-teal-1000: oklch(32.11% 0.0788 179.82);
+
+  --ds-purple-100: oklch(96.65% 0.0244 312.19);
+  --ds-purple-200: oklch(96.73% 0.0228 309.8);
+  --ds-purple-300: oklch(94.85% 0.0364 310.15);
+  --ds-purple-400: oklch(91.77% 0.0614 312.82);
+  --ds-purple-500: oklch(81.26% 0.1409 310.8);
+  --ds-purple-600: oklch(72.07% 0.2083 308.19);
+  --ds-purple-700: oklch(55.5% 0.3008 306.12);
+  --ds-purple-800: oklch(48.58% 0.2638 305.73);
+  --ds-purple-900: oklch(47.18% 0.2579 304);
+  --ds-purple-1000: oklch(23.96% 0.13 305.66);
+
+  --ds-pink-100: oklch(95.69% 0.0359 344.62);
+  --ds-pink-200: oklch(95.71% 0.0321 353.14);
+  --ds-pink-300: oklch(93.83% 0.0451 356.29);
+  --ds-pink-400: oklch(91.12% 0.0573 358.82);
+  --ds-pink-500: oklch(84.28% 0.0915 356.99);
+  --ds-pink-600: oklch(74.33% 0.1547 0.24);
+  --ds-pink-700: oklch(63.52% 0.238 1.01);
+  --ds-pink-800: oklch(59.51% 0.2339 4.21);
+  --ds-pink-900: oklch(53.5% 0.2058 2.84);
+  --ds-pink-1000: oklch(26% 0.0977 359);
+
+  /* Shadows - Light */
+  --ds-shadow-background-border: 0 0 0 1px var(--ds-background-200);
+  --ds-shadow-border-base: 0 0 0 1px rgba(0, 0, 0, 0.08);
+  --ds-shadow-border-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  --ds-shadow-border: var(--ds-shadow-border-base), var(--ds-shadow-background-border);
+  --ds-shadow-2xs: 0px 1px 1px rgba(0, 0, 0, 0.04);
+  --ds-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.04);
+  --ds-shadow-small: 0px 2px 2px rgba(0, 0, 0, 0.04);
+  --ds-shadow-border-small: var(--ds-shadow-border-base), var(--ds-shadow-small), var(--ds-shadow-background-border);
+  --ds-shadow-medium: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 8px -8px rgba(0, 0, 0, 0.04);
+  --ds-shadow-border-medium: var(--ds-shadow-border-base), var(--ds-shadow-medium), var(--ds-shadow-background-border);
+  --ds-shadow-large: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 16px -4px rgba(0, 0, 0, 0.04);
+  --ds-shadow-border-large: var(--ds-shadow-border-base), var(--ds-shadow-large), var(--ds-shadow-background-border);
+  --ds-shadow-xl: 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06);
+  --ds-shadow-2xl: 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
+  --ds-shadow-tooltip: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px rgba(0, 0, 0, 0.04), var(--ds-shadow-background-border);
+  --ds-shadow-menu: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
+  --ds-shadow-modal: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
+  --ds-shadow-fullscreen: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
+
+  --ds-focus-color: var(--ds-blue-700);
+  --ds-focus-ring: 0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--ds-focus-color);
+
+  /* Motion */
+  --ds-motion-timing-swift: cubic-bezier(0.175, 0.885, 0.32, 1.1);
+
+  /* Overlay */
+  --ds-overlay-backdrop-color: var(--ds-background-200);
+  --ds-overlay-backdrop-opacity: 0.8;
+
+  /* Safe area insets */
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+}
+
+.dark {
+  --ds-background-100: oklch(0 0 0);
+  --ds-background-200: oklch(0.027 0 0);
+
+  --ds-gray-100: oklch(0.218 0 0);
+  --ds-gray-200: oklch(0.239 0 0);
+  --ds-gray-300: oklch(0.281 0 0);
+  --ds-gray-400: oklch(0.301 0 0);
+  --ds-gray-500: oklch(0.39 0 0);
+  --ds-gray-600: oklch(0.623 0 0);
+  --ds-gray-700: oklch(0.65 0 0);
+  --ds-gray-800: oklch(0.59 0 0);
+  --ds-gray-900: oklch(0.706 0 0);
+  --ds-gray-1000: oklch(0.946 0 0);
+
+  --ds-gray-alpha-100: oklch(1 0 0 / 0.07);
+  --ds-gray-alpha-200: oklch(1 0 0 / 0.09);
+  --ds-gray-alpha-300: oklch(1 0 0 / 0.13);
+  --ds-gray-alpha-400: oklch(1 0 0 / 0.14);
+  --ds-gray-alpha-500: oklch(1 0 0 / 0.24);
+  --ds-gray-alpha-600: oklch(1 0 0 / 0.51);
+  --ds-gray-alpha-700: oklch(1 0 0 / 0.54);
+  --ds-gray-alpha-800: oklch(1 0 0 / 0.47);
+  --ds-gray-alpha-900: oklch(1 0 0 / 0.61);
+  --ds-gray-alpha-1000: oklch(1 0 0 / 0.92);
+
+  --ds-blue-100: oklch(22.17% 0.069 259.89);
+  --ds-blue-200: oklch(25.45% 0.0811 255.8);
+  --ds-blue-300: oklch(30.86% 0.1022 255.21);
+  --ds-blue-400: oklch(34.1% 0.121 254.74);
+  --ds-blue-500: oklch(38.5% 0.1403 254.4);
+  --ds-blue-600: oklch(64.94% 0.1982 251.81);
+  --ds-blue-700: oklch(57.61% 0.2321 258.23);
+  --ds-blue-800: oklch(51.51% 0.2307 257.85);
+  --ds-blue-900: oklch(71.7% 0.1648 250.79);
+  --ds-blue-1000: oklch(96.75% 0.0179 242.42);
+
+  --ds-red-100: oklch(22.1% 0.0657 15.11);
+  --ds-red-200: oklch(25.93% 0.0834 19.02);
+  --ds-red-300: oklch(31.47% 0.1105 20.96);
+  --ds-red-400: oklch(35.27% 0.1273 21.23);
+  --ds-red-500: oklch(40.68% 0.1479 23.16);
+  --ds-red-600: oklch(62.56% 0.2277 23.03);
+  --ds-red-700: oklch(62.56% 0.2234 23.03);
+  --ds-red-800: oklch(58.01% 0.227 25.12);
+  --ds-red-900: oklch(69.96% 0.2136 22.03);
+  --ds-red-1000: oklch(95.6% 0.0293 6.61);
+
+  --ds-amber-100: oklch(22.46% 0.0538 76.04);
+  --ds-amber-200: oklch(24.95% 0.0642 64.78);
+  --ds-amber-300: oklch(32.34% 0.0837 63.83);
+  --ds-amber-400: oklch(35.53% 0.0903 66.3);
+  --ds-amber-500: oklch(41.55% 0.1044 67.98);
+  --ds-amber-600: oklch(75.04% 0.1737 74.49);
+  --ds-amber-700: oklch(81.87% 0.1969 76.46);
+  --ds-amber-800: oklch(77.21% 0.1991 64.28);
+  --ds-amber-900: oklch(77.21% 0.1991 64.28);
+  --ds-amber-1000: oklch(96.7% 0.0418 84.59);
+
+  --ds-green-100: oklch(23.09% 0.0716 149.68);
+  --ds-green-200: oklch(27.12% 0.0895 150.09);
+  --ds-green-300: oklch(29.84% 0.096 149.25);
+  --ds-green-400: oklch(34.39% 0.1039 147.78);
+  --ds-green-500: oklch(44.19% 0.1484 147.2);
+  --ds-green-600: oklch(58.11% 0.1815 146.55);
+  --ds-green-700: oklch(64.58% 0.199 147.27);
+  --ds-green-800: oklch(57.81% 0.1776 147.5);
+  --ds-green-900: oklch(73.1% 0.2158 148.29);
+  --ds-green-1000: oklch(96.76% 0.056 154.18);
+
+  --ds-teal-100: oklch(22.1% 0.0544 178.74);
+  --ds-teal-200: oklch(25.06% 0.062 178.76);
+  --ds-teal-300: oklch(31.5% 0.0767 180.99);
+  --ds-teal-400: oklch(32.43% 0.0763 180.13);
+  --ds-teal-500: oklch(43.35% 0.1055 180.97);
+  --ds-teal-600: oklch(60.71% 0.1485 180.24);
+  --ds-teal-700: oklch(64.92% 0.1403 181.95);
+  --ds-teal-800: oklch(57.53% 0.1392 181.66);
+  --ds-teal-900: oklch(74.56% 0.1765 182.8);
+  --ds-teal-1000: oklch(96.46% 0.056 180.29);
+
+  --ds-purple-100: oklch(22.34% 0.0779 316.87);
+  --ds-purple-200: oklch(25.91% 0.0921 314.41);
+  --ds-purple-300: oklch(31.98% 0.1219 312.41);
+  --ds-purple-400: oklch(35.93% 0.1504 309.78);
+  --ds-purple-500: oklch(40.99% 0.1721 307.92);
+  --ds-purple-600: oklch(55.5% 0.2191 306.12);
+  --ds-purple-700: oklch(55.5% 0.2186 306.12);
+  --ds-purple-800: oklch(48.58% 0.2102 305.73);
+  --ds-purple-900: oklch(69.87% 0.2037 309.51);
+  --ds-purple-1000: oklch(96.1% 0.0304 316.46);
+
+  --ds-pink-100: oklch(22.67% 0.0628 354.73);
+  --ds-pink-200: oklch(26.2% 0.0859 356.68);
+  --ds-pink-300: oklch(31.15% 0.1067 355.93);
+  --ds-pink-400: oklch(32.13% 0.1174 356.71);
+  --ds-pink-500: oklch(37.01% 0.1453 358.39);
+  --ds-pink-600: oklch(50.33% 0.2089 4.33);
+  --ds-pink-700: oklch(63.52% 0.2346 1.01);
+  --ds-pink-800: oklch(59.51% 0.2429 4.21);
+  --ds-pink-900: oklch(69.36% 0.2223 3.91);
+  --ds-pink-1000: oklch(95.74% 0.0326 350.08);
+
+  /* Shadows - Dark */
+  --ds-shadow-background-border: 0 0 0 1px var(--ds-background-200);
+  --ds-shadow-border-base: 0 0 0 1px rgba(255, 255, 255, 0.145);
+  --ds-shadow-border: var(--ds-shadow-border-base), var(--ds-shadow-background-border);
+  --ds-shadow-2xs: 0px 1px 1px rgba(0, 0, 0, 0.16);
+  --ds-shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.16);
+  --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.16);
+  --ds-shadow-border-small: var(--ds-shadow-border-base), var(--ds-shadow-small), var(--ds-shadow-background-border);
+  --ds-shadow-medium: 0px 2px 2px rgba(0, 0, 0, 0.32), 0px 8px 8px -8px rgba(0, 0, 0, 0.16);
+  --ds-shadow-border-medium: var(--ds-shadow-border-base), var(--ds-shadow-medium), var(--ds-shadow-background-border);
+  --ds-shadow-large: 0px 2px 2px rgba(0, 0, 0, 0.04), 0px 8px 16px -4px rgba(0, 0, 0, 0.04);
+  --ds-shadow-border-large: var(--ds-shadow-border-base), var(--ds-shadow-large), var(--ds-shadow-background-border);
+  --ds-shadow-xl: 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06);
+  --ds-shadow-2xl: 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
+  --ds-shadow-tooltip: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px rgba(0, 0, 0, 0.04), var(--ds-shadow-background-border);
+  --ds-shadow-menu: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
+  --ds-shadow-modal: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
+  --ds-shadow-fullscreen: var(--ds-shadow-border-base), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06), var(--ds-shadow-background-border);
+  --ds-shadow-border-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+
+  --ds-focus-color: var(--ds-blue-900);
+}

package/src/theme/index.css

@@ -0,0 +1,23 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Khal Theme — ONE perfect theme, dark + light modes
+   Replaces all concept-switching infrastructure with a single design language.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Foundation */
+@import "./design-tokens.css";
+@import "./tailwind-map.css";
+
+/* Theme tokens (khal design language) */
+@import "./surfaces.css";
+@import "./typography.css";
+@import "./controls.css";
+@import "./window.css";
+@import "./taskbar.css";
+@import "./status.css";
+@import "./terminal.css";
+@import "./animations.css";
+@import "./menus.css";
+
+/* Base styles + utilities */
+@import "./base.css";
+@import "./utilities.css";

package/src/theme/menus.css

@@ -0,0 +1,45 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Menus — command palette, dropdown, context menu, tooltip, notifications
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Light mode ── */
+
+:root {
+  /* Command palette / dropdown / context menu */
+  --khal-menu-bg: rgba(255, 255, 255, 0.88);
+  --khal-menu-border: rgba(226, 232, 240, 0.8);
+  --khal-menu-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
+  --khal-menu-hover: rgba(59, 130, 246, 0.06);
+
+  /* Notification positioning */
+  --khal-notification-bottom: 48px;
+  --khal-notification-right: 8px;
+  --khal-notification-left: auto;
+  --khal-notification-transform: none;
+
+  /* Dock glow (disabled — bottom bar only) */
+  --khal-dock-glow: none;
+  --khal-dock-item-glow: none;
+  --khal-dock-item-glow-border: transparent;
+}
+
+/* ── Dark mode ── */
+
+.dark {
+  /* Command palette / dropdown / context menu */
+  --khal-menu-bg: rgba(13, 13, 20, 0.92);
+  --khal-menu-border: rgba(30, 30, 48, 0.8);
+  --khal-menu-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 8px rgba(59, 130, 246, 0.04);
+  --khal-menu-hover: rgba(59, 130, 246, 0.1);
+
+  /* Notification positioning */
+  --khal-notification-bottom: 48px;
+  --khal-notification-right: 8px;
+  --khal-notification-left: auto;
+  --khal-notification-transform: none;
+
+  /* Dock glow (disabled — bottom bar only) */
+  --khal-dock-glow: none;
+  --khal-dock-item-glow: none;
+  --khal-dock-item-glow-border: transparent;
+}

package/src/theme/status.css

@@ -0,0 +1,41 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Status — pipeline stages, product identity, status indicators, event types
+   These are functional/semantic colors — same in both light and dark modes.
+   Values sourced from designer's mockup palette.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+:root {
+  /* ── Pipeline stage colors ── */
+  --khal-stage-triage: #f59e0b;
+  --khal-stage-plan: #8b5cf6;
+  --khal-stage-build: #3b82f6;
+  --khal-stage-review: #06b6d4;
+  --khal-stage-qa: #22c55e;
+  --khal-stage-ship: #22c55e;
+
+  /* Legacy stage names (backward compat) */
+  --khal-stage-backlog: #a78bfa;
+  --khal-stage-ready: #38bdf8;
+  --khal-stage-active: #3b82f6;
+  --khal-stage-done: #22c55e;
+
+  /* ── Product identity colors ── */
+  --khal-product-genie: #b4a0f4;
+  --khal-product-omni: #2dd4bf;
+  --khal-product-khal: #fb923c;
+  --khal-product-os: #60a5fa;
+
+  /* ── Status indicators ── */
+  --khal-status-live: #22c55e;
+  --khal-status-idle: #64748b;
+  --khal-status-warning: #f59e0b;
+  --khal-status-error: #ef4444;
+
+  /* ── Event type colors ── */
+  --khal-event-stage: #3b82f6;
+  --khal-event-tool: #22c55e;
+  --khal-event-agent: #8b5cf6;
+  --khal-event-api: #f59e0b;
+  --khal-event-hire: #06b6d4;
+  --khal-event-omni: #25d366;
+}