@polderlabs/bizar 6.3.0 → 7.0.0

package/bizar-dash/src/web/ui/primitives/Stack.tsx

@@ -0,0 +1,54 @@
+/*
+ * Stack.tsx — vertical flex container with gap (Wave 2A).
+ *
+ * Defaults to flex-direction:column with gap=3. Switch to row by setting
+ * `direction='row'` (renders the same `stack-row` class). gap / align /
+ * justify / wrap all map to single-purpose utility classes so the React
+ * layer stays declarative and CSS holds the visual truth.
+ */
+
+import { createElement, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type StackSpace = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+
+export type StackProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+  direction?: 'row' | 'column';
+  gap?: StackSpace;
+  align?: StackAlign;
+  justify?: StackJustify;
+  wrap?: boolean;
+  as?: 'div' | 'section' | 'article' | 'main' | 'ul' | 'ol' | 'li';
+  children?: ReactNode;
+};
+
+export function Stack({
+  direction = 'column',
+  gap = 3,
+  align,
+  justify,
+  wrap,
+  as = 'div',
+  className,
+  children,
+  ...rest
+}: StackProps): React.JSX.Element {
+  return createElement(
+    as,
+    {
+      ...rest,
+      className: cx(
+        'stack',
+        direction === 'row' && 'stack-row',
+        `gap-${gap}`,
+        align && `align-${align}`,
+        justify && `justify-${justify}`,
+        wrap === true && 'wrap',
+        className,
+      ),
+    },
+    children,
+  );
+}

package/bizar-dash/src/web/ui/primitives/VisuallyHidden.tsx

@@ -0,0 +1,26 @@
+/*
+ * VisuallyHidden.tsx — screen-reader-only span (Wave 2A).
+ *
+ * Renders content that is invisible to sighted users but still announced
+ * by assistive tech. Use for: skip-link targets, descriptive labels on
+ * icon-only buttons that already use aria-label redundantly, hidden form
+ * instructions, and decorative text that still carries semantic meaning
+ * (e.g. status changes announced without a visible toast).
+ */
+
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type VisuallyHiddenProps = HTMLAttributes<HTMLSpanElement> & {
+  children?: ReactNode;
+};
+
+export function VisuallyHidden({
+  children,
+  ...rest
+}: VisuallyHiddenProps): React.JSX.Element {
+  return (
+    <span className="vh" {...rest}>
+      {children}
+    </span>
+  );
+}

package/bizar-dash/src/web/ui/primitives/index.ts

@@ -0,0 +1,23 @@
+/*
+ * index.ts — Barrel for the layout primitives (Wave 2A).
+ *
+ * Side-effect import of primitives.css ships the stylesheet to any
+ * consumer that imports from this module graph. Wave 2's ui/index.ts
+ * re-exports the exports below — leaving the CSS wiring in place means
+ * styles arrive without an additional integration step.
+ */
+
+import './primitives.css';
+
+export { Box } from './Box';
+export type { BoxProps, BoxAs, BoxBg, BoxBorder, BoxRounded, BoxShadow, BoxDisplay, BoxPosition, BoxSpace } from './Box';
+export { Stack } from './Stack';
+export type { StackProps, StackSpace, StackAlign, StackJustify } from './Stack';
+export { Inline } from './Inline';
+export type { InlineProps, InlineSpace, InlineAlign, InlineJustify } from './Inline';
+export { Grid } from './Grid';
+export type { GridProps, GridSpace } from './Grid';
+export { Separator } from './Separator';
+export type { SeparatorProps } from './Separator';
+export { VisuallyHidden } from './VisuallyHidden';
+export type { VisuallyHiddenProps } from './VisuallyHidden';

package/bizar-dash/src/web/ui/primitives/primitives.css

