@twentyfirstmedia/pro 0.0.0-stage → 0.1.0

package/dist/tokens.css

@@ -0,0 +1,850 @@
+/* Generated by scripts/tokens.ts from tokens.json: Pro tokens. Do not edit; run `pnpm tokens`. */
+:where(:root) {
+  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --space-0-5: 2px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --radius: 2px;
+  --radius-sm: var(--radius-1);
+  --radius-md: calc((var(--radius) - 2px) * 1);
+  --radius-lg: calc((var(--radius) - 2px) * 1.375);
+  --radius-xl: calc((var(--radius) - 2px) * 1.875);
+  --radius-pill: var(--radius-1);
+  --radius-0: 0px;
+  --radius-1: var(--radius);
+  --radius-full: 9999px;
+  --dur-fast: var(--duration-fast);
+  --dur-base: var(--duration-base);
+  --dur-enter: var(--duration-base);
+  --dur-slow: var(--duration-base);
+  --stagger-step: 0ms;
+  --ease-out: var(--ease-standard);
+  --ease-spring: var(--ease-standard);
+  --ease-in-out: var(--ease-standard);
+  --duration-fast: 90ms;
+  --duration-base: 140ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --control-sm: 24px;
+  --control-md: var(--control-dense);
+  --control-lg: var(--control-comfy);
+  --row-dense: 28px;
+  --row-comfy: 36px;
+  --control-dense: 28px;
+  --control-comfy: 34px;
+  --topbar-h: 44px;
+  --sidebar-w: 232px;
+  --sidebar-w-collapsed: 52px;
+  --subnav-w: var(--sidebar-w);
+  --side-panel-w: 320px;
+  --icon-sm: 14px;
+  --icon-md: 16px;
+  --icon-lg: 16px;
+  --line-width: 1px;
+  --z-sticky: 10;
+  --z-overlay: 40;
+  --z-palette: 60;
+  --z-toast: 50;
+  --type-display-family: var(--font-sans);
+  --type-display-size: 28px;
+  --type-display-line: 32px;
+  --type-display-weight: 600;
+  --type-display-tracking: -0.02em;
+  --type-display-transform: none;
+  --type-number-xl-family: var(--font-mono);
+  --type-number-xl-size: 24px;
+  --type-number-xl-line: 28px;
+  --type-number-xl-weight: 500;
+  --type-number-xl-tracking: -0.02em;
+  --type-number-xl-transform: none;
+  --type-h1-family: var(--font-sans);
+  --type-h1-size: 28px;
+  --type-h1-line: 32px;
+  --type-h1-weight: 600;
+  --type-h1-tracking: -0.02em;
+  --type-h1-transform: none;
+  --type-h2-family: var(--font-sans);
+  --type-h2-size: 18px;
+  --type-h2-line: 24px;
+  --type-h2-weight: 600;
+  --type-h2-tracking: -0.01em;
+  --type-h2-transform: none;
+  --type-h3-family: var(--font-sans);
+  --type-h3-size: 14px;
+  --type-h3-line: 20px;
+  --type-h3-weight: 600;
+  --type-h3-tracking: normal;
+  --type-h3-transform: none;
+  --type-body-family: var(--font-sans);
+  --type-body-size: 14px;
+  --type-body-line: 20px;
+  --type-body-weight: 400;
+  --type-body-tracking: normal;
+  --type-body-transform: none;
+  --type-body-long-family: var(--font-sans);
+  --type-body-long-size: 14px;
+  --type-body-long-line: 22px;
+  --type-body-long-weight: 400;
+  --type-body-long-tracking: normal;
+  --type-body-long-transform: none;
+  --type-body-sm-family: var(--font-sans);
+  --type-body-sm-size: 13px;
+  --type-body-sm-line: 18px;
+  --type-body-sm-weight: 400;
+  --type-body-sm-tracking: normal;
+  --type-body-sm-transform: none;
+  --type-label-family: var(--font-sans);
+  --type-label-size: 12px;
+  --type-label-line: 16px;
+  --type-label-weight: 500;
+  --type-label-tracking: normal;
+  --type-label-transform: none;
+  --type-small-family: var(--font-sans);
+  --type-small-size: 12px;
+  --type-small-line: 16px;
+  --type-small-weight: 400;
+  --type-small-tracking: normal;
+  --type-small-transform: none;
+  --type-caption-family: var(--font-mono);
+  --type-caption-size: 11px;
+  --type-caption-line: 16px;
+  --type-caption-weight: 500;
+  --type-caption-tracking: 0.08em;
+  --type-caption-transform: uppercase;
+  --type-micro-family: var(--font-mono);
+  --type-micro-size: 10px;
+  --type-micro-line: 12px;
+  --type-micro-weight: 600;
+  --type-micro-tracking: normal;
+  --type-micro-transform: none;
+  --type-code-family: var(--font-mono);
+  --type-code-size: 13px;
+  --type-code-line: 20px;
+  --type-code-weight: 400;
+  --type-code-tracking: normal;
+  --type-code-transform: none;
+  --type-heading-family: var(--font-sans);
+  --type-heading-size: 18px;
+  --type-heading-line: 24px;
+  --type-heading-weight: 600;
+  --type-heading-tracking: -0.01em;
+  --type-heading-transform: none;
+  --type-title-family: var(--font-sans);
+  --type-title-size: 14px;
+  --type-title-line: 20px;
+  --type-title-weight: 600;
+  --type-title-tracking: normal;
+  --type-title-transform: none;
+  --type-eyebrow-family: var(--font-mono);
+  --type-eyebrow-size: 11px;
+  --type-eyebrow-line: 16px;
+  --type-eyebrow-weight: 500;
+  --type-eyebrow-tracking: 0.08em;
+  --type-eyebrow-transform: uppercase;
+  --type-mono-family: var(--font-mono);
+  --type-mono-size: 13px;
+  --type-mono-line: 20px;
+  --type-mono-weight: 400;
+  --type-mono-tracking: normal;
+  --type-mono-transform: none;
+  --type-mono-sm-family: var(--font-mono);
+  --type-mono-sm-size: 12px;
+  --type-mono-sm-line: 16px;
+  --type-mono-sm-weight: 400;
+  --type-mono-sm-tracking: normal;
+  --type-mono-sm-transform: none;
+  --type-numeric-family: var(--font-mono);
+  --type-numeric-size: 24px;
+  --type-numeric-line: 28px;
+  --type-numeric-weight: 500;
+  --type-numeric-tracking: -0.02em;
+  --type-numeric-transform: none;
+  --density-control: var(--control-dense);
+  --density-row: var(--row-dense);
+  --density-pad-x: var(--space-3);
+  --density-font-size: 13px;
+  --density-line-height: 18px;
+  --background: #09090b;
+  --foreground: #ededf0;
+  --card: #0e0e11;
+  --card-foreground: var(--foreground);
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+  --primary: #ededf0;
+  --primary-foreground: #09090b;
+  --primary-hover: color-mix(in oklab, var(--primary) 70%, #ffffff);
+  --secondary: #16161a;
+  --secondary-foreground: var(--foreground);
+  --muted: #16161a;
+  --muted-foreground: #a6a6b0;
+  --accent: #16161a;
+  --accent-foreground: var(--foreground);
+  --destructive: #ef6f61;
+  --destructive-foreground: var(--card);
+  --border: #26262c;
+  --input: #62626d;
+  --ring: var(--foreground);
+  --chart-1: var(--sky-ink);
+  --chart-2: var(--mint-ink);
+  --chart-3: var(--butter-ink);
+  --chart-4: var(--lilac-ink);
+  --chart-5: var(--blush-ink);
+  --sidebar: var(--card);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --canvas: var(--bg-000);
+  --surface: var(--bg-100);
+  --surface-sunken: var(--bg-200);
+  --frame: var(--bg-100);
+  --on-frame: var(--fg-100);
+  --on-frame-muted: var(--fg-300);
+  --ink: var(--fg-100);
+  --ink-muted: var(--fg-200);
+  --ink-subtle: var(--fg-300);
+  --line: var(--line-200);
+  --line-strong: var(--line-300);
+  --sky: var(--info-bg);
+  --sky-ink: var(--info);
+  --mint: var(--ok-bg);
+  --mint-ink: var(--ok);
+  --lilac: var(--signal-bg);
+  --lilac-ink: var(--signal);
+  --butter: var(--warn-bg);
+  --butter-ink: var(--warn);
+  --blush: var(--danger-bg);
+  --blush-ink: var(--danger);
+  --focus: var(--ring);
+  --count: var(--signal);
+  --on-count: var(--bg-000);
+  --on-frame-success: var(--ok);
+  --on-frame-danger: var(--danger);
+  --scrim: rgba(0,0,0,0.62);
+  --scrim-strong: var(--scrim);
+  --bg-000: var(--background);
+  --bg-100: var(--card);
+  --bg-200: var(--muted);
+  --bg-300: color-mix(in oklab, var(--foreground) 5%, var(--muted));
+  --fg-100: var(--foreground);
+  --fg-200: var(--muted-foreground);
+  --fg-300: color-mix(in oklab, var(--muted-foreground) 90%, var(--background));
+  --fg-400: color-mix(in oklab, var(--muted-foreground) 57%, var(--background));
+  --line-100: color-mix(in oklab, var(--border) 52%, var(--card));
+  --line-200: var(--border);
+  --line-300: var(--input);
+  --chart-grid: var(--line-100);
+  --chart-sky: var(--fg-100);
+  --chart-mint: color-mix(in oklab, var(--foreground) 48%, var(--card));
+  --chart-lilac: var(--fg-300);
+  --chart-butter: var(--fg-200);
+  --chart-blush: var(--line-300);
+  --ok: #5cc28f;
+  --ok-bg: rgba(92,194,143,0.12);
+  --info: #7aa7f5;
+  --info-bg: rgba(122,167,245,0.12);
+  --warn: #d9b44a;
+  --warn-bg: rgba(217,180,74,0.12);
+  --danger: var(--destructive);
+  --danger-bg: rgba(239,111,97,0.12);
+  --signal: #f2994a;
+  --signal-bg: rgba(242,153,74,0.14);
+  --idle: var(--fg-300);
+  --diff-add: var(--ok);
+  --diff-add-bg: var(--ok-bg);
+  --diff-del: var(--danger);
+  --diff-del-bg: var(--danger-bg);
+  --paper: #ffffff;
+  --paper-ink: #111114;
+  --frame-hover: var(--bg-200);
+  --frame-active: var(--bg-300);
+  --frame-strong: var(--bg-300);
+  --on-frame-strong: var(--fg-100);
+  --on-frame-warn: var(--warn);
+  --on-frame-signal: var(--signal);
+  --ink-hover: var(--bg-200);
+  --hairline: var(--line-200);
+  --media-scrim: rgba(10, 10, 10, 0.6);
+  --media-ink: #ffffff;
+  --media-shadow: rgba(0, 0, 0, 0.3);
+  --lightbox: rgba(8, 8, 8, 0.92);
+  --lightbox-ink: rgba(255, 255, 255, 0.8);
+  --paper-muted: #706f6a;
+  --paper-subtle: #6b6a65;
+  --serp-ink: #202124;
+  --serp-muted: #4d5156;
+  --serp-link: #1a0dab;
+  --serp-chip: #f1f3f4;
+  --shadow-card: none;
+  --shadow-lift: none;
+  --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
+  --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
+  --button-radius: var(--radius-1);
+  --field-radius: var(--radius-1);
+  --badge-radius: var(--radius-1);
+  --panel-bg: var(--bg-100);
+  --panel-border: var(--line-200);
+  --panel-radius: var(--radius-0);
+  --panel-shadow: none;
+  --panel-pad: var(--space-4);
+  --panel-gap: 1px;
+  color-scheme: dark;
+}
+@media (prefers-color-scheme: dark) {
+  :where([data-theme="system"]) {
+    --background: #09090b;
+    --foreground: #ededf0;
+    --card: #0e0e11;
+    --card-foreground: var(--foreground);
+    --popover: var(--card);
+    --popover-foreground: var(--foreground);
+    --primary: #ededf0;
+    --primary-foreground: #09090b;
+    --primary-hover: color-mix(in oklab, var(--primary) 70%, #ffffff);
+    --secondary: #16161a;
+    --secondary-foreground: var(--foreground);
+    --muted: #16161a;
+    --muted-foreground: #a6a6b0;
+    --accent: #16161a;
+    --accent-foreground: var(--foreground);
+    --destructive: #ef6f61;
+    --destructive-foreground: var(--card);
+    --border: #26262c;
+    --input: #62626d;
+    --ring: var(--foreground);
+    --chart-1: var(--sky-ink);
+    --chart-2: var(--mint-ink);
+    --chart-3: var(--butter-ink);
+    --chart-4: var(--lilac-ink);
+    --chart-5: var(--blush-ink);
+    --sidebar: var(--card);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--accent);
+    --sidebar-accent-foreground: var(--accent-foreground);
+    --sidebar-border: var(--border);
+    --sidebar-ring: var(--ring);
+    --canvas: var(--bg-000);
+    --surface: var(--bg-100);
+    --surface-sunken: var(--bg-200);
+    --frame: var(--bg-100);
+    --on-frame: var(--fg-100);
+    --on-frame-muted: var(--fg-300);
+    --ink: var(--fg-100);
+    --ink-muted: var(--fg-200);
+    --ink-subtle: var(--fg-300);
+    --line: var(--line-200);
+    --line-strong: var(--line-300);
+    --sky: var(--info-bg);
+    --sky-ink: var(--info);
+    --mint: var(--ok-bg);
+    --mint-ink: var(--ok);
+    --lilac: var(--signal-bg);
+    --lilac-ink: var(--signal);
+    --butter: var(--warn-bg);
+    --butter-ink: var(--warn);
+    --blush: var(--danger-bg);
+    --blush-ink: var(--danger);
+    --focus: var(--ring);
+    --count: var(--signal);
+    --on-count: var(--bg-000);
+    --on-frame-success: var(--ok);
+    --on-frame-danger: var(--danger);
+    --scrim: rgba(0,0,0,0.62);
+    --scrim-strong: var(--scrim);
+    --bg-000: var(--background);
+    --bg-100: var(--card);
+    --bg-200: var(--muted);
+    --bg-300: color-mix(in oklab, var(--foreground) 5%, var(--muted));
+    --fg-100: var(--foreground);
+    --fg-200: var(--muted-foreground);
+    --fg-300: color-mix(in oklab, var(--muted-foreground) 90%, var(--background));
+    --fg-400: color-mix(in oklab, var(--muted-foreground) 57%, var(--background));
+    --line-100: color-mix(in oklab, var(--border) 52%, var(--card));
+    --line-200: var(--border);
+    --line-300: var(--input);
+    --chart-grid: var(--line-100);
+    --chart-sky: var(--fg-100);
+    --chart-mint: color-mix(in oklab, var(--foreground) 48%, var(--card));
+    --chart-lilac: var(--fg-300);
+    --chart-butter: var(--fg-200);
+    --chart-blush: var(--line-300);
+    --ok: #5cc28f;
+    --ok-bg: rgba(92,194,143,0.12);
+    --info: #7aa7f5;
+    --info-bg: rgba(122,167,245,0.12);
+    --warn: #d9b44a;
+    --warn-bg: rgba(217,180,74,0.12);
+    --danger: var(--destructive);
+    --danger-bg: rgba(239,111,97,0.12);
+    --signal: #f2994a;
+    --signal-bg: rgba(242,153,74,0.14);
+    --idle: var(--fg-300);
+    --diff-add: var(--ok);
+    --diff-add-bg: var(--ok-bg);
+    --diff-del: var(--danger);
+    --diff-del-bg: var(--danger-bg);
+    --paper: #ffffff;
+    --paper-ink: #111114;
+    --frame-hover: var(--bg-200);
+    --frame-active: var(--bg-300);
+    --frame-strong: var(--bg-300);
+    --on-frame-strong: var(--fg-100);
+    --on-frame-warn: var(--warn);
+    --on-frame-signal: var(--signal);
+    --ink-hover: var(--bg-200);
+    --hairline: var(--line-200);
+    --media-scrim: rgba(10, 10, 10, 0.6);
+    --media-ink: #ffffff;
+    --media-shadow: rgba(0, 0, 0, 0.3);
+    --lightbox: rgba(8, 8, 8, 0.92);
+    --lightbox-ink: rgba(255, 255, 255, 0.8);
+    --paper-muted: #706f6a;
+    --paper-subtle: #6b6a65;
+    --serp-ink: #202124;
+    --serp-muted: #4d5156;
+    --serp-link: #1a0dab;
+    --serp-chip: #f1f3f4;
+    --shadow-card: none;
+    --shadow-lift: none;
+    --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
+    --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
+    --button-radius: var(--radius-1);
+    --field-radius: var(--radius-1);
+    --badge-radius: var(--radius-1);
+    --panel-bg: var(--bg-100);
+    --panel-border: var(--line-200);
+    --panel-radius: var(--radius-0);
+    --panel-shadow: none;
+    --panel-pad: var(--space-4);
+    --panel-gap: 1px;
+    color-scheme: dark;
+  }
+}
+@media (prefers-color-scheme: light) {
+  :where([data-theme="system"]) {
+    --background: #f6f6f7;
+    --foreground: #111114;
+    --card: #ffffff;
+    --card-foreground: var(--foreground);
+    --popover: var(--card);
+    --popover-foreground: var(--foreground);
+    --primary: #111114;
+    --primary-foreground: #ffffff;
+    --primary-hover: color-mix(in oklab, var(--primary) 70%, #000000);
+    --secondary: #f0f0f2;
+    --secondary-foreground: var(--foreground);
+    --muted: #f0f0f2;
+    --muted-foreground: #4f4f58;
+    --accent: #f0f0f2;
+    --accent-foreground: var(--foreground);
+    --destructive: #b0301f;
+    --destructive-foreground: var(--card);
+    --border: #dfdfe3;
+    --input: #8a8a94;
+    --ring: var(--foreground);
+    --chart-1: var(--sky-ink);
+    --chart-2: var(--mint-ink);
+    --chart-3: var(--butter-ink);
+    --chart-4: var(--lilac-ink);
+    --chart-5: var(--blush-ink);
+    --sidebar: var(--card);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--accent);
+    --sidebar-accent-foreground: var(--accent-foreground);
+    --sidebar-border: var(--border);
+    --sidebar-ring: var(--ring);
+    --canvas: var(--bg-000);
+    --surface: var(--bg-100);
+    --surface-sunken: var(--bg-200);
+    --frame: var(--bg-100);
+    --on-frame: var(--fg-100);
+    --on-frame-muted: var(--fg-300);
+    --ink: var(--fg-100);
+    --ink-muted: var(--fg-200);
+    --ink-subtle: var(--fg-300);
+    --line: var(--line-200);
+    --line-strong: var(--line-300);
+    --sky: var(--info-bg);
+    --sky-ink: var(--info);
+    --mint: var(--ok-bg);
+    --mint-ink: var(--ok);
+    --lilac: var(--signal-bg);
+    --lilac-ink: var(--signal);
+    --butter: var(--warn-bg);
+    --butter-ink: var(--warn);
+    --blush: var(--danger-bg);
+    --blush-ink: var(--danger);
+    --focus: var(--ring);
+    --count: var(--signal);
+    --on-count: var(--bg-000);
+    --on-frame-success: var(--ok);
+    --on-frame-danger: var(--danger);
+    --scrim: rgba(17,17,20,0.36);
+    --scrim-strong: var(--scrim);
+    --bg-000: var(--background);
+    --bg-100: var(--card);
+    --bg-200: var(--muted);
+    --bg-300: color-mix(in oklab, var(--foreground) 3%, var(--muted));
+    --fg-100: var(--foreground);
+    --fg-200: var(--muted-foreground);
+    --fg-300: color-mix(in oklab, var(--muted-foreground) 92%, var(--background));
+    --fg-400: color-mix(in oklab, var(--muted-foreground) 47%, var(--background));
+    --line-100: color-mix(in oklab, var(--border) 59%, var(--card));
+    --line-200: var(--border);
+    --line-300: var(--input);
+    --chart-grid: var(--line-100);
+    --chart-sky: var(--fg-100);
+    --chart-mint: color-mix(in oklab, var(--foreground) 38%, var(--card));
+    --chart-lilac: var(--fg-300);
+    --chart-butter: var(--fg-200);
+    --chart-blush: var(--line-300);
+    --ok: #177447;
+    --ok-bg: rgba(23,116,71,0.09);
+    --info: #2856b0;
+    --info-bg: rgba(40,86,176,0.08);
+    --warn: #765600;
+    --warn-bg: rgba(118,86,0,0.09);
+    --danger: var(--destructive);
+    --danger-bg: rgba(176,48,31,0.08);
+    --signal: #9a4807;
+    --signal-bg: rgba(154,72,7,0.09);
+    --idle: var(--fg-300);
+    --diff-add: var(--ok);
+    --diff-add-bg: var(--ok-bg);
+    --diff-del: var(--danger);
+    --diff-del-bg: var(--danger-bg);
+    --paper: #ffffff;
+    --paper-ink: #111114;
+    --frame-hover: var(--bg-200);
+    --frame-active: var(--bg-300);
+    --frame-strong: var(--bg-300);
+    --on-frame-strong: var(--fg-100);
+    --on-frame-warn: var(--warn);
+    --on-frame-signal: var(--signal);
+    --ink-hover: var(--bg-200);
+    --hairline: var(--line-200);
+    --media-scrim: rgba(10, 10, 10, 0.6);
+    --media-ink: #ffffff;
+    --media-shadow: rgba(0, 0, 0, 0.3);
+    --lightbox: rgba(8, 8, 8, 0.92);
+    --lightbox-ink: rgba(255, 255, 255, 0.8);
+    --paper-muted: #706f6a;
+    --paper-subtle: #6b6a65;
+    --serp-ink: #202124;
+    --serp-muted: #4d5156;
+    --serp-link: #1a0dab;
+    --serp-chip: #f1f3f4;
+    --shadow-card: none;
+    --shadow-lift: none;
+    --shadow-float: 0 16px 40px rgba(17,17,20,0.12);
+    --shadow-overlay: 0 16px 40px rgba(17,17,20,0.12);
+    --button-radius: var(--radius-1);
+    --field-radius: var(--radius-1);
+    --badge-radius: var(--radius-1);
+    --panel-bg: var(--bg-100);
+    --panel-border: var(--line-200);
+    --panel-radius: var(--radius-0);
+    --panel-shadow: none;
+    --panel-pad: var(--space-4);
+    --panel-gap: 1px;
+    color-scheme: light;
+  }
+}
+:where([data-theme="dark"], .dark) {
+  --background: #09090b;
+  --foreground: #ededf0;
+  --card: #0e0e11;
+  --card-foreground: var(--foreground);
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+  --primary: #ededf0;
+  --primary-foreground: #09090b;
+  --primary-hover: color-mix(in oklab, var(--primary) 70%, #ffffff);
+  --secondary: #16161a;
+  --secondary-foreground: var(--foreground);
+  --muted: #16161a;
+  --muted-foreground: #a6a6b0;
+  --accent: #16161a;
+  --accent-foreground: var(--foreground);
+  --destructive: #ef6f61;
+  --destructive-foreground: var(--card);
+  --border: #26262c;
+  --input: #62626d;
+  --ring: var(--foreground);
+  --chart-1: var(--sky-ink);
+  --chart-2: var(--mint-ink);
+  --chart-3: var(--butter-ink);
+  --chart-4: var(--lilac-ink);
+  --chart-5: var(--blush-ink);
+  --sidebar: var(--card);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --canvas: var(--bg-000);
+  --surface: var(--bg-100);
+  --surface-sunken: var(--bg-200);
+  --frame: var(--bg-100);
+  --on-frame: var(--fg-100);
+  --on-frame-muted: var(--fg-300);
+  --ink: var(--fg-100);
+  --ink-muted: var(--fg-200);
+  --ink-subtle: var(--fg-300);
+  --line: var(--line-200);
+  --line-strong: var(--line-300);
+  --sky: var(--info-bg);
+  --sky-ink: var(--info);
+  --mint: var(--ok-bg);
+  --mint-ink: var(--ok);
+  --lilac: var(--signal-bg);
+  --lilac-ink: var(--signal);
+  --butter: var(--warn-bg);
+  --butter-ink: var(--warn);
+  --blush: var(--danger-bg);
+  --blush-ink: var(--danger);
+  --focus: var(--ring);
+  --count: var(--signal);
+  --on-count: var(--bg-000);
+  --on-frame-success: var(--ok);
+  --on-frame-danger: var(--danger);
+  --scrim: rgba(0,0,0,0.62);
+  --scrim-strong: var(--scrim);
+  --bg-000: var(--background);
+  --bg-100: var(--card);
+  --bg-200: var(--muted);
+  --bg-300: color-mix(in oklab, var(--foreground) 5%, var(--muted));
+  --fg-100: var(--foreground);
+  --fg-200: var(--muted-foreground);
+  --fg-300: color-mix(in oklab, var(--muted-foreground) 90%, var(--background));
+  --fg-400: color-mix(in oklab, var(--muted-foreground) 57%, var(--background));
+  --line-100: color-mix(in oklab, var(--border) 52%, var(--card));
+  --line-200: var(--border);
+  --line-300: var(--input);
+  --chart-grid: var(--line-100);
+  --chart-sky: var(--fg-100);
+  --chart-mint: color-mix(in oklab, var(--foreground) 48%, var(--card));
+  --chart-lilac: var(--fg-300);
+  --chart-butter: var(--fg-200);
+  --chart-blush: var(--line-300);
+  --ok: #5cc28f;
+  --ok-bg: rgba(92,194,143,0.12);
+  --info: #7aa7f5;
+  --info-bg: rgba(122,167,245,0.12);
+  --warn: #d9b44a;
+  --warn-bg: rgba(217,180,74,0.12);
+  --danger: var(--destructive);
+  --danger-bg: rgba(239,111,97,0.12);
+  --signal: #f2994a;
+  --signal-bg: rgba(242,153,74,0.14);
+  --idle: var(--fg-300);
+  --diff-add: var(--ok);
+  --diff-add-bg: var(--ok-bg);
+  --diff-del: var(--danger);
+  --diff-del-bg: var(--danger-bg);
+  --paper: #ffffff;
+  --paper-ink: #111114;
+  --frame-hover: var(--bg-200);
+  --frame-active: var(--bg-300);
+  --frame-strong: var(--bg-300);
+  --on-frame-strong: var(--fg-100);
+  --on-frame-warn: var(--warn);
+  --on-frame-signal: var(--signal);
+  --ink-hover: var(--bg-200);
+  --hairline: var(--line-200);
+  --media-scrim: rgba(10, 10, 10, 0.6);
+  --media-ink: #ffffff;
+  --media-shadow: rgba(0, 0, 0, 0.3);
+  --lightbox: rgba(8, 8, 8, 0.92);
+  --lightbox-ink: rgba(255, 255, 255, 0.8);
+  --paper-muted: #706f6a;
+  --paper-subtle: #6b6a65;
+  --serp-ink: #202124;
+  --serp-muted: #4d5156;
+  --serp-link: #1a0dab;
+  --serp-chip: #f1f3f4;
+  --shadow-card: none;
+  --shadow-lift: none;
+  --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
+  --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
+  --button-radius: var(--radius-1);
+  --field-radius: var(--radius-1);
+  --badge-radius: var(--radius-1);
+  --panel-bg: var(--bg-100);
+  --panel-border: var(--line-200);
+  --panel-radius: var(--radius-0);
+  --panel-shadow: none;
+  --panel-pad: var(--space-4);
+  --panel-gap: 1px;
+  color-scheme: dark;
+}
+:where([data-theme="light"], .light) {
+  --background: #f6f6f7;
+  --foreground: #111114;
+  --card: #ffffff;
+  --card-foreground: var(--foreground);
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+  --primary: #111114;
+  --primary-foreground: #ffffff;
+  --primary-hover: color-mix(in oklab, var(--primary) 70%, #000000);
+  --secondary: #f0f0f2;
+  --secondary-foreground: var(--foreground);
+  --muted: #f0f0f2;
+  --muted-foreground: #4f4f58;
+  --accent: #f0f0f2;
+  --accent-foreground: var(--foreground);
+  --destructive: #b0301f;
+  --destructive-foreground: var(--card);
+  --border: #dfdfe3;
+  --input: #8a8a94;
+  --ring: var(--foreground);
+  --chart-1: var(--sky-ink);
+  --chart-2: var(--mint-ink);
+  --chart-3: var(--butter-ink);
+  --chart-4: var(--lilac-ink);
+  --chart-5: var(--blush-ink);
+  --sidebar: var(--card);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+  --canvas: var(--bg-000);
+  --surface: var(--bg-100);
+  --surface-sunken: var(--bg-200);
+  --frame: var(--bg-100);
+  --on-frame: var(--fg-100);
+  --on-frame-muted: var(--fg-300);
+  --ink: var(--fg-100);
+  --ink-muted: var(--fg-200);
+  --ink-subtle: var(--fg-300);
+  --line: var(--line-200);
+  --line-strong: var(--line-300);
+  --sky: var(--info-bg);
+  --sky-ink: var(--info);
+  --mint: var(--ok-bg);
+  --mint-ink: var(--ok);
+  --lilac: var(--signal-bg);
+  --lilac-ink: var(--signal);
+  --butter: var(--warn-bg);
+  --butter-ink: var(--warn);
+  --blush: var(--danger-bg);
+  --blush-ink: var(--danger);
+  --focus: var(--ring);
+  --count: var(--signal);
+  --on-count: var(--bg-000);
+  --on-frame-success: var(--ok);
+  --on-frame-danger: var(--danger);
+  --scrim: rgba(17,17,20,0.36);
+  --scrim-strong: var(--scrim);
+  --bg-000: var(--background);
+  --bg-100: var(--card);
+  --bg-200: var(--muted);
+  --bg-300: color-mix(in oklab, var(--foreground) 3%, var(--muted));
+  --fg-100: var(--foreground);
+  --fg-200: var(--muted-foreground);
+  --fg-300: color-mix(in oklab, var(--muted-foreground) 92%, var(--background));
+  --fg-400: color-mix(in oklab, var(--muted-foreground) 47%, var(--background));
+  --line-100: color-mix(in oklab, var(--border) 59%, var(--card));
+  --line-200: var(--border);
+  --line-300: var(--input);
+  --chart-grid: var(--line-100);
+  --chart-sky: var(--fg-100);
+  --chart-mint: color-mix(in oklab, var(--foreground) 38%, var(--card));
+  --chart-lilac: var(--fg-300);
+  --chart-butter: var(--fg-200);
+  --chart-blush: var(--line-300);
+  --ok: #177447;
+  --ok-bg: rgba(23,116,71,0.09);
+  --info: #2856b0;
+  --info-bg: rgba(40,86,176,0.08);
+  --warn: #765600;
+  --warn-bg: rgba(118,86,0,0.09);
+  --danger: var(--destructive);
+  --danger-bg: rgba(176,48,31,0.08);
+  --signal: #9a4807;
+  --signal-bg: rgba(154,72,7,0.09);
+  --idle: var(--fg-300);
+  --diff-add: var(--ok);
+  --diff-add-bg: var(--ok-bg);
+  --diff-del: var(--danger);
+  --diff-del-bg: var(--danger-bg);
+  --paper: #ffffff;
+  --paper-ink: #111114;
+  --frame-hover: var(--bg-200);
+  --frame-active: var(--bg-300);
+  --frame-strong: var(--bg-300);
+  --on-frame-strong: var(--fg-100);
+  --on-frame-warn: var(--warn);
+  --on-frame-signal: var(--signal);
+  --ink-hover: var(--bg-200);
+  --hairline: var(--line-200);
+  --media-scrim: rgba(10, 10, 10, 0.6);
+  --media-ink: #ffffff;
+  --media-shadow: rgba(0, 0, 0, 0.3);
+  --lightbox: rgba(8, 8, 8, 0.92);
+  --lightbox-ink: rgba(255, 255, 255, 0.8);
+  --paper-muted: #706f6a;
+  --paper-subtle: #6b6a65;
+  --serp-ink: #202124;
+  --serp-muted: #4d5156;
+  --serp-link: #1a0dab;
+  --serp-chip: #f1f3f4;
+  --shadow-card: none;
+  --shadow-lift: none;
+  --shadow-float: 0 16px 40px rgba(17,17,20,0.12);
+  --shadow-overlay: 0 16px 40px rgba(17,17,20,0.12);
+  --button-radius: var(--radius-1);
+  --field-radius: var(--radius-1);
+  --badge-radius: var(--radius-1);
+  --panel-bg: var(--bg-100);
+  --panel-border: var(--line-200);
+  --panel-radius: var(--radius-0);
+  --panel-shadow: none;
+  --panel-pad: var(--space-4);
+  --panel-gap: 1px;
+  color-scheme: light;
+}
+@media (pointer: coarse) {
+  :where(:root:not([data-density])) {
+    --density-control: var(--control-comfy);
+    --density-row: var(--row-comfy);
+    --density-pad-x: var(--space-4);
+    --density-font-size: 14px;
+    --density-line-height: 20px;
+  }
+}
+:where([data-density="compact"]) {
+  --density-control: var(--control-dense);
+  --density-row: var(--row-dense);
+  --density-pad-x: var(--space-3);
+  --density-font-size: 13px;
+  --density-line-height: 18px;
+}
+:where([data-density="comfortable"]) {
+  --density-control: var(--control-comfy);
+  --density-row: var(--row-comfy);
+  --density-pad-x: var(--space-4);
+  --density-font-size: 14px;
+  --density-line-height: 20px;
+}