@assure-one/design-system 1.31.0 → 1.33.0

package/dist/css/tokens.css

@@ -0,0 +1,630 @@
+/* GENERATED FILE — do not edit.
+ * The namespaced design tokens (target architecture §9) — the runtime contract.
+ * Source: tokens/src (DTCG, ADR-003). Generator: tokens/build/generate-ds-css.mjs.
+ * Change the token files and run `pnpm tokens:build`; `pnpm tokens:check` fails
+ * when this file is out of date. */
+
+@layer theme, base, ds, components, utilities;
+
+:root {
+  --ds-color-canvas: #ffffff;
+  --ds-color-canvas-sunken: #f1f3f8;
+  --ds-color-canvas-sunken-strong: #e7eaf1;
+  --ds-color-surface: #ffffff;
+  --ds-color-surface-sunken: #f7f8fc;
+  --ds-color-surface-sunken-strong: #ececf1;
+  --ds-color-content: #0a0a0a;
+  --ds-color-content-secondary: #38383b;
+  --ds-color-content-muted: #5f5f64;
+  --ds-color-content-subtle: #6b6b70;
+  --ds-color-content-faint: #9a9aa0;
+  --ds-color-border: #e4e7ef;
+  --ds-color-border-subtle: #eef0f5;
+  --ds-color-border-strong: #d3d8e3;
+  --ds-color-action-accent-bg: #6c42f8;
+  --ds-color-action-accent-bg-strong: #5127e8;
+  --ds-color-action-accent-subtle-bg: #efeaff;
+  --ds-color-action-accent-bg-hover: #5e35f2;
+  --ds-color-action-accent-bg-active: #5127e8;
+  --ds-color-action-accent-ring: rgba(108, 66, 248, 0.18);
+  --ds-color-action-suite-bg: #087f9c;
+  --ds-color-action-suite-bg-hover: #076f89;
+  --ds-color-action-suite-bg-active: #065f75;
+  --ds-color-action-suite-fg: #ffffff;
+  --ds-ref-brand-pro-bg: #f4f1ff;
+  --ds-ref-brand-pro-bg-hover: #eee9ff;
+  --ds-ref-brand-pro-bg-active: #e4ddff;
+  --ds-ref-brand-pro-fg: #6c42f8;
+  --ds-ref-brand-pro-fg-hover: #5e35f2;
+  --ds-ref-brand-pro-fg-active: #5127e8;
+  --ds-ref-brand-pro-fg-disabled: #b7a7f3;
+  --ds-ref-brand-pro-border: #7b5bd8;
+  --ds-ref-brand-pro-ring: rgba(108, 66, 248, 0.18);
+  --ds-color-action-brand-bg: var(--ds-ref-brand-pro-fg);
+  --ds-color-action-brand-bg-hover: var(--ds-ref-brand-pro-fg-hover);
+  --ds-color-action-brand-bg-active: var(--ds-ref-brand-pro-fg-active);
+  --ds-color-action-brand-bg-disabled: var(--ds-ref-brand-pro-fg-disabled);
+  --ds-color-action-brand-subtle-bg: var(--ds-ref-brand-pro-bg);
+  --ds-color-action-brand-subtle-bg-hover: var(--ds-ref-brand-pro-bg-hover);
+  --ds-color-action-brand-subtle-bg-active: var(--ds-ref-brand-pro-bg-active);
+  --ds-color-action-brand-border: var(--ds-ref-brand-pro-border);
+  --ds-color-action-brand-ring: var(--ds-ref-brand-pro-ring);
+  --ds-color-action-brand-fg: var(--ds-ref-brand-pro-on-fg);
+  --ds-ref-brand-pro-seed: #6c42f8;
+  --ds-ref-brand-audit-seed: #0d9488;
+  --ds-ref-brand-books-seed: #2da85a;
+  --ds-ref-brand-tax-seed: #0066ff;
+  --ds-ref-brand-audit-fg: #0f766e;
+  --ds-ref-brand-audit-fg-hover: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 88%, var(--ds-color-content));
+  --ds-ref-brand-audit-fg-active: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 74%, var(--ds-color-content));
+  --ds-ref-brand-audit-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 42%, #ffffff);
+  --ds-ref-brand-audit-bg: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 8%, #ffffff);
+  --ds-ref-brand-audit-bg-hover: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 13%, #ffffff);
+  --ds-ref-brand-audit-bg-active: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 20%, #ffffff);
+  --ds-ref-brand-audit-border: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 45%, #ffffff);
+  --ds-ref-brand-audit-ring: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 20%, transparent);
+  --ds-ref-brand-audit-on-fg: #ffffff;
+  --ds-ref-brand-books-fg: #0f7a4d;
+  --ds-ref-brand-books-fg-hover: color-mix(in srgb, var(--ds-ref-brand-books-fg) 88%, var(--ds-color-content));
+  --ds-ref-brand-books-fg-active: color-mix(in srgb, var(--ds-ref-brand-books-fg) 74%, var(--ds-color-content));
+  --ds-ref-brand-books-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-books-fg) 42%, #ffffff);
+  --ds-ref-brand-books-bg: color-mix(in srgb, var(--ds-ref-brand-books-fg) 8%, #ffffff);
+  --ds-ref-brand-books-bg-hover: color-mix(in srgb, var(--ds-ref-brand-books-fg) 13%, #ffffff);
+  --ds-ref-brand-books-bg-active: color-mix(in srgb, var(--ds-ref-brand-books-fg) 20%, #ffffff);
+  --ds-ref-brand-books-border: color-mix(in srgb, var(--ds-ref-brand-books-fg) 45%, #ffffff);
+  --ds-ref-brand-books-ring: color-mix(in srgb, var(--ds-ref-brand-books-fg) 20%, transparent);
+  --ds-ref-brand-books-on-fg: #ffffff;
+  --ds-ref-brand-tax-fg: #2258d8;
+  --ds-ref-brand-tax-fg-hover: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 88%, var(--ds-color-content));
+  --ds-ref-brand-tax-fg-active: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 74%, var(--ds-color-content));
+  --ds-ref-brand-tax-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 42%, #ffffff);
+  --ds-ref-brand-tax-bg: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 8%, #ffffff);
+  --ds-ref-brand-tax-bg-hover: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 13%, #ffffff);
+  --ds-ref-brand-tax-bg-active: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 20%, #ffffff);
+  --ds-ref-brand-tax-border: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 45%, #ffffff);
+  --ds-ref-brand-tax-ring: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 20%, transparent);
+  --ds-ref-brand-tax-on-fg: #ffffff;
+  --ds-gradient-brand: linear-gradient(135deg, var(--ds-ref-brand-pro-seed), var(--ds-color-action-accent-bg));
+  --ds-ref-gradient-brand-pro: linear-gradient(135deg, var(--ds-ref-brand-pro-fg), var(--ds-ref-brand-pro-fg-active));
+  --ds-ref-gradient-brand-audit: linear-gradient(135deg, var(--ds-ref-brand-audit-fg), var(--ds-ref-brand-audit-fg-hover));
+  --ds-ref-gradient-brand-books: linear-gradient(135deg, var(--ds-ref-brand-books-fg), var(--ds-ref-brand-books-fg-hover));
+  --ds-ref-gradient-brand-tax: linear-gradient(135deg, var(--ds-ref-brand-tax-fg), var(--ds-ref-brand-tax-fg-hover));
+  --ds-gradient-ai: linear-gradient(135deg, #9e32ff, #1bb6ff);
+  --ds-color-action-accent-fg: #ffffff;
+  --ds-ref-brand-pro-on-fg: #ffffff;
+  --ds-color-feedback-danger-solid-fg: #ffffff;
+  --ds-color-feedback-success-solid-fg: #ffffff;
+  --ds-selection-fg: var(--ds-color-action-accent-fg);
+  --ds-color-content-disabled: #a7a7ac;
+  --ds-color-state-disabled-bg: #f3f3f1;
+  --ds-color-state-hover: rgba(10, 10, 10, 0.03);
+  --ds-color-state-active: rgba(10, 10, 10, 0.05);
+  --ds-control-bg: transparent;
+  --ds-control-fg: var(--ds-color-content-secondary);
+  --ds-control-muted-fg: var(--ds-color-content-muted);
+  --ds-control-hover-bg: var(--ds-color-canvas-sunken);
+  --ds-control-hover-fg: var(--ds-color-content);
+  --ds-control-active-bg: var(--ds-color-canvas-sunken-strong);
+  --ds-control-border: var(--ds-color-border);
+  --ds-control-border-strong: var(--ds-color-border-strong);
+  --ds-control-border-hover: var(--ds-color-content-subtle);
+  --ds-control-neutral-bg: var(--ds-color-canvas-sunken);
+  --ds-control-danger-fg: var(--ds-color-feedback-danger-fg);
+  --ds-control-danger-hover-bg: var(--ds-color-feedback-danger-bg);
+  --ds-menu-bg: var(--ds-color-surface);
+  --ds-menu-fg: var(--ds-color-content);
+  --ds-menu-border: var(--ds-color-border);
+  --ds-menu-label-fg: var(--ds-color-content-muted);
+  --ds-menu-item-fg: var(--ds-color-content-secondary);
+  --ds-menu-item-hover-bg: var(--ds-color-canvas-sunken);
+  --ds-menu-item-hover-fg: var(--ds-color-content);
+  --ds-menu-item-danger-fg: var(--ds-color-feedback-danger-fg);
+  --ds-menu-item-danger-hover-bg: var(--ds-color-feedback-danger-bg);
+  --ds-menu-item-danger-hover-fg: var(--ds-color-feedback-danger-fg);
+  --ds-menu-shortcut-fg: var(--ds-color-content-subtle);
+  --ds-selection-floating-bg: var(--ds-color-content);
+  --ds-selection-floating-fg: var(--ds-color-canvas);
+  --ds-selection-floating-muted-fg: color-mix(in oklab, var(--ds-color-canvas) 72%, transparent);
+  --ds-selection-floating-hover-bg: color-mix(in oklab, var(--ds-color-canvas) 10%, transparent);
+  --ds-selection-floating-active-bg: color-mix(in oklab, var(--ds-color-canvas) 16%, transparent);
+  --ds-selection-floating-border: color-mix(in oklab, var(--ds-color-canvas) 20%, transparent);
+  --ds-color-feedback-success-fg: #1f7a3d;
+  --ds-color-feedback-success-fg-hover: #1b6d36;
+  --ds-color-feedback-success-fg-active: #155a2c;
+  --ds-color-feedback-success-bg: #eaf6ee;
+  --ds-color-feedback-success-border: #c5e5cf;
+  --ds-color-feedback-warning-fg: #8a4606;
+  --ds-color-feedback-warning-bg: #fff3e5;
+  --ds-color-feedback-warning-border: #f5d5a8;
+  --ds-color-feedback-danger-fg: #c43838;
+  --ds-color-feedback-danger-fg-hover: #b13232;
+  --ds-color-feedback-danger-fg-active: #9f2d2d;
+  --ds-color-feedback-danger-bg: #fbeaea;
+  --ds-color-feedback-danger-border: #ecc5c5;
+  --ds-color-priority-low: #3366d6;
+  --ds-color-priority-medium: #7642d6;
+  --ds-color-priority-high: #d9820a;
+  --ds-color-priority-urgent: var(--ds-color-feedback-danger-fg);
+  --ds-focus-ring-color: color-mix(in srgb, var(--ds-color-action-brand-bg) 24%, transparent);
+  --ds-focus-ring-border: var(--ds-ref-brand-pro-fg);
+  --ds-color-chart-1: #4f37c2;
+  --ds-color-chart-2: #6549e5;
+  --ds-color-chart-3: #8268f0;
+  --ds-color-chart-4: #a18cf0;
+  --ds-color-chart-line: #6549e5;
+  --ds-color-chart-area-from: rgba(101, 73, 229, 0.22);
+  --ds-color-chart-area-to: rgba(101, 73, 229, 0);
+  --ds-color-service-tax: var(--ds-ref-brand-tax-fg);
+  --ds-color-service-tax-bg: var(--ds-ref-brand-tax-bg);
+  --ds-color-service-audit: var(--ds-ref-brand-audit-fg);
+  --ds-color-service-audit-bg: var(--ds-ref-brand-audit-bg);
+  --ds-color-service-accounting: var(--ds-ref-brand-books-fg);
+  --ds-color-service-accounting-bg: var(--ds-ref-brand-books-bg);
+  --ds-shadow-focus-ring: 0 0 0 2px var(--ds-color-surface), 0 0 0 4px var(--ds-focus-ring-border);
+  --ds-shadow-quiet: 0 1px 2px rgba(16, 20, 36, 0.05);
+  --ds-shadow-card: 0 1px 2px rgba(16, 20, 36, 0.04), 0 4px 12px -4px rgba(16, 20, 36, 0.08);
+  --ds-shadow-pop: 0 0 0 1px rgba(16, 20, 36, 0.03), 0 2px 4px -1px rgba(16, 20, 36, 0.06), 0 12px 28px -6px rgba(16, 20, 36, 0.14);
+  --ds-ref-shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
+  --ds-ref-shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
+  --ds-ref-shadow-md: 0 4px 8px -2px rgba(10, 10, 10, 0.08), 0 2px 4px -2px rgba(10, 10, 10, 0.05);
+  --ds-ref-shadow-lg: 0 12px 24px -8px rgba(10, 10, 10, 0.12), 0 4px 8px -4px rgba(10, 10, 10, 0.06);
+  --ds-ref-shadow-xl: 0 20px 40px -12px rgba(10, 10, 10, 0.16), 0 8px 16px -8px rgba(10, 10, 10, 0.08);
+  --ds-ref-shadow-2xl: 0 32px 64px -16px rgba(10, 10, 10, 0.2), 0 12px 24px -12px rgba(10, 10, 10, 0.1);
+  --ds-font-display: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
+  --ds-font-body: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
+  --ds-font-mono: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
+  --ds-font-sans: var(--ds-font-body);
+  --ds-ref-font-weight-regular: 400;
+  --ds-ref-font-weight-medium: 500;
+  --ds-ref-font-weight-semibold: 600;
+  --ds-ref-font-weight-bold: 700;
+  --ds-radius-control: 7px;
+  --ds-radius-chip: 5px;
+  --ds-radius-surface: 12px;
+  --ds-radius-badge: 4px;
+  --ds-radius-full: 9999px;
+  --ds-ref-ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ds-ref-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --ds-ref-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
+  --ds-ref-ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
+  --ds-ref-duration-instant: 100ms;
+  --ds-ref-duration-fast: 150ms;
+  --ds-ref-duration-moderate: 200ms;
+  --ds-ref-duration-slow: 250ms;
+  --ds-ref-duration-slower: 400ms;
+  --ds-motion-duration-press: var(--ds-ref-duration-instant);
+  --ds-motion-duration-feedback: var(--ds-ref-duration-fast);
+  --ds-motion-duration-overlay: var(--ds-ref-duration-moderate);
+  --ds-motion-duration-spatial: var(--ds-ref-duration-slow);
+  --ds-motion-duration-deliberate: var(--ds-ref-duration-slower);
+  --ds-motion-ease-enter: var(--ds-ref-ease-enter);
+  --ds-motion-ease-exit: var(--ds-ref-ease-exit);
+  --ds-motion-ease-move: var(--ds-ref-ease-standard);
+  --ds-layout-shell-sidebar-width: 200px;
+  --ds-layout-shell-sidebar-rail-width: 56px;
+  --ds-layout-shell-header-height: 56px;
+  --ds-layout-content-padding: 32px;
+  --ds-animate-accordion-down: accordion-down 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ds-animate-accordion-up: accordion-up 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ds-animate-collapsible-down: collapsible-down 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ds-animate-collapsible-up: collapsible-up 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ds-z-base: 0;
+  --ds-z-sticky: 100;
+  --ds-z-overlay: 200;
+  --ds-z-modal: 300;
+  --ds-z-popover: 400;
+  --ds-z-toast: 500;
+  --ds-z-tooltip: 600;
+  --ds-compat-color-destructive-foreground: var(--ds-color-feedback-danger-solid-fg);
+  --ds-compat-color-success-foreground: var(--ds-color-feedback-success-solid-fg);
+  --ds-color-feedback-info-fg: var(--ds-color-action-accent-bg-strong);
+  --ds-compat-color-brand-soft: #f4f0fe;
+  --ds-compat-color-brand-soft-foreground: #4925c9;
+  --ds-color-border-focus: var(--ds-color-action-accent-bg);
+  --ds-color-scrim: rgba(10, 10, 10, 0.4);
+  --ds-compat-color-green-dark: #196832;
+  --ds-color-content-link: var(--ds-color-action-accent-bg);
+  --ds-compat-radius-md: 5px;
+  --ds-compat-radius-lg: 8px;
+  --ds-compat-radius-xl: 12px;
+  --ds-text-display: clamp(28px, 3.4vw, 38px);
+  --ds-text-display--line-height: 1.06;
+  --ds-text-display--letter-spacing: -0.028em;
+  --ds-text-display--font-weight: 500;
+  --ds-text-title-page: 26px;
+  --ds-text-title-page--line-height: 1.25;
+  --ds-text-title-page--letter-spacing: -0.025em;
+  --ds-text-title-page--font-weight: 500;
+  --ds-text-title-section: 16px;
+  --ds-text-title-section--line-height: 1.25;
+  --ds-text-title-section--letter-spacing: -0.022em;
+  --ds-text-title-section--font-weight: 500;
+  --ds-text-title-sub: 13px;
+  --ds-text-title-sub--line-height: 1.3;
+  --ds-text-title-sub--letter-spacing: -0.022em;
+  --ds-text-title-sub--font-weight: 500;
+  --ds-text-body: 14px;
+  --ds-text-body--line-height: 1.55;
+  --ds-text-body--letter-spacing: 0em;
+  --ds-text-body--font-weight: 400;
+  --ds-text-body-sm: 13px;
+  --ds-text-body-sm--line-height: 1.55;
+  --ds-text-body-sm--letter-spacing: 0em;
+  --ds-text-body-sm--font-weight: 400;
+  --ds-text-label: 13px;
+  --ds-text-label--line-height: 1;
+  --ds-text-label--letter-spacing: 0em;
+  --ds-text-label--font-weight: 500;
+  --ds-text-helper: 12px;
+  --ds-text-helper--line-height: 1.25;
+  --ds-text-helper--letter-spacing: 0em;
+  --ds-text-helper--font-weight: 400;
+  --ds-text-caption: 11px;
+  --ds-text-caption--line-height: 1.55;
+  --ds-text-caption--letter-spacing: 0em;
+  --ds-text-caption--font-weight: 400;
+  --ds-text-micro: 10px;
+  --ds-text-micro--line-height: 1.55;
+  --ds-text-micro--letter-spacing: 0em;
+  --ds-text-micro--font-weight: 500;
+  --ds-text-overline: 11px;
+  --ds-text-overline--line-height: 1.55;
+  --ds-text-overline--letter-spacing: 0.14em;
+  --ds-text-overline--font-weight: 400;
+  --ds-text-code: 11px;
+  --ds-text-code--line-height: 1.55;
+  --ds-text-code--letter-spacing: 0em;
+  --ds-text-code--font-weight: 400;
+  --ds-ref-space-0: 0px;
+  --ds-ref-space-0-5: 2px;
+  --ds-ref-space-1: 4px;
+  --ds-ref-space-1-5: 6px;
+  --ds-ref-space-2: 8px;
+  --ds-ref-space-2-5: 10px;
+  --ds-ref-space-3: 12px;
+  --ds-ref-space-4: 16px;
+  --ds-ref-space-5: 20px;
+  --ds-ref-space-6: 24px;
+  --ds-ref-space-8: 32px;
+  --ds-ref-space-10: 40px;
+  --ds-ref-space-12: 48px;
+  --ds-ref-space-16: 64px;
+  --ds-ref-space-20: 80px;
+  --ds-ref-space-24: 96px;
+  --ds-surface-padding-sm: var(--ds-ref-space-4);
+  --ds-surface-padding-md: var(--ds-ref-space-5);
+  --ds-surface-padding-lg: var(--ds-ref-space-6);
+  --ds-stack-gap-xs: var(--ds-ref-space-1);
+  --ds-stack-gap-sm: var(--ds-ref-space-1-5);
+  --ds-stack-gap-md: var(--ds-ref-space-2);
+  --ds-stack-gap-lg: var(--ds-ref-space-3);
+  --ds-stack-gap-xl: var(--ds-ref-space-4);
+  --ds-layout-section-gap: var(--ds-ref-space-4);
+  --ds-layout-page-gap: var(--ds-ref-space-6);
+  --ds-icon-size-xs: 12px;
+  --ds-icon-size-sm: 14px;
+  --ds-icon-size-md: 16px;
+  --ds-icon-size-lg: 20px;
+  --ds-ref-breakpoint-sm: 40rem;
+  --ds-ref-breakpoint-md: 48rem;
+  --ds-ref-breakpoint-lg: 64rem;
+  --ds-ref-breakpoint-xl: 80rem;
+  --ds-ref-breakpoint-2xl: 96rem;
+  --ds-ref-radius-xs: 4px;
+  --ds-ref-radius-sm: 5px;
+  --ds-ref-radius-md: 7px;
+  --ds-ref-radius-lg: 8px;
+  --ds-ref-radius-xl: 12px;
+  --ds-radius-surface-sm: var(--ds-ref-radius-lg);
+  --ds-elevation-flat: var(--ds-shadow-quiet);
+  --ds-elevation-raised: var(--ds-shadow-card);
+  --ds-elevation-floating: var(--ds-shadow-pop);
+  --ds-elevation-overlay: 0 2px 6px -2px rgba(16, 20, 36, 0.08), 0 28px 64px -16px rgba(16, 20, 36, 0.28);
+  --ds-motion-duration-overlay-exit: var(--ds-ref-duration-fast);
+  --ds-motion-presence-name: initial;
+  --ds-control-height-xs: 28px;
+  --ds-control-height-sm: 32px;
+  --ds-control-height-md: 36px;
+  --ds-control-height-lg: 40px;
+  --ds-control-height-xl: 48px;
+  --ds-control-padding-x-xs: 8px;
+  --ds-control-padding-x-sm: 12px;
+  --ds-control-padding-x-md: 12px;
+  --ds-control-padding-x-lg: 16px;
+  --ds-control-padding-x-xl: 24px;
+  --ds-control-gap-xs: 4px;
+  --ds-control-gap-sm: 6px;
+  --ds-control-gap-md: 8px;
+  --ds-control-gap-lg: 8px;
+  --ds-control-gap-xl: 8px;
+  --ds-control-font-size-xs: 12px;
+  --ds-control-font-size-sm: 13px;
+  --ds-control-font-size-md: 13px;
+  --ds-control-font-size-lg: 14px;
+  --ds-control-font-size-xl: 16px;
+  --ds-control-icon-xs: 14px;
+  --ds-control-icon-sm: 14px;
+  --ds-control-icon-md: 16px;
+  --ds-control-icon-lg: 16px;
+  --ds-control-icon-xl: 20px;
+  --ds-button-height-sm: 32px;
+  --ds-button-height-md: 40px;
+  --ds-button-height-lg: 48px;
+  --ds-button-height-icon-xs: 24px;
+  --ds-button-height-icon-sm: 28px;
+  --ds-button-height-icon: 40px;
+  --ds-input-height-sm: 32px;
+  --ds-input-height-md: 36px;
+  --ds-input-height-lg: 44px;
+  --ds-search-input-height-sm: 32px;
+  --ds-search-input-height-md: 36px;
+  --ds-search-input-height-lg: 44px;
+  --ds-textarea-min-height-sm: 64px;
+  --ds-textarea-min-height-md: 80px;
+  --ds-textarea-min-height-lg: 96px;
+  --ds-multi-filter-pill-height-sm: 32px;
+  --ds-multi-filter-pill-height-md: 36px;
+  --ds-multi-filter-pill-height-lg: 40px;
+  --ds-filter-chip-height-sm: 32px;
+  --ds-filter-chip-height-md: 36px;
+  --ds-filter-chip-height-lg: 40px;
+  --ds-select-height: 36px;
+  --ds-search-select-height: 36px;
+  --ds-date-picker-height: 36px;
+  --ds-date-range-picker-height: 36px;
+  --ds-phone-country-input-height: 36px;
+  --ds-pagination-height: 28px;
+  --ds-color-feedback-warning-solid-fg: #ffffff;
+  --ds-color-feedback-info-solid-fg: #ffffff;
+  --ds-shadow-focus-ring-field: 0 0 0 3px var(--ds-focus-ring-color);
+}
+
+[data-ds-scheme="dark"],
+.dark {
+  --ds-color-canvas: #0a0a0b;
+  --ds-color-canvas-sunken: #141416;
+  --ds-color-canvas-sunken-strong: #1e1e22;
+  --ds-color-surface: #16161a;
+  --ds-color-surface-sunken: #1a1a1f;
+  --ds-color-surface-sunken-strong: #22222a;
+  --ds-color-content: #f4f4f5;
+  --ds-color-content-secondary: #c4c4c8;
+  --ds-color-content-muted: #a7a7ac;
+  --ds-color-content-subtle: #9a9aa0;
+  --ds-color-content-faint: #83838a;
+  --ds-color-border: rgba(255, 255, 255, 0.08);
+  --ds-color-border-subtle: rgba(255, 255, 255, 0.05);
+  --ds-color-border-strong: rgba(255, 255, 255, 0.14);
+  --ds-color-action-accent-bg: #a78bff;
+  --ds-color-action-accent-bg-strong: #8b6cf5;
+  --ds-color-action-accent-subtle-bg: rgba(108, 66, 248, 0.16);
+  --ds-color-action-accent-bg-hover: #b9a2ff;
+  --ds-color-action-accent-bg-active: #8b6cf5;
+  --ds-color-action-suite-bg: #55d6ed;
+  --ds-color-action-suite-bg-hover: #71deef;
+  --ds-color-action-suite-bg-active: #3bc8e1;
+  --ds-color-action-suite-fg: #0a0a0b;
+  --ds-color-action-brand-bg: var(--ds-ref-brand-pro-fg);
+  --ds-compat-color-brand-soft: #2a1f47;
+  --ds-compat-color-brand-soft-foreground: #c8b6fe;
+  --ds-ref-brand-pro-bg: rgba(108, 66, 248, 0.15);
+  --ds-ref-brand-pro-bg-hover: rgba(108, 66, 248, 0.22);
+  --ds-ref-brand-pro-bg-active: rgba(108, 66, 248, 0.3);
+  --ds-ref-brand-pro-fg: #a78bff;
+  --ds-ref-brand-pro-fg-hover: #b9a2ff;
+  --ds-ref-brand-pro-fg-active: #c9b6ff;
+  --ds-ref-brand-pro-border: #7b5bd8;
+  --ds-ref-brand-pro-seed: #a78bff;
+  --ds-ref-brand-audit-seed: #2dd4bf;
+  --ds-ref-brand-books-seed: #5dc77e;
+  --ds-ref-brand-tax-seed: #4d8dff;
+  --ds-ref-brand-audit-fg: #2dd4bf;
+  --ds-ref-brand-audit-fg-hover: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 82%, #ffffff);
+  --ds-ref-brand-audit-fg-active: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 66%, #ffffff);
+  --ds-ref-brand-audit-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 45%, var(--ds-color-canvas));
+  --ds-ref-brand-audit-bg: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 15%, transparent);
+  --ds-ref-brand-audit-bg-hover: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 22%, transparent);
+  --ds-ref-brand-audit-bg-active: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 30%, transparent);
+  --ds-ref-brand-audit-border: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 40%, transparent);
+  --ds-ref-brand-audit-ring: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 35%, transparent);
+  --ds-ref-brand-audit-on-fg: #0a0a0b;
+  --ds-ref-brand-books-fg: #4cc47e;
+  --ds-ref-brand-books-fg-hover: color-mix(in srgb, var(--ds-ref-brand-books-fg) 82%, #ffffff);
+  --ds-ref-brand-books-fg-active: color-mix(in srgb, var(--ds-ref-brand-books-fg) 66%, #ffffff);
+  --ds-ref-brand-books-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-books-fg) 45%, var(--ds-color-canvas));
+  --ds-ref-brand-books-bg: color-mix(in srgb, var(--ds-ref-brand-books-fg) 15%, transparent);
+  --ds-ref-brand-books-bg-hover: color-mix(in srgb, var(--ds-ref-brand-books-fg) 22%, transparent);
+  --ds-ref-brand-books-bg-active: color-mix(in srgb, var(--ds-ref-brand-books-fg) 30%, transparent);
+  --ds-ref-brand-books-border: color-mix(in srgb, var(--ds-ref-brand-books-fg) 40%, transparent);
+  --ds-ref-brand-books-ring: color-mix(in srgb, var(--ds-ref-brand-books-fg) 35%, transparent);
+  --ds-ref-brand-books-on-fg: #0a0a0b;
+  --ds-ref-brand-tax-fg: #6ba1ff;
+  --ds-ref-brand-tax-fg-hover: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 82%, #ffffff);
+  --ds-ref-brand-tax-fg-active: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 66%, #ffffff);
+  --ds-ref-brand-tax-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 45%, var(--ds-color-canvas));
+  --ds-ref-brand-tax-bg: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 15%, transparent);
+  --ds-ref-brand-tax-bg-hover: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 22%, transparent);
+  --ds-ref-brand-tax-bg-active: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 30%, transparent);
+  --ds-ref-brand-tax-border: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 40%, transparent);
+  --ds-ref-brand-tax-ring: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 35%, transparent);
+  --ds-ref-brand-tax-on-fg: #0a0a0b;
+  --ds-color-content-disabled: #6b6b72;
+  --ds-color-state-disabled-bg: #1f1f23;
+  --ds-color-state-hover: rgba(255, 255, 255, 0.04);
+  --ds-color-state-active: rgba(255, 255, 255, 0.08);
+  --ds-color-action-accent-fg: #0a0a0b;
+  --ds-ref-brand-pro-on-fg: #0a0a0b;
+  --ds-color-feedback-danger-solid-fg: #0a0a0b;
+  --ds-color-feedback-success-solid-fg: #0a0a0b;
+  --ds-color-feedback-success-fg: #5dc77e;
+  --ds-color-feedback-success-fg-hover: #4fb870;
+  --ds-color-feedback-success-fg-active: #43a663;
+  --ds-color-feedback-success-bg: rgba(31, 122, 61, 0.18);
+  --ds-color-feedback-success-border: rgba(31, 122, 61, 0.4);
+  --ds-color-feedback-warning-fg: #e89b3c;
+  --ds-color-feedback-warning-bg: rgba(180, 95, 10, 0.18);
+  --ds-color-feedback-warning-border: rgba(180, 95, 10, 0.4);
+  --ds-color-feedback-danger-fg: #f36868;
+  --ds-color-feedback-danger-fg-hover: #e25656;
+  --ds-color-feedback-danger-fg-active: #d64a4a;
+  --ds-color-feedback-danger-bg: rgba(196, 56, 56, 0.18);
+  --ds-color-feedback-danger-border: rgba(196, 56, 56, 0.4);
+  --ds-color-priority-low: #6e9bf0;
+  --ds-color-priority-medium: #a78bfa;
+  --ds-color-priority-high: #e8a04a;
+  --ds-color-chart-1: #8268f0;
+  --ds-color-chart-2: #a18cf0;
+  --ds-color-chart-3: #b6a6f5;
+  --ds-color-chart-4: #ccc0f9;
+  --ds-color-chart-line: #a18cf0;
+  --ds-color-chart-area-from: rgba(161, 140, 240, 0.28);
+  --ds-color-chart-area-to: rgba(161, 140, 240, 0);
+  --ds-color-service-tax: var(--ds-ref-brand-tax-fg);
+  --ds-color-service-tax-bg: var(--ds-ref-brand-tax-bg);
+  --ds-color-service-audit: var(--ds-ref-brand-audit-fg);
+  --ds-color-service-audit-bg: var(--ds-ref-brand-audit-bg);
+  --ds-color-service-accounting: var(--ds-ref-brand-books-fg);
+  --ds-color-service-accounting-bg: var(--ds-ref-brand-books-bg);
+  --ds-shadow-quiet: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  --ds-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  --ds-shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.5), 0 14px 32px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  --ds-ref-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
+  --ds-ref-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
+  --ds-ref-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
+  --ds-ref-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.5);
+  --ds-ref-shadow-xl: 0 20px 40px -12px rgba(0, 0, 0, 0.65), 0 8px 16px -8px rgba(0, 0, 0, 0.5);
+  --ds-ref-shadow-2xl: 0 32px 64px -16px rgba(0, 0, 0, 0.7), 0 12px 24px -12px rgba(0, 0, 0, 0.55);
+  --ds-focus-ring-color: color-mix(in srgb, var(--ds-color-action-brand-bg) 40%, transparent);
+  --ds-color-feedback-warning-solid-fg: #0a0a0b;
+  --ds-color-feedback-info-solid-fg: #0a0a0b;
+  --ds-elevation-overlay: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 28px 64px -16px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+[data-ds-brand="pro"],
+[data-brand="pro"] {
+  --ds-color-action-brand-bg: var(--ds-ref-brand-pro-fg);
+  --ds-color-action-brand-bg-hover: var(--ds-ref-brand-pro-fg-hover);
+  --ds-color-action-brand-bg-active: var(--ds-ref-brand-pro-fg-active);
+  --ds-color-action-brand-bg-disabled: var(--ds-ref-brand-pro-fg-disabled);
+  --ds-color-action-brand-subtle-bg: var(--ds-ref-brand-pro-bg);
+  --ds-color-action-brand-subtle-bg-hover: var(--ds-ref-brand-pro-bg-hover);
+  --ds-color-action-brand-subtle-bg-active: var(--ds-ref-brand-pro-bg-active);
+  --ds-color-action-brand-border: var(--ds-ref-brand-pro-border);
+  --ds-color-action-brand-ring: var(--ds-ref-brand-pro-ring);
+  --ds-color-action-brand-fg: var(--ds-ref-brand-pro-on-fg);
+  --ds-color-action-accent-bg: var(--ds-ref-brand-pro-fg);
+  --ds-color-action-accent-bg-strong: var(--ds-ref-brand-pro-fg-active);
+  --ds-color-action-accent-bg-hover: var(--ds-ref-brand-pro-fg-hover);
+  --ds-color-action-accent-bg-active: var(--ds-ref-brand-pro-fg-active);
+  --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-pro-bg);
+  --ds-color-action-accent-ring: var(--ds-ref-brand-pro-ring);
+  --ds-color-action-accent-fg: var(--ds-ref-brand-pro-on-fg);
+  --ds-focus-ring-border: var(--ds-ref-brand-pro-fg);
+}
+
+[data-ds-brand="audit"],
+[data-brand="audit"] {
+  --ds-color-action-brand-bg: var(--ds-ref-brand-audit-fg);
+  --ds-color-action-brand-bg-hover: var(--ds-ref-brand-audit-fg-hover);
+  --ds-color-action-brand-bg-active: var(--ds-ref-brand-audit-fg-active);
+  --ds-color-action-brand-bg-disabled: var(--ds-ref-brand-audit-fg-disabled);
+  --ds-color-action-brand-subtle-bg: var(--ds-ref-brand-audit-bg);
+  --ds-color-action-brand-subtle-bg-hover: var(--ds-ref-brand-audit-bg-hover);
+  --ds-color-action-brand-subtle-bg-active: var(--ds-ref-brand-audit-bg-active);
+  --ds-color-action-brand-border: var(--ds-ref-brand-audit-border);
+  --ds-color-action-brand-ring: var(--ds-ref-brand-audit-ring);
+  --ds-color-action-brand-fg: var(--ds-ref-brand-audit-on-fg);
+  --ds-color-action-accent-bg: var(--ds-ref-brand-audit-fg);
+  --ds-color-action-accent-bg-strong: var(--ds-ref-brand-audit-fg-active);
+  --ds-color-action-accent-bg-hover: var(--ds-ref-brand-audit-fg-hover);
+  --ds-color-action-accent-bg-active: var(--ds-ref-brand-audit-fg-active);
+  --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-audit-bg);
+  --ds-color-action-accent-ring: var(--ds-ref-brand-audit-ring);
+  --ds-color-action-accent-fg: var(--ds-ref-brand-audit-on-fg);
+  --ds-focus-ring-border: var(--ds-ref-brand-audit-fg);
+}
+
+[data-ds-brand="books"],
+[data-brand="books"] {
+  --ds-color-action-brand-bg: var(--ds-ref-brand-books-fg);
+  --ds-color-action-brand-bg-hover: var(--ds-ref-brand-books-fg-hover);
+  --ds-color-action-brand-bg-active: var(--ds-ref-brand-books-fg-active);
+  --ds-color-action-brand-bg-disabled: var(--ds-ref-brand-books-fg-disabled);
+  --ds-color-action-brand-subtle-bg: var(--ds-ref-brand-books-bg);
+  --ds-color-action-brand-subtle-bg-hover: var(--ds-ref-brand-books-bg-hover);
+  --ds-color-action-brand-subtle-bg-active: var(--ds-ref-brand-books-bg-active);
+  --ds-color-action-brand-border: var(--ds-ref-brand-books-border);
+  --ds-color-action-brand-ring: var(--ds-ref-brand-books-ring);
+  --ds-color-action-brand-fg: var(--ds-ref-brand-books-on-fg);
+  --ds-color-action-accent-bg: var(--ds-ref-brand-books-fg);
+  --ds-color-action-accent-bg-strong: var(--ds-ref-brand-books-fg-active);
+  --ds-color-action-accent-bg-hover: var(--ds-ref-brand-books-fg-hover);
+  --ds-color-action-accent-bg-active: var(--ds-ref-brand-books-fg-active);
+  --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-books-bg);
+  --ds-color-action-accent-ring: var(--ds-ref-brand-books-ring);
+  --ds-color-action-accent-fg: var(--ds-ref-brand-books-on-fg);
+  --ds-focus-ring-border: var(--ds-ref-brand-books-fg);
+}
+
+[data-ds-brand="tax"],
+[data-brand="tax"] {
+  --ds-color-action-brand-bg: var(--ds-ref-brand-tax-fg);
+  --ds-color-action-brand-bg-hover: var(--ds-ref-brand-tax-fg-hover);
+  --ds-color-action-brand-bg-active: var(--ds-ref-brand-tax-fg-active);
+  --ds-color-action-brand-bg-disabled: var(--ds-ref-brand-tax-fg-disabled);
+  --ds-color-action-brand-subtle-bg: var(--ds-ref-brand-tax-bg);
+  --ds-color-action-brand-subtle-bg-hover: var(--ds-ref-brand-tax-bg-hover);
+  --ds-color-action-brand-subtle-bg-active: var(--ds-ref-brand-tax-bg-active);
+  --ds-color-action-brand-border: var(--ds-ref-brand-tax-border);
+  --ds-color-action-brand-ring: var(--ds-ref-brand-tax-ring);
+  --ds-color-action-brand-fg: var(--ds-ref-brand-tax-on-fg);
+  --ds-color-action-accent-bg: var(--ds-ref-brand-tax-fg);
+  --ds-color-action-accent-bg-strong: var(--ds-ref-brand-tax-fg-active);
+  --ds-color-action-accent-bg-hover: var(--ds-ref-brand-tax-fg-hover);
+  --ds-color-action-accent-bg-active: var(--ds-ref-brand-tax-fg-active);
+  --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-tax-bg);
+  --ds-color-action-accent-ring: var(--ds-ref-brand-tax-ring);
+  --ds-color-action-accent-fg: var(--ds-ref-brand-tax-on-fg);
+  --ds-focus-ring-border: var(--ds-ref-brand-tax-fg);
+}
+
+[data-ds-density="compact"] {
+  --ds-control-height-sm: 28px;
+  --ds-control-height-md: 32px;
+  --ds-control-height-lg: 36px;
+  --ds-control-height-xl: 40px;
+  --ds-control-padding-x-sm: 8px;
+  --ds-control-padding-x-md: 12px;
+  --ds-control-padding-x-lg: 12px;
+  --ds-control-padding-x-xl: 16px;
+  --ds-control-gap-sm: 4px;
+  --ds-control-gap-md: 6px;
+  --ds-control-gap-lg: 8px;
+  --ds-control-gap-xl: 8px;
+  --ds-control-font-size-sm: 12px;
+  --ds-control-font-size-md: 13px;
+  --ds-control-font-size-lg: 13px;
+  --ds-control-font-size-xl: 14px;
+  --ds-control-icon-sm: 14px;
+  --ds-control-icon-md: 14px;
+  --ds-control-icon-lg: 16px;
+  --ds-control-icon-xl: 16px;
+}
+
+/* Reduced motion, once, at the token level (target architecture §20 rule 4).
+ * The durations collapse; presence does not become short, it becomes
+ * `none` — ADR-012 decision 4, because a 0.01ms animation still fires
+ * animationstart/animationend and delays a Radix unmount by 22–48 ms.
+ * This block is part of the namespaced mode only; dist/styles.css keeps
+ * the global prefers-reduced-motion rule it ships today. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ds-motion-duration-press: 0ms;
+    --ds-motion-duration-feedback: 0ms;
+    --ds-motion-duration-overlay: 0ms;
+    --ds-motion-duration-spatial: 0ms;
+    --ds-motion-duration-deliberate: 0ms;
+    --ds-motion-duration-overlay-exit: 0ms;
+    --ds-motion-presence-name: none;
+  }
+}