@@ -0,0 +1,183 @@
+/* primitives.css — Visual styles for layout primitives (Wave 2A). */
+.box { box-sizing: border-box; }
+
+/* padding all */
+.box-p-0 { padding: 0; } .box-p-1 { padding: var(--space-1); } .box-p-2 { padding: var(--space-2); }
+.box-p-3 { padding: var(--space-3); } .box-p-4 { padding: var(--space-4); } .box-p-5 { padding: var(--space-5); }
+.box-p-6 { padding: var(--space-6); } .box-p-7 { padding: var(--space-7); } .box-p-8 { padding: var(--space-8); }
+/* padding x/y */
+.box-px-0 { padding-left: 0; padding-right: 0; }
+.box-px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
+.box-px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
+.box-px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
+.box-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.box-px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
+.box-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
+.box-px-7 { padding-left: var(--space-7); padding-right: var(--space-7); }
+.box-px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
+.box-py-0 { padding-top: 0; padding-bottom: 0; }
+.box-py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
+.box-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+.box-py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+.box-py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+.box-py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
+.box-py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
+.box-py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); }
+.box-py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
+
+/* margin all */
+.box-m-0 { margin: 0; } .box-m-1 { margin: var(--space-1); } .box-m-2 { margin: var(--space-2); }
+.box-m-3 { margin: var(--space-3); } .box-m-4 { margin: var(--space-4); } .box-m-5 { margin: var(--space-5); }
+.box-m-6 { margin: var(--space-6); } .box-m-7 { margin: var(--space-7); } .box-m-8 { margin: var(--space-8); }
+.box-mx-0 { margin-left: 0; margin-right: 0; }
+.box-mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
+.box-mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
+.box-mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
+.box-mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
+.box-mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
+.box-mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
+.box-mx-7 { margin-left: var(--space-7); margin-right: var(--space-7); }
+.box-mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
+.box-my-0 { margin-top: 0; margin-bottom: 0; }
+.box-my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
+.box-my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
+.box-my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
+.box-my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
+.box-my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
+.box-my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
+.box-my-7 { margin-top: var(--space-7); margin-bottom: var(--space-7); }
+.box-my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
+
+/* background surfaces */
+.box-bg-0 { background-color: var(--surface-0); }
+.box-bg-1 { background-color: var(--surface-1); }
+.box-bg-2 { background-color: var(--surface-2); }
+.box-bg-3 { background-color: var(--surface-3); }
+.box-bg-overlay { background-color: var(--surface-overlay); }
+
+/* borders */
+.box-border-none { border: 0; }
+.box-border-subtle { border: 1px solid var(--border-subtle); }
+.box-border-default { border: 1px solid var(--border-default); }
+.box-border-strong { border: 1px solid var(--border-strong); }
+
+/* radii */
+.box-rounded-none { border-radius: 0; }
+.box-rounded-sm { border-radius: var(--radius-sm); }
+.box-rounded-md { border-radius: var(--radius-md); }
+.box-rounded-lg { border-radius: var(--radius-lg); }
+.box-rounded-full { border-radius: var(--radius-full); }
+
+/* shadows */
+.box-shadow-none { box-shadow: none; }
+.box-shadow-hairline { box-shadow: var(--shadow-hairline); }
+.box-shadow-overlay { box-shadow: var(--shadow-overlay); }
+.box-shadow-tooltip { box-shadow: var(--shadow-tooltip); }
+
+/* display */
+.box-d-block { display: block; }
+.box-d-flex { display: flex; }
+.box-d-inline-flex { display: inline-flex; }
+.box-d-grid { display: grid; }
+.box-d-inline-block { display: inline-block; }
+.box-d-none { display: none; }
+
+/* position */
+.box-pos-static { position: static; }
+.box-pos-relative { position: relative; }
+.box-pos-absolute { position: absolute; }
+.box-pos-fixed { position: fixed; }
+.box-pos-sticky { position: sticky; }
+
+/* ===== Stack / Inline — flex containers with gap ===== */
+.stack,
+.inline {
+  display: flex;
+  box-sizing: border-box;
+}
+.stack { flex-direction: column; }
+.inline { flex-direction: row; flex-wrap: wrap; }
+.stack-row { flex-direction: row; }
+.inline-row { flex-direction: row; }
+.stack-col { flex-direction: column; }
+.inline-col { flex-direction: column; }
+
+/* gap 0..8 */
+.gap-0 { gap: 0; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
+.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); }
+.gap-6 { gap: var(--space-6); } .gap-7 { gap: var(--space-7); } .gap-8 { gap: var(--space-8); }
+
+/* alignment */
+.align-start { align-items: flex-start; }
+.align-center { align-items: center; }
+.align-end { align-items: flex-end; }
+.align-stretch { align-items: stretch; }
+.align-baseline { align-items: baseline; }
+
+.justify-start { justify-content: flex-start; }
+.justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+
+.wrap { flex-wrap: wrap; }
+.nowrap { flex-wrap: nowrap; }
+
+/* ===== Grid ===== */
+.grid {
+  display: grid;
+  box-sizing: border-box;
+}
+.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+.grid-autofit { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
+
+/* ===== Separator ===== */
+.separator {
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  margin: var(--space-5) 0;
+}
+.separator-vertical {
+  border: 0;
+  border-left: 1px solid var(--border-subtle);
+  margin: 0 var(--space-5);
+  width: 1px;
+  align-self: stretch;
+  min-height: 100%;
+}
+.separator-with-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  border: 0;
+  margin: var(--space-5) 0;
+}
+.separator-with-label::before,
+.separator-with-label::after {
+  content: "";
+  flex: 1;
+  border-top: 1px solid var(--border-subtle);
+}
+.separator-label {
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+}
+
+/* ===== VisuallyHidden ===== */
+.vh {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/bizar-dash/src/web/ui/styles/globals.css

@@ -0,0 +1,86 @@
+/*
+ * globals.css — Base element styles for the Bizar design system (Wave 1).
+ *
+ * Import order is load-bearing:
+ *   1. tokens.css — defines every CSS custom property the reset + base
+ *      element styles below reference.
+ *   2. reset.css — zeroes out UA defaults (box-sizing, margins, body bg).
+ * This file is a third layer that re-establishes sane defaults for common
+ * form / typography / horizontal-rule / link elements that the tight reset
+ * intentionally left alone.
+ */
+
+@import './tokens.css';
+@import './reset.css';
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+
+input,
+select,
+textarea {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--text-primary);
+  background-color: var(--surface-1);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-3);
+  transition: border-color var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--border-focus);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-subtle);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--text-tertiary);
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+pre {
+  background-color: var(--surface-1);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  overflow-x: auto;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  margin: var(--space-5) 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+::selection {
+  background-color: var(--accent);
+  color: var(--accent-fg);
+}

package/bizar-dash/src/web/ui/styles/reset.css

@@ -0,0 +1,125 @@
+/*
+ * reset.css — Modern, minimal CSS reset for the Bizar design system.
+ *
+ * Tighter than Andy Bell's "modern CSS reset": focused on what a
+ * Supabase-style data-dense UI actually needs (tabular numbers on body,
+ * hairline-bordered focus ring, themed thin scrollbar, no default margins
+ * on prose elements). Imported by globals.css; do not import directly.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  font-variant-numeric: tabular-nums;
+  background-color: var(--surface-0);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+  line-height: inherit;
+}
+
+button {
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+:focus {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+::selection {
+  background-color: var(--accent);
+  color: var(--accent-fg);
+}
+
+/* Themed, thin scrollbar — only WebKit/Blink; Firefox falls back to thin. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--border-default);
+  border-radius: var(--radius-full);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--border-strong);
+}

package/bizar-dash/src/web/ui/styles/tokens.css

@@ -0,0 +1,195 @@
+/*
+ * tokens.css — Design tokens for the Bizar design system (Wave 1).
+ *
+ * Exposes every visual constant as a CSS custom property so Wave 2/3
+ * components reference `var(--token)` rather than literal hex/px values.
+ * Light is the default on `:root`; dark overrides below on
+ * `:root[data-theme="dark"]`. `:root[data-theme="light"]` is explicit so
+ * a theme toggle from dark can always return to "light" predictably.
+ *
+ * Aesthetic: Supabase-style simple + data-focused — flat surfaces, hairline
+ * borders, no gradients, no glassmorphism, no decorative shadows.
+ */
+
+:root {
+  /* COLOR — surfaces (light default) */
+  --surface-0: #ffffff;
+  --surface-1: #fafafa;
+  --surface-2: #f4f4f5;
+  --surface-3: #e4e4e7;
+  --surface-overlay: rgba(0, 0, 0, 0.04);
+
+  /* COLOR — text */
+  --text-primary: #18181b;
+  --text-secondary: #52525b;
+  --text-tertiary: #a1a1aa;
+  --text-inverse: #fafafa;
+  --text-disabled: #d4d4d8;
+
+  /* COLOR — borders */
+  --border-subtle: rgba(0, 0, 0, 0.06);
+  --border-default: rgba(0, 0, 0, 0.10);
+  --border-strong: rgba(0, 0, 0, 0.16);
+  --border-focus: var(--accent);
+
+  /* COLOR — accent (single green) */
+  --accent: #3ecf8e;
+  --accent-hover: #34b87b;
+  --accent-active: #2da46a;
+  --accent-fg: #ffffff;
+  --accent-subtle: rgba(62, 207, 142, 0.10);
+
+  /* COLOR — semantic */
+  --success: #16a34a;
+  --warning: #d97706;
+  --danger: #dc2626;
+  --info: #2563eb;
+  --success-subtle: rgba(22, 163, 74, 0.10);
+  --warning-subtle: rgba(217, 119, 6, 0.10);
+  --danger-subtle: rgba(220, 38, 38, 0.10);
+  --info-subtle: rgba(37, 99, 235, 0.10);
+
+  /* COLOR — chart series (10-step categorical) */
+  --chart-1: #3ecf8e;
+  --chart-2: #60a5fa;
+  --chart-3: #fbbf24;
+  --chart-4: #f87171;
+  --chart-5: #a78bfa;
+  --chart-6: #fb7185;
+  --chart-7: #34d399;
+  --chart-8: #fb923c;
+  --chart-9: #22d3ee;
+  --chart-10: #c084fc;
+
+  /* TYPOGRAPHY */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Monaco,
+    Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-base: 13px;
+  --text-md: 14px;
+  --text-lg: 16px;
+  --text-xl: 18px;
+  --text-2xl: 22px;
+  --text-3xl: 28px;
+
+  --leading-tight: 1.2;
+  --leading-snug: 1.35;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.65;
+
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+
+  /* SPACING — 8px grid + half-steps */
+  --space-0: 0;
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 8px;
+  --space-4: 12px;
+  --space-5: 16px;
+  --space-6: 20px;
+  --space-7: 24px;
+  --space-8: 32px;
+  --space-9: 40px;
+  --space-10: 48px;
+  --space-11: 64px;
+  --space-12: 80px;
+
+  /* RADII */
+  --radius-none: 0;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-full: 9999px;
+
+  /* SHADOWS — hairline only, no big shadows */
+  --shadow-none: none;
+  --shadow-hairline: 0 0 0 1px var(--border-subtle);
+  --shadow-overlay: 0 0 0 1px var(--border-default),
+    0 8px 24px rgba(0, 0, 0, 0.08);
+  --shadow-tooltip: 0 0 0 1px var(--border-default),
+    0 4px 12px rgba(0, 0, 0, 0.12);
+
+  /* Z-INDEX */
+  --z-base: 0;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+  --z-tooltip: 600;
+  --z-toast: 700;
+
+  /* ANIMATION */
+  --duration-instant: 50ms;
+  --duration-fast: 120ms;
+  --duration-normal: 180ms;
+  --duration-slow: 280ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* LAYOUT */
+  --layout-sidebar-width: 220px;
+  --layout-topbar-height: 48px;
+  --layout-content-max: 1440px;
+}
+
+:root[data-theme='dark'] {
+  /* COLOR — surfaces (dark overrides) */
+  --surface-0: #0a0a0a;
+  --surface-1: #111111;
+  --surface-2: #1a1a1a;
+  --surface-3: #262626;
+  --surface-overlay: rgba(255, 255, 255, 0.04);
+
+  /* COLOR — text */
+  --text-primary: #fafafa;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
+  --text-inverse: #18181b;
+  --text-disabled: #52525b;
+
+  /* COLOR — borders */
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-default: rgba(255, 255, 255, 0.10);
+  --border-strong: rgba(255, 255, 255, 0.16);
+
+  /* Accent stays the same hue */
+  --accent-subtle: rgba(62, 207, 142, 0.15);
+
+  /* Semantic subtle */
+  --success-subtle: rgba(22, 163, 74, 0.15);
+  --warning-subtle: rgba(217, 119, 6, 0.15);
+  --danger-subtle: rgba(220, 38, 38, 0.15);
+  --info-subtle: rgba(37, 99, 235, 0.15);
+
+  /* Shadows stronger in dark for visibility */
+  --shadow-overlay: 0 0 0 1px var(--border-default),
+    0 8px 24px rgba(0, 0, 0, 0.40);
+  --shadow-tooltip: 0 0 0 1px var(--border-default),
+    0 4px 12px rgba(0, 0, 0, 0.50);
+}
+
+:root[data-theme='light'] {
+  /* Same as :root default — explicit override for "always go back to light" */
+  --surface-0: #ffffff;
+  --surface-1: #fafafa;
+  --surface-2: #f4f4f5;
+  --surface-3: #e4e4e7;
+  --text-primary: #18181b;
+  --text-secondary: #52525b;
+  --text-tertiary: #a1a1aa;
+  --border-subtle: rgba(0, 0, 0, 0.06);
+  --border-default: rgba(0, 0, 0, 0.10);
+  --border-strong: rgba(0, 0, 0, 0.16);
+  --shadow-overlay: 0 0 0 1px var(--border-default),
+    0 8px 24px rgba(0, 0, 0, 0.08);
+  --shadow-tooltip: 0 0 0 1px var(--border-default),
+    0 4px 12px rgba(0, 0, 0, 0.12);
+}