--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/design_system/src/styles/tokens.css	Tue Aug 04 09:14:57 2026 -0700
@@ -0,0 +1,84 @@
+:root {
+  color-scheme: light;
+
+  --zen-color-canvas: #f7f3e8;
+  --zen-color-surface: #fffdf6;
+  --zen-color-surface-raised: #ffffff;
+  --zen-color-text: #171a21;
+  --zen-color-text-muted: #5f6470;
+  --zen-color-border: #272b35;
+  --zen-color-accent: #ffb000;
+  --zen-color-accent-hover: #ffca4a;
+  --zen-color-info: #2764d7;
+  --zen-color-success: #18794e;
+  --zen-color-warning: #9a5b00;
+  --zen-color-danger: #c62f3e;
+  --zen-color-on-danger: #ffffff;
+  --zen-color-focus: #7c3aed;
+
+  --zen-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --zen-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --zen-font-size-xs: 0.75rem;
+  --zen-font-size-sm: 0.875rem;
+  --zen-font-size-md: 1rem;
+  --zen-font-size-lg: 1.25rem;
+  --zen-font-size-xl: clamp(1.75rem, 4vw, 3rem);
+  --zen-line-height: 1.55;
+
+  --zen-space-1: 0.25rem;
+  --zen-space-2: 0.5rem;
+  --zen-space-3: 0.75rem;
+  --zen-space-4: 1rem;
+  --zen-space-5: 1.5rem;
+  --zen-space-6: 2rem;
+  --zen-space-7: 3rem;
+
+  --zen-radius-sm: 0.35rem;
+  --zen-radius-md: 0.7rem;
+  --zen-radius-lg: 1rem;
+  --zen-border-width: 2px;
+  --zen-shadow-sm: 3px 3px 0 rgba(23, 26, 33, 0.16);
+  --zen-shadow-md: 7px 7px 0 rgba(23, 26, 33, 0.16);
+  --zen-motion-fast: 120ms;
+  --zen-content-width: 76rem;
+}
+
+:root[data-zen-theme="dark"] {
+  color-scheme: dark;
+  --zen-color-canvas: #101218;
+  --zen-color-surface: #181b23;
+  --zen-color-surface-raised: #222631;
+  --zen-color-text: #f5f1e8;
+  --zen-color-text-muted: #b9bdc7;
+  --zen-color-border: #f5f1e8;
+  --zen-color-accent: #ffc247;
+  --zen-color-accent-hover: #ffd77d;
+  --zen-color-info: #8ab4ff;
+  --zen-color-success: #65d6a3;
+  --zen-color-warning: #ffc66d;
+  --zen-color-danger: #ff8792;
+  --zen-color-on-danger: #171a21;
+  --zen-color-focus: #c4a5ff;
+  --zen-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.5);
+  --zen-shadow-md: 7px 7px 0 rgba(0, 0, 0, 0.5);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-zen-theme="light"]) {
+    color-scheme: dark;
+    --zen-color-canvas: #101218;
+    --zen-color-surface: #181b23;
+    --zen-color-surface-raised: #222631;
+    --zen-color-text: #f5f1e8;
+    --zen-color-text-muted: #b9bdc7;
+    --zen-color-border: #f5f1e8;
+    --zen-color-accent: #ffc247;
+    --zen-color-accent-hover: #ffd77d;
+    --zen-color-info: #8ab4ff;
+    --zen-color-success: #65d6a3;
+    --zen-color-warning: #ffc66d;
+    --zen-color-danger: #ff8792;
+    --zen-color-on-danger: #171a21;
+    --zen-color-focus: #c4a5ff;
+  }
+}