@deepfuture/dui-theme-default 0.0.2 → 0.0.5

package/components/tab.js

@@ -1,34 +1,35 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const tabStyles = css `
   [part="tab"] {
-    color: var(--muted-foreground);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-snug);
+    color: var(--text-2);
+    ${type("sm", { lineHeight: "var(--line-height-snug)" })}
     font-weight: var(--font-weight-medium);
     padding-inline: var(--space-2);
-    height: 2rem;
+    height: var(--component-height-md);
+    transition-property: color, box-shadow, background, filter, transform;
     transition-duration: var(--duration-fast);
   }
 
   [part="tab"][data-active] {
-    color: var(--foreground);
+    color: var(--text-1);
   }
 
   @media (hover: hover) {
     [part="tab"]:hover:not([data-disabled]) {
-      color: var(--foreground);
+      color: var(--text-1);
     }
   }
 
   [part="tab"]:focus-visible {
     box-shadow:
-      0 0 0 var(--space-0_5) var(--background),
-      0 0 0 var(--space-1) var(--ring);
+      0 0 0 var(--focus-ring-offset) var(--background),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
     border-radius: var(--radius-sm);
     z-index: 1;
   }
 
   [part="tab"][data-disabled] {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 `;

package/components/tabs-indicator.js

@@ -1,10 +1,10 @@
 import { css } from "lit";
 export const tabsIndicatorStyles = css `
   :host {
-    height: 1.5rem;
+    height: var(--space-6);
     border-radius: var(--radius-sm);
-    background: var(--input);
-    transition-duration: 200ms;
+    background: oklch(from var(--foreground) l c h / 0.08);
+    transition-duration: var(--duration-normal);
     transition-timing-function: var(--ease-in-out-3);
   }
 `;

package/components/tabs-panel.js

@@ -1,13 +1,14 @@
 import { css } from "lit";
 export const tabsPanelStyles = css `
   [part="panel"] {
+    transition-property: box-shadow;
     transition-duration: var(--duration-fast);
   }
 
   [part="panel"]:focus-visible {
     box-shadow:
-      0 0 0 var(--space-0_5) var(--background),
-      0 0 0 var(--space-1) var(--ring);
+      0 0 0 var(--focus-ring-offset) var(--background),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
     border-radius: var(--radius-md);
   }
 `;

package/components/textarea.js

@@ -9,10 +9,11 @@ export const textareaStyles = css `
     font-family: var(--font-sans);
     font-size: var(--font-size);
     line-height: var(--line-height-snug);
-    color: var(--foreground);
-    border: var(--border-width-thin) solid var(--input);
-    background: var(--input-bg);
+    color: var(--text-1);
+    border: var(--border-width-thin) solid var(--border);
+    background: var(--sunken);
     border-radius: var(--radius-md);
+    transition-property: border-color, box-shadow, background, filter, transform;
     transition-duration: var(--duration-fast);
   }
 
@@ -23,7 +24,7 @@ export const textareaStyles = css `
   /* Scrollbar */
   [part="textarea"] {
     scrollbar-width: thin;
-    scrollbar-color: color-mix(in srgb, var(--muted-foreground) 50%, transparent) transparent;
+    scrollbar-color: color-mix(in srgb, var(--text-2) 50%, transparent) transparent;
   }
 
   [part="textarea"]::-webkit-scrollbar {
@@ -35,28 +36,28 @@ export const textareaStyles = css `
   }
 
   [part="textarea"]::-webkit-scrollbar-thumb {
-    background: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
+    background: color-mix(in srgb, var(--text-2) 50%, transparent);
     border-radius: var(--radius-sm);
     border: 0.125rem solid transparent;
     background-clip: padding-box;
   }
 
   [part="textarea"]::-webkit-scrollbar-thumb:hover {
-    background: color-mix(in srgb, var(--muted-foreground) 70%, transparent);
+    background: color-mix(in srgb, var(--text-2) 70%, transparent);
   }
 
   [part="textarea"]::placeholder {
-    color: var(--muted-foreground);
+    color: var(--text-3);
   }
 
   [part="textarea"]:focus-visible {
     box-shadow:
-      0 0 0 var(--space-0_5) var(--background),
-      0 0 0 var(--space-1) var(--ring);
+      0 0 0 var(--focus-ring-offset) var(--background),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
   }
 
   [part="textarea"]:disabled {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 
   [part="textarea"][data-invalid] {

package/components/toggle-group.js

@@ -3,7 +3,6 @@ export const toggleGroupStyles = css `
   [part="root"] {
     gap: var(--space-1);
     border-radius: var(--radius-md);
-    background: var(--muted);
     padding: var(--space-0_5);
   }
 `;

package/components/toggle.js

@@ -1,34 +1,51 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const toggleStyles = css `
+  /* --_select / --_interact alpha overlay pattern */
+
   [part="root"] {
-    height: var(--space-9);
+    --_select: 0;
+    --_interact: 0;
+    --toggle-gap: var(--space-1_5);
+    --icon-size: var(--space-4);
+    --icon-color: currentColor;
+    height: var(--component-height-md);
     padding: 0 var(--space-2_5);
     border-radius: var(--radius-md);
-    font-size: var(--font-size-sm);
+    border: var(--border-width-thin) solid var(--border);
+    ${type("sm")}
     font-weight: var(--font-weight-medium);
-    color: var(--muted-foreground);
-    transition-property: background, color;
+    color: var(--text-2);
+    background: oklch(from var(--foreground) l c h / calc(var(--_select) + var(--_interact)));
+    transition-property: background, color, box-shadow;
     transition-duration: var(--duration-fast);
+    min-width: var(--component-height-md);
   }
 
   @media (hover: hover) {
     [part="root"]:hover:not(:disabled):not([data-pressed]) {
-      background: var(--muted);
-      color: var(--foreground);
+      --_interact: 0.05;
+      color: var(--text-1);
     }
   }
 
   [part="root"][data-pressed] {
-    background: var(--secondary);
-    color: var(--foreground);
+    --_select: 0.10;
+    color: var(--text-1);
+  }
+
+  [part="root"]:active:not(:disabled) {
+    --_interact: 0.10;
   }
 
   [part="root"]:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow:
+      0 0 0 var(--focus-ring-offset) var(--background),
+      0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
   }
 
   [part="root"]:disabled {
-    opacity: 0.5;
+    opacity: 0.4;
   }
 `;

package/components/tooltip-popup.js

@@ -1,2 +1,30 @@
 import { css } from "lit";
-export const tooltipPopupStyles = css ``;
+import { type } from "../typography.js";
+export const tooltipPopupStyles = css `
+  .Popup {
+    padding: var(--space-0_5) var(--space-1_5);
+    border-radius: var(--radius-sm);
+    background: color-mix(
+      in oklch,
+      var(--foreground) 90%,
+      oklch(0 0 0 / 0)
+    );
+    backdrop-filter: var(--filter-blur-sm);
+    color: var(--background);
+    font-family: var(--font-sans);
+    ${type("xs", { lineHeight: "var(--line-height-snug)" })}
+    box-shadow: var(--shadow-sm);
+    max-width: var(--space-80);
+    transition-duration: var(--duration-fastest);
+    transition-timing-function: var(--ease-out-3);
+  }
+
+  .Arrow .arrow-fill {
+    fill: color-mix(in oklch, var(--foreground) 90%, oklch(0 0 0 / 0));
+  }
+
+  .Arrow .arrow-stroke {
+    fill: none;
+    stroke: none;
+  }
+`;

package/components/trunc.js

@@ -1,9 +1,9 @@
 import { css } from "lit";
+import { type } from "../typography.js";
 export const truncStyles = css `
   [part="root"] {
     font-family: var(--font-sans);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-normal);
-    color: var(--foreground);
+    ${type("sm")}
+    color: var(--text-1);
   }
 `;

package/index.d.ts

@@ -80,3 +80,7 @@ export { toggleGroupStyles } from "./components/toggle-group.js";
 export { numberFieldStyles } from "./components/number-field.js";
 export { menubarStyles } from "./components/menubar.js";
 export { calendarStyles } from "./components/calendar.js";
+export { proseSheet } from "./prose.js";
+export { type, typeScale } from "./typography.js";
+export type { TypeSize } from "./typography.js";
+export type { ButtonVariant, ButtonAppearance, ButtonSize, BadgeVariant, BadgeAppearance, SpinnerVariant, SpinnerSize, TextareaVariant, SidebarVariant, SidebarMenuButtonSize, ToolbarSize, } from "./types.js";

package/index.js

@@ -78,10 +78,12 @@ import { toggleGroupStyles } from "./components/toggle-group.js";
 import { numberFieldStyles } from "./components/number-field.js";
 import { menubarStyles } from "./components/menubar.js";
 import { calendarStyles } from "./components/calendar.js";
+import { proseSheet } from "./prose.js";
 import { tokenSheet } from "./tokens.js";
 export const defaultTheme = {
     tokens: tokenSheet,
     base: themedBase,
+    prose: proseSheet,
     styles: new Map([
         ["dui-accordion", accordionStyles],
         ["dui-accordion-item", accordionItemStyles],
@@ -244,3 +246,7 @@ export { toggleGroupStyles } from "./components/toggle-group.js";
 export { numberFieldStyles } from "./components/number-field.js";
 export { menubarStyles } from "./components/menubar.js";
 export { calendarStyles } from "./components/calendar.js";
+// --- Prose ---
+export { proseSheet } from "./prose.js";
+// --- Typography helpers ---
+export { type, typeScale } from "./typography.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepfuture/dui-theme-default",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "DUI default theme — design tokens and aesthetic component styles",
   "type": "module",
   "license": "MIT",
@@ -66,14 +66,26 @@
       "import": "./components/tooltip-popup.js",
       "types": "./components/tooltip-popup.d.ts"
     },
+    "./types": {
+      "import": "./types.js",
+      "types": "./types.d.ts"
+    },
     "./tokens": {
       "import": "./tokens.js",
       "types": "./tokens.d.ts"
     },
+    "./prose": {
+      "import": "./prose.js",
+      "types": "./prose.d.ts"
+    },
     "./tokens-raw": {
       "import": "./tokens-raw.js",
       "types": "./tokens-raw.d.ts"
     },
+    "./typography": {
+      "import": "./typography.js",
+      "types": "./typography.d.ts"
+    },
     "./components/dialog": {
       "import": "./components/dialog.js",
       "types": "./components/dialog.d.ts"
@@ -346,7 +358,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@deepfuture/dui-core": "0.0.2",
+    "@deepfuture/dui-core": "0.0.5",
     "lit": "^3.3.2"
   },
   "sideEffects": false,

package/prose.d.ts

@@ -0,0 +1,2 @@
+declare const proseSheet: CSSStyleSheet;
+export { proseSheet };

package/prose.js

@@ -0,0 +1,4 @@
+import proseCSS from "./prose.css" with { type: "text" };
+const proseSheet = new CSSStyleSheet();
+proseSheet.replaceSync(proseCSS);
+export { proseSheet };

package/tokens-raw.js

@@ -1,2 +1,2 @@
-const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n  /* -----------------------------------------------------------\n   * Spacing (Tailwind base-4 system)\n   * ----------------------------------------------------------- */\n  --space-0: 0;\n  --space-px: 1px;\n  --space-0_5: 0.125rem; /* 2px */\n  --space-1: 0.25rem; /* 4px */\n  --space-1_5: 0.375rem; /* 6px */\n  --space-2: 0.5rem; /* 8px */\n  --space-2_5: 0.625rem; /* 10px */\n  --space-3: 0.75rem; /* 12px */\n  --space-3_5: 0.875rem; /* 14px */\n  --space-4: 1rem; /* 16px */\n  --space-4_5: 1.125rem; /* 18px */\n  --space-5: 1.25rem; /* 20px */\n  --space-6: 1.5rem; /* 24px */\n  --space-7: 1.75rem; /* 28px */\n  --space-8: 2rem; /* 32px */\n  --space-9: 2.25rem; /* 36px */\n  --space-10: 2.5rem; /* 40px */\n  --space-11: 2.75rem; /* 44px */\n  --space-12: 3rem; /* 48px */\n  --space-14: 3.5rem; /* 56px */\n  --space-16: 4rem; /* 64px */\n  --space-20: 5rem; /* 80px */\n  --space-24: 6rem; /* 96px */\n  --space-28: 7rem; /* 112px */\n  --space-32: 8rem; /* 128px */\n  --space-36: 9rem; /* 144px */\n  --space-40: 10rem; /* 160px */\n  --space-44: 11rem; /* 176px */\n  --space-48: 12rem; /* 192px */\n  --space-52: 13rem; /* 208px */\n  --space-56: 14rem; /* 224px */\n  --space-60: 15rem; /* 240px */\n  --space-64: 16rem; /* 256px */\n  --space-72: 18rem; /* 288px */\n  --space-80: 20rem; /* 320px */\n  --space-96: 24rem; /* 384px */\n\n  /* -----------------------------------------------------------\n   * Typography\n   * ----------------------------------------------------------- */\n  --font-sans:\n    'Inter', system-ui, -apple-system, sans-serif,\n    \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n  --font-mono:\n    'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n    Consolas, \"Liberation Mono\", monospace;\n\n  --font-size-2xs: 0.65rem;\n  --font-size-xs: 0.75rem;\n  --font-size-sm: 0.875rem;\n  --font-size-base: 0.9375rem;\n  --font-size-md: 1rem;\n  --font-size-lg: 1.125rem;\n  --font-size-xl: 1.25rem;\n  --font-size-2xl: 1.5rem;\n  --font-size-3xl: 1.875rem;\n  --font-size-4xl: 2.25rem;\n  --font-size-5xl: 3rem;\n  --font-size-6xl: 3.75rem;\n  --font-size-7xl: 4.5rem;\n\n  --letter-spacing-tightest: -0.02em;\n  --letter-spacing-tighter: -0.015em;\n  --letter-spacing-tight: -0.01em;\n  --letter-spacing-normal: 0em;\n  --letter-spacing-wide: 0.006em;\n  --letter-spacing-wider: 0.012em;\n\n  --font-size-fluid-sm: clamp(0.813rem, 0.75rem + 0.315vw, 0.875rem);\n  --font-size-fluid-md: clamp(0.875rem, 0.813rem + 0.315vw, 1rem);\n  --font-size-fluid-lg: clamp(1rem, 0.938rem + 0.315vw, 1.125rem);\n  --font-size-fluid-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\n  --font-size-fluid-2xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);\n  --font-size-fluid-3xl: clamp(1.5rem, 1.313rem + 0.938vw, 1.875rem);\n  --font-size-fluid-4xl: clamp(1.875rem, 1.625rem + 1.25vw, 2.25rem);\n  --font-size-fluid-5xl: clamp(2.25rem, 1.875rem + 1.875vw, 3rem);\n\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n\n  --line-height-none: 1;\n  --line-height-tight: 1.25;\n  --line-height-snug: 1.375;\n  --line-height-normal: 1.5;\n  --line-height-relaxed: 1.625;\n\n  /* -----------------------------------------------------------\n   * Borders\n   * ----------------------------------------------------------- */\n  --radius-none: 0;\n  --radius-xs: 0.125rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.5rem;\n  --radius-lg: 1rem;\n  --radius-xl: 1.5rem;\n  --radius-2xl: 2rem;\n  --radius-full: 9999px;\n\n  --border-width-hairline: 0.5px;\n  --border-width-thin: 1px;\n  --border-width-medium: 2px;\n  --border-width-thick: 4px;\n\n  /* -----------------------------------------------------------\n   * Elevation\n   * ----------------------------------------------------------- */\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --shadow-none: 0 0 0 0 transparent;\n\n  --z-base: 0;\n  --z-dropdown: 700;\n  --z-sticky: 800;\n  --z-overlay: 900;\n  --z-modal: 1000;\n  --z-popover: 1100;\n  --z-toast: 1200;\n  --z-tooltip: 1300;\n\n  /* -----------------------------------------------------------\n   * Motion\n   * ----------------------------------------------------------- */\n  --duration-instant: 50ms;\n  --duration-faster: 100ms;\n  --duration-fast: 150ms;\n  --duration-normal: 250ms;\n  --duration-slow: 400ms;\n  --duration-slower: 700ms;\n\n  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n  --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n  --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n  --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n  --ease-in-5: cubic-bezier(1, 0, 1, 1);\n  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n  --ease-out-5: cubic-bezier(0, 0, 0, 1);\n  --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n  --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n  --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n  --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n  --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n  --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n  --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n  --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n  --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n  --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n  --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n  --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n  --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n  --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n  --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n  --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n  --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n  --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n  --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n  --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n  --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n  --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n  --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n  /* -----------------------------------------------------------\n   * Filters (presets for filter / backdrop-filter tokens)\n   * ----------------------------------------------------------- */\n  --filter-none: none;\n  --filter-blur-sm: blur(4px);\n  --filter-blur-md: blur(8px);\n  --filter-blur-lg: blur(16px);\n  --filter-blur-xl: blur(24px);\n  --filter-brightness-dim: brightness(0.8);\n  --filter-brightness-bright: brightness(1.15);\n  --filter-saturate-muted: saturate(0.5);\n  --filter-saturate-vivid: saturate(1.5);\n  --filter-grayscale: grayscale(1);\n\n  /* -----------------------------------------------------------\n   * Clip Paths (shape presets)\n   * ----------------------------------------------------------- */\n  --clip-none: none;\n  --clip-circle: circle(50%);\n  --clip-squircle: inset(0 round 30%);\n  --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n  --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n  --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n  --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n  /* -----------------------------------------------------------\n   * Component Sizing\n   * ----------------------------------------------------------- */\n  --component-height-xxs: 1.25rem;\n  --component-height-xs: 1.5rem;\n  --component-height-sm: 1.75rem;\n  --component-height-md: 2rem;\n  --component-height-lg: 2.25rem;\n  --component-height-xl: 2.5rem;\n\n  /* -----------------------------------------------------------\n   * Focus Ring\n   * ----------------------------------------------------------- */\n  --focus-ring-color: var(--ring);\n  --focus-ring-width: 2px;\n  --focus-ring-style: solid;\n  --focus-ring-offset: 2px;\n  --focus-ring-duration: var(--duration-fast);\n  --focus-ring-easing: var(--ease-out-3);\n\n  /* -----------------------------------------------------------\n   * Colors: Brand (theme-independent)\n   * ----------------------------------------------------------- */\n  --brand: oklch(0.728 0.1304 73.28);\n  --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * LIGHT THEME (default)\n * ================================================================= */\n:root:not([data-theme=\"dark\"]) {\n  --background: oklch(0.97 0 0);\n  --foreground: oklch(0.145 0.005 286);\n  --muted: oklch(0.965 0.002 286);\n  --muted-foreground: oklch(0.556 0.016 286);\n  --card: oklch(0.99 0 0);\n  --card-foreground: oklch(0.145 0.005 286);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0.005 286);\n  --primary: oklch(0.205 0.042 265);\n  --primary-foreground: oklch(0.985 0.002 248);\n  --secondary: oklch(0.93 0.002 286);\n  --secondary-foreground: oklch(0.3 0.042 265);\n  --accent: oklch(0.93 0.04 62);\n  --accent-foreground: oklch(0.32 0.06 55);\n  --destructive: oklch(0.6 0.19 25);\n  --destructive-foreground: oklch(0.995 0.06 25);\n  --success: oklch(0.5 0.15 150);\n  --success-foreground: oklch(0.985 0 0);\n  --warning: oklch(0.72 0.15 75);\n  --warning-foreground: oklch(0.28 0.06 55);\n  --info: oklch(0.53 0.16 245);\n  --info-foreground: oklch(0.985 0 0);\n  --input: oklch(0.922 0.004 286);\n  --input-bg: oklch(0.97 0.002 286);\n  --border: oklch(0.922 0.004 286);\n  --ring: oklch(0.551 0.2 245);\n  --meter-track: oklch(0.965 0.002 286);\n  --meter-fill: oklch(0.205 0.042 265);\n  --scrim: oklch(0 0 0 / 0.5);\n  --chart-1: oklch(0.58 0.17 35);\n  --chart-2: oklch(0.55 0.13 185);\n  --chart-3: oklch(0.52 0.14 265);\n  --chart-4: oklch(0.62 0.15 85);\n  --chart-5: oklch(0.55 0.16 310);\n}\n\n/* =================================================================\n * DARK THEME\n * ================================================================= */\n:root[data-theme=\"dark\"] {\n  --background: oklch(0.26 0.019 243);\n  --foreground: oklch(0.9353 0.0173 243);\n  --muted: oklch(0.27 0.03 243);\n  --muted-foreground: oklch(0.9353 0.0173 243 / 0.4);\n  --card: oklch(0.29 0.028 243);\n  --card-foreground: oklch(0.985 0.002 243);\n  --popover: oklch(0.309 0.032 243);\n  --popover-foreground: oklch(0.985 0.002 243);\n  --primary: oklch(0.985 0.002 243);\n  --primary-foreground: oklch(0.205 0.042 243);\n  --secondary: oklch(0.826 0.041 243 / 0.2);\n  --secondary-foreground: oklch(0.9353 0.0173 243 / 1);\n  --accent: oklch(0.7001 0.1329 62.25);\n  --accent-foreground: oklch(1 0.1 62.25);\n  --destructive: oklch(0.63 0.2 25);\n  --destructive-foreground: oklch(0.99 0.1 25);\n  --success: oklch(0.65 0.17 145);\n  --success-foreground: oklch(1 0.1 145);\n  --warning: oklch(0.78 0.15 80);\n  --warning-foreground: oklch(1 0.05 80);\n  --info: oklch(0.64 0.16 245);\n  --info-foreground: oklch(1 0.1 245);\n  --input: oklch(0.826 0.041 202 / 0.2);\n  --input-bg: oklch(0.826 0.041 202 / 0.08);\n  --border: oklch(0.826 0.041 202 / 0.14);\n  --ring: oklch(0.55 0.16 245);\n  --meter-track: oklch(0.269 0.007 286);\n  --meter-fill: oklch(0.985 0.002 248);\n  --scrim: oklch(0.18 0.017 244 / 0.6);\n  --chart-1: oklch(0.58 0.17 264);\n  --chart-2: oklch(0.62 0.15 162);\n  --chart-3: oklch(0.7 0.16 80);\n  --chart-4: oklch(0.6 0.19 303);\n  --chart-5: oklch(0.62 0.18 16);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n  color: var(--foreground);\n  font-family: var(--font-sans);\n  line-height: var(--line-height-normal);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n";
+const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n  /* -----------------------------------------------------------\n   * Spacing (Tailwind base-4 system)\n   * ----------------------------------------------------------- */\n  --space-0: 0;\n  --space-px: 1px;\n  --space-0_5: 0.125rem; /* 2px */\n  --space-1: 0.25rem; /* 4px */\n  --space-1_5: 0.375rem; /* 6px */\n  --space-2: 0.5rem; /* 8px */\n  --space-2_5: 0.625rem; /* 10px */\n  --space-3: 0.75rem; /* 12px */\n  --space-3_5: 0.875rem; /* 14px */\n  --space-4: 1rem; /* 16px */\n  --space-4_5: 1.125rem; /* 18px */\n  --space-5: 1.25rem; /* 20px */\n  --space-6: 1.5rem; /* 24px */\n  --space-7: 1.75rem; /* 28px */\n  --space-8: 2rem; /* 32px */\n  --space-9: 2.25rem; /* 36px */\n  --space-10: 2.5rem; /* 40px */\n  --space-11: 2.75rem; /* 44px */\n  --space-12: 3rem; /* 48px */\n  --space-14: 3.5rem; /* 56px */\n  --space-16: 4rem; /* 64px */\n  --space-20: 5rem; /* 80px */\n  --space-24: 6rem; /* 96px */\n  --space-28: 7rem; /* 112px */\n  --space-32: 8rem; /* 128px */\n  --space-36: 9rem; /* 144px */\n  --space-40: 10rem; /* 160px */\n  --space-44: 11rem; /* 176px */\n  --space-48: 12rem; /* 192px */\n  --space-52: 13rem; /* 208px */\n  --space-56: 14rem; /* 224px */\n  --space-60: 15rem; /* 240px */\n  --space-64: 16rem; /* 256px */\n  --space-72: 18rem; /* 288px */\n  --space-80: 20rem; /* 320px */\n  --space-96: 24rem; /* 384px */\n\n  /* -----------------------------------------------------------\n   * Typography\n   * ----------------------------------------------------------- */\n  --font-sans:\n    'Inter', system-ui, -apple-system, sans-serif,\n    \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n  --font-mono:\n    'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n    Consolas, \"Liberation Mono\", monospace;\n\n  --font-size-2xs: 0.65rem;\n  --font-size-xs: 0.75rem;\n  --font-size-sm: 0.875rem;\n  --font-size-base: 0.9375rem;\n  --font-size-md: 1rem;\n  --font-size-lg: 1.125rem;\n  --font-size-xl: 1.25rem;\n  --font-size-2xl: 1.5rem;\n  --font-size-3xl: 1.875rem;\n  --font-size-4xl: 2.25rem;\n  --font-size-5xl: 3rem;\n  --font-size-6xl: 3.75rem;\n  --font-size-7xl: 4.5rem;\n\n  --letter-spacing-tightest: -0.02em;\n  --letter-spacing-tighter: -0.015em;\n  --letter-spacing-tight: -0.01em;\n  --letter-spacing-normal: 0em;\n  --letter-spacing-wide: 0.006em;\n  --letter-spacing-wider: 0.012em;\n\n  --font-size-fluid-sm: clamp(0.813rem, 0.75rem + 0.315vw, 0.875rem);\n  --font-size-fluid-md: clamp(0.875rem, 0.813rem + 0.315vw, 1rem);\n  --font-size-fluid-lg: clamp(1rem, 0.938rem + 0.315vw, 1.125rem);\n  --font-size-fluid-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\n  --font-size-fluid-2xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);\n  --font-size-fluid-3xl: clamp(1.5rem, 1.313rem + 0.938vw, 1.875rem);\n  --font-size-fluid-4xl: clamp(1.875rem, 1.625rem + 1.25vw, 2.25rem);\n  --font-size-fluid-5xl: clamp(2.25rem, 1.875rem + 1.875vw, 3rem);\n\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n\n  --line-height-none: 1;\n  --line-height-tight: 1.25;\n  --line-height-snug: 1.375;\n  --line-height-normal: 1.5;\n  --line-height-relaxed: 1.625;\n\n  /* -----------------------------------------------------------\n   * Borders\n   * ----------------------------------------------------------- */\n  --radius-none: 0;\n  --radius-xs: 0.125rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.5rem;\n  --radius-lg: 1rem;\n  --radius-xl: 1.5rem;\n  --radius-2xl: 2rem;\n  --radius-full: 9999px;\n\n  --border-width-hairline: 0.5px;\n  --border-width-thin: 1px;\n  --border-width-medium: 2px;\n  --border-width-thick: 4px;\n\n  /* -----------------------------------------------------------\n   * Elevation\n   * ----------------------------------------------------------- */\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --shadow-none: 0 0 0 0 transparent;\n\n  --z-base: 0;\n  --z-dropdown: 700;\n  --z-sticky: 800;\n  --z-overlay: 900;\n  --z-modal: 1000;\n  --z-popover: 1100;\n  --z-toast: 1200;\n  --z-tooltip: 1300;\n\n  /* -----------------------------------------------------------\n   * Motion\n   * ----------------------------------------------------------- */\n  --duration-instant: 50ms;\n  --duration-fastest: 75ms;\n  --duration-faster: 100ms;\n  --duration-fast: 150ms;\n  --duration-normal: 250ms;\n  --duration-slow: 400ms;\n  --duration-slower: 700ms;\n\n  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n  --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n  --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n  --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n  --ease-in-5: cubic-bezier(1, 0, 1, 1);\n  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n  --ease-out-5: cubic-bezier(0, 0, 0, 1);\n  --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n  --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n  --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n  --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n  --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n  --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n  --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n  --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n  --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n  --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n  --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n  --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n  --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n  --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n  --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n  --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n  --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n  --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n  --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n  --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n  --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n  --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n  --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n  /* -----------------------------------------------------------\n   * Filters (presets for filter / backdrop-filter tokens)\n   * ----------------------------------------------------------- */\n  --filter-none: none;\n  --filter-blur-sm: blur(4px);\n  --filter-blur-md: blur(8px);\n  --filter-blur-lg: blur(16px);\n  --filter-blur-xl: blur(24px);\n  --filter-brightness-dim: brightness(0.8);\n  --filter-brightness-bright: brightness(1.15);\n  --filter-saturate-muted: saturate(0.5);\n  --filter-saturate-vivid: saturate(1.5);\n  --filter-grayscale: grayscale(1);\n\n  /* -----------------------------------------------------------\n   * Clip Paths (shape presets)\n   * ----------------------------------------------------------- */\n  --clip-none: none;\n  --clip-circle: circle(50%);\n  --clip-squircle: inset(0 round 30%);\n  --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n  --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n  --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n  --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n  /* -----------------------------------------------------------\n   * Component Sizing\n   * ----------------------------------------------------------- */\n  --component-height-xxs: 1.25rem;\n  --component-height-xs: 1.5rem;\n  --component-height-sm: 1.75rem;\n  --component-height-md: 2rem;\n  --component-height-lg: 2.25rem;\n  --component-height-xl: 2.5rem;\n\n  /* -----------------------------------------------------------\n   * Focus Ring\n   * ----------------------------------------------------------- */\n  --focus-ring-color: var(--accent);\n  --focus-ring-width: 2px;\n  --focus-ring-offset: 2px;\n  --focus-ring-duration: var(--duration-fast);\n  --focus-ring-easing: var(--ease-out-3);\n\n  /* -----------------------------------------------------------\n   * Colors: Brand (theme-independent)\n   * ----------------------------------------------------------- */\n  --brand: oklch(0.728 0.1304 73.28);\n  --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n *  1. Operations on a base — colors are relationships, not fixed values.\n *  2. Fewer primitives, more derivation — 4 primitives, everything\n *     else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n  /* --- Layer 1: Primitives --- */\n  --background:  oklch(0.97 0 0);\n  --foreground:  oklch(0.15 0 0);\n  --accent:      oklch(0.55 0.25 260);\n  --destructive: oklch(0.55 0.22 25);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n  /* --- Layer 1: Primitives --- */\n  --background:  oklch(0.15 0.015 260);\n  --foreground:  oklch(0.93 0 0);\n  --accent:      oklch(0.75 0.18 260);\n  --destructive: oklch(0.70 0.18 25);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n  /* Surfaces — lightness offsets from background.\n     Positive = elevated (brighter). Negative = sunken (darker). */\n  --sunken:    oklch(from var(--background) calc(l - 0.03) c h);\n  --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n  --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n  --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n  /* Borders — foreground at reduced alpha.\n     Semi-transparent so they adapt to any surface. */\n  --border:        oklch(from var(--foreground) l c h / 0.15);\n  --border-strong:  oklch(from var(--foreground) l c h / 0.25);\n\n  /* Text tiers — foreground at reduced alpha.\n     Semi-transparent so they adapt to any surface. */\n  --text-1: oklch(from var(--foreground) l c h / 0.90);\n  --text-2: oklch(from var(--foreground) l c h / 0.63);\n  --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n  /* Accent surfaces — for badges, pills, tinted cards */\n  --accent-subtle:      oklch(from var(--accent) l c h / 0.10);\n  --accent-text:        color-mix(in oklch, var(--accent) 80%, var(--foreground));\n\n  /* Destructive surfaces */\n  --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n  --destructive-text:   color-mix(in oklch, var(--destructive) 80%, var(--foreground));\n\n  /* Utility — scrim overlay for modals/dialogs */\n  --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n  /* Meter / progress bar defaults */\n  --meter-track: var(--surface-1);\n  --meter-fill: var(--accent);\n\n  /* Chart palette (theme-independent) */\n  --chart-1: oklch(0.58 0.17 35);\n  --chart-2: oklch(0.55 0.13 185);\n  --chart-3: oklch(0.52 0.14 265);\n  --chart-4: oklch(0.62 0.15 85);\n  --chart-5: oklch(0.55 0.16 310);\n\n  /* -----------------------------------------------------------\n   * Prose (rich-text / markdown content)\n   * ----------------------------------------------------------- */\n  --prose-body: var(--text-1);\n  --prose-headings: var(--foreground);\n  --prose-lead: var(--text-2);\n  --prose-links: var(--accent);\n  --prose-links-hover: var(--accent-text);\n  --prose-bold: var(--foreground);\n  --prose-code: var(--foreground);\n  --prose-code-bg: var(--surface-1);\n  --prose-pre-bg: var(--surface-1);\n  --prose-pre-border: var(--border);\n  --prose-blockquote-border: var(--accent);\n  --prose-blockquote-text: var(--text-2);\n  --prose-hr: var(--border);\n  --prose-th-border: var(--border-strong);\n  --prose-td-border: var(--border);\n  --prose-caption: var(--text-3);\n  --prose-kbd-bg: var(--surface-2);\n  --prose-kbd-border: var(--border-strong);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n  color: var(--text-1);\n  font-family: var(--font-sans);\n  line-height: var(--line-height-normal);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n";
 export { tokensCSS };

package/tokens.css

@@ -145,6 +145,7 @@
    * Motion
    * ----------------------------------------------------------- */
   --duration-instant: 50ms;
+  --duration-fastest: 75ms;
   --duration-faster: 100ms;
   --duration-fast: 150ms;
   --duration-normal: 250ms;
@@ -232,9 +233,8 @@
   /* -----------------------------------------------------------
    * Focus Ring
    * ----------------------------------------------------------- */
-  --focus-ring-color: var(--ring);
+  --focus-ring-color: var(--accent);
   --focus-ring-width: 2px;
-  --focus-ring-style: solid;
   --focus-ring-offset: 2px;
   --focus-ring-duration: var(--duration-fast);
   --focus-ring-easing: var(--ease-out-3);
@@ -247,90 +247,113 @@
 }
 
 /* =================================================================
- * LIGHT THEME (default)
+ * COLOR SYSTEM
+ * =================================================================
+ * Built on two principles:
+ *  1. Operations on a base — colors are relationships, not fixed values.
+ *  2. Fewer primitives, more derivation — 4 primitives, everything
+ *     else computed via oklch(from ...) and color-mix().
+ *
+ * Layer 1: Primitives (only values a theme author picks)
+ * Layer 2: Derived tokens (computed from primitives, never per-theme)
+ * Layer 3: Interaction states (component-level, not tokens)
  * ================================================================= */
+
+/* -----------------------------------------------------------------
+ * LIGHT THEME (default)
+ * ----------------------------------------------------------------- */
 :root:not([data-theme="dark"]) {
-  --background: oklch(0.97 0 0);
-  --foreground: oklch(0.145 0.005 286);
-  --muted: oklch(0.965 0.002 286);
-  --muted-foreground: oklch(0.556 0.016 286);
-  --card: oklch(0.99 0 0);
-  --card-foreground: oklch(0.145 0.005 286);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0.005 286);
-  --primary: oklch(0.205 0.042 265);
-  --primary-foreground: oklch(0.985 0.002 248);
-  --secondary: oklch(0.93 0.002 286);
-  --secondary-foreground: oklch(0.3 0.042 265);
-  --accent: oklch(0.93 0.04 62);
-  --accent-foreground: oklch(0.32 0.06 55);
-  --destructive: oklch(0.6 0.19 25);
-  --destructive-foreground: oklch(0.995 0.06 25);
-  --success: oklch(0.5 0.15 150);
-  --success-foreground: oklch(0.985 0 0);
-  --warning: oklch(0.72 0.15 75);
-  --warning-foreground: oklch(0.28 0.06 55);
-  --info: oklch(0.53 0.16 245);
-  --info-foreground: oklch(0.985 0 0);
-  --input: oklch(0.922 0.004 286);
-  --input-bg: oklch(0.97 0.002 286);
-  --border: oklch(0.922 0.004 286);
-  --ring: oklch(0.551 0.2 245);
-  --meter-track: oklch(0.965 0.002 286);
-  --meter-fill: oklch(0.205 0.042 265);
-  --scrim: oklch(0 0 0 / 0.5);
+  /* --- Layer 1: Primitives --- */
+  --background:  oklch(0.97 0 0);
+  --foreground:  oklch(0.15 0 0);
+  --accent:      oklch(0.55 0.25 260);
+  --destructive: oklch(0.55 0.22 25);
+}
+
+/* -----------------------------------------------------------------
+ * DARK THEME
+ * ----------------------------------------------------------------- */
+:root[data-theme="dark"] {
+  /* --- Layer 1: Primitives --- */
+  --background:  oklch(0.15 0.015 260);
+  --foreground:  oklch(0.93 0 0);
+  --accent:      oklch(0.75 0.18 260);
+  --destructive: oklch(0.70 0.18 25);
+}
+
+/* -----------------------------------------------------------------
+ * Layer 2: Derived tokens (computed from primitives)
+ * Defined once — same rules for light and dark.
+ * ----------------------------------------------------------------- */
+:root {
+  /* Surfaces — lightness offsets from background.
+     Positive = elevated (brighter). Negative = sunken (darker). */
+  --sunken:    oklch(from var(--background) calc(l - 0.03) c h);
+  --surface-1: oklch(from var(--background) calc(l + 0.02) c h);
+  --surface-2: oklch(from var(--background) calc(l + 0.05) c h);
+  --surface-3: oklch(from var(--background) calc(l + 0.09) c h);
+
+  /* Borders — foreground at reduced alpha.
+     Semi-transparent so they adapt to any surface. */
+  --border:        oklch(from var(--foreground) l c h / 0.15);
+  --border-strong:  oklch(from var(--foreground) l c h / 0.25);
+
+  /* Text tiers — foreground at reduced alpha.
+     Semi-transparent so they adapt to any surface. */
+  --text-1: oklch(from var(--foreground) l c h / 0.90);
+  --text-2: oklch(from var(--foreground) l c h / 0.63);
+  --text-3: oklch(from var(--foreground) l c h / 0.45);
+
+  /* Accent surfaces — for badges, pills, tinted cards */
+  --accent-subtle:      oklch(from var(--accent) l c h / 0.10);
+  --accent-text:        color-mix(in oklch, var(--accent) 80%, var(--foreground));
+
+  /* Destructive surfaces */
+  --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);
+  --destructive-text:   color-mix(in oklch, var(--destructive) 80%, var(--foreground));
+
+  /* Utility — scrim overlay for modals/dialogs */
+  --scrim: oklch(from var(--foreground) l c h / 0.35);
+
+  /* Meter / progress bar defaults */
+  --meter-track: var(--surface-1);
+  --meter-fill: var(--accent);
+
+  /* Chart palette (theme-independent) */
   --chart-1: oklch(0.58 0.17 35);
   --chart-2: oklch(0.55 0.13 185);
   --chart-3: oklch(0.52 0.14 265);
   --chart-4: oklch(0.62 0.15 85);
   --chart-5: oklch(0.55 0.16 310);
-}
 
-/* =================================================================
- * DARK THEME
- * ================================================================= */
-:root[data-theme="dark"] {
-  --background: oklch(0.26 0.019 243);
-  --foreground: oklch(0.9353 0.0173 243);
-  --muted: oklch(0.27 0.03 243);
-  --muted-foreground: oklch(0.9353 0.0173 243 / 0.4);
-  --card: oklch(0.29 0.028 243);
-  --card-foreground: oklch(0.985 0.002 243);
-  --popover: oklch(0.309 0.032 243);
-  --popover-foreground: oklch(0.985 0.002 243);
-  --primary: oklch(0.985 0.002 243);
-  --primary-foreground: oklch(0.205 0.042 243);
-  --secondary: oklch(0.826 0.041 243 / 0.2);
-  --secondary-foreground: oklch(0.9353 0.0173 243 / 1);
-  --accent: oklch(0.7001 0.1329 62.25);
-  --accent-foreground: oklch(1 0.1 62.25);
-  --destructive: oklch(0.63 0.2 25);
-  --destructive-foreground: oklch(0.99 0.1 25);
-  --success: oklch(0.65 0.17 145);
-  --success-foreground: oklch(1 0.1 145);
-  --warning: oklch(0.78 0.15 80);
-  --warning-foreground: oklch(1 0.05 80);
-  --info: oklch(0.64 0.16 245);
-  --info-foreground: oklch(1 0.1 245);
-  --input: oklch(0.826 0.041 202 / 0.2);
-  --input-bg: oklch(0.826 0.041 202 / 0.08);
-  --border: oklch(0.826 0.041 202 / 0.14);
-  --ring: oklch(0.55 0.16 245);
-  --meter-track: oklch(0.269 0.007 286);
-  --meter-fill: oklch(0.985 0.002 248);
-  --scrim: oklch(0.18 0.017 244 / 0.6);
-  --chart-1: oklch(0.58 0.17 264);
-  --chart-2: oklch(0.62 0.15 162);
-  --chart-3: oklch(0.7 0.16 80);
-  --chart-4: oklch(0.6 0.19 303);
-  --chart-5: oklch(0.62 0.18 16);
+  /* -----------------------------------------------------------
+   * Prose (rich-text / markdown content)
+   * ----------------------------------------------------------- */
+  --prose-body: var(--text-1);
+  --prose-headings: var(--foreground);
+  --prose-lead: var(--text-2);
+  --prose-links: var(--accent);
+  --prose-links-hover: var(--accent-text);
+  --prose-bold: var(--foreground);
+  --prose-code: var(--foreground);
+  --prose-code-bg: var(--surface-1);
+  --prose-pre-bg: var(--surface-1);
+  --prose-pre-border: var(--border);
+  --prose-blockquote-border: var(--accent);
+  --prose-blockquote-text: var(--text-2);
+  --prose-hr: var(--border);
+  --prose-th-border: var(--border-strong);
+  --prose-td-border: var(--border);
+  --prose-caption: var(--text-3);
+  --prose-kbd-bg: var(--surface-2);
+  --prose-kbd-border: var(--border-strong);
 }
 
 /* =================================================================
  * Base document styles
  * ================================================================= */
 :root {
-  color: var(--foreground);
+  color: var(--text-1);
   font-family: var(--font-sans);
   line-height: var(--line-height-normal);
   -webkit-font-smoothing: antialiased;