nuvox 0.1.0

package/dist/themes/generated.css

@@ -0,0 +1,1155 @@
+/* Light — Default, neutral, high-legibility surface.
+   Generated from src/tokens/themes/light.ts — do not hand-edit. */
+[data-theme="light"] {
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #030712;
+  --color-success-light: #d1fae5;
+  --color-success-subtle: #a7f3d0;
+  --color-success-base: #10b981;
+  --color-success-dark: #059669;
+  --color-success-deeper: #064e3b;
+  --color-danger-light: #fee2e2;
+  --color-danger-subtle: #fecaca;
+  --color-danger-base: #ef4444;
+  --color-danger-dark: #dc2626;
+  --color-danger-deeper: #7f1d1d;
+  --color-warning-light: #fef3c7;
+  --color-warning-subtle: #fde68a;
+  --color-warning-base: #f59e0b;
+  --color-warning-dark: #d97706;
+  --color-warning-deeper: #78350f;
+  --color-info-light: #dbeafe;
+  --color-info-subtle: #bfdbfe;
+  --color-info-base: #3b82f6;
+  --color-info-dark: #2563eb;
+  --color-info-deeper: #1e3a5f;
+  --color-background: #ffffff;
+  --color-surface: #ffffff;
+  --color-surfaceRaised: #ffffff;
+  --color-border: #e5e7eb;
+  --color-borderFocus: #9ca3af;
+  --color-text: #111827;
+  --color-textMuted: #6b7280;
+  --color-textInverse: #ffffff;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Inter', system-ui, sans-serif;
+  --typography-fontMono: 'JetBrains Mono', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+  --shadow-lg: 0 10px 24px rgba(0,0,0,0.10);
+  --shadow-xl: 0 20px 40px rgba(0,0,0,0.12);
+  --shadow-2xl: 0 28px 56px rgba(0,0,0,0.16);
+  --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.05);
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 120ms;
+  --motion-durationNormal: 200ms;
+  --motion-durationSlow: 320ms;
+  --motion-easeStandard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easeEmphasized: cubic-bezier(0.2, 0, 0, 1);
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 1px;
+  --border-widthMedium: 1.5px;
+  --border-widthThick: 2px;
+  --border-style: solid;
+  --effects-backdropBlur: 0px;
+}
+
+/* Dark — Low-glare surface for extended use.
+   Generated from src/tokens/themes/dark.ts — do not hand-edit. */
+[data-theme="dark"] {
+  --color-neutral-0: #030712;
+  --color-neutral-50: #111827;
+  --color-neutral-100: #1f2937;
+  --color-neutral-200: #374151;
+  --color-neutral-300: #4b5563;
+  --color-neutral-400: #6b7280;
+  --color-neutral-500: #9ca3af;
+  --color-neutral-600: #d1d5db;
+  --color-neutral-700: #e5e7eb;
+  --color-neutral-800: #f3f4f6;
+  --color-neutral-900: #f9fafb;
+  --color-neutral-950: #ffffff;
+  --color-success-light: #064e3b;
+  --color-success-subtle: #065f46;
+  --color-success-base: #34d399;
+  --color-success-dark: #6ee7b7;
+  --color-success-deeper: #d1fae5;
+  --color-danger-light: #7f1d1d;
+  --color-danger-subtle: #991b1b;
+  --color-danger-base: #f87171;
+  --color-danger-dark: #fca5a5;
+  --color-danger-deeper: #fee2e2;
+  --color-warning-light: #78350f;
+  --color-warning-subtle: #92400e;
+  --color-warning-base: #fbbf24;
+  --color-warning-dark: #fcd34d;
+  --color-warning-deeper: #fef3c7;
+  --color-info-light: #1e3a5f;
+  --color-info-subtle: #1e40af;
+  --color-info-base: #60a5fa;
+  --color-info-dark: #93c5fd;
+  --color-info-deeper: #dbeafe;
+  --color-background: #0b0f19;
+  --color-surface: #131826;
+  --color-surfaceRaised: #1c2333;
+  --color-border: #2a3143;
+  --color-borderFocus: #6b7280;
+  --color-text: #f3f4f6;
+  --color-textMuted: #9ca3af;
+  --color-textInverse: #111827;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Inter', system-ui, sans-serif;
+  --typography-fontMono: 'JetBrains Mono', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
+  --shadow-sm: 0 2px 6px rgba(0,0,0,0.45);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
+  --shadow-lg: 0 10px 24px rgba(0,0,0,0.55);
+  --shadow-xl: 0 20px 40px rgba(0,0,0,0.6);
+  --shadow-2xl: 0 28px 56px rgba(0,0,0,0.65);
+  --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.4);
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 120ms;
+  --motion-durationNormal: 200ms;
+  --motion-durationSlow: 320ms;
+  --motion-easeStandard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easeEmphasized: cubic-bezier(0.2, 0, 0, 1);
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 1px;
+  --border-widthMedium: 1.5px;
+  --border-widthThick: 2px;
+  --border-style: solid;
+  --effects-backdropBlur: 0px;
+}
+
+/* Glass — Translucent, softly rounded, floating surfaces. Needs a rich background behind it.
+   Generated from src/tokens/themes/glass.ts — do not hand-edit. */
+[data-theme="glass"] {
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #030712;
+  --color-success-light: #d1fae5;
+  --color-success-subtle: #a7f3d0;
+  --color-success-base: #10b981;
+  --color-success-dark: #059669;
+  --color-success-deeper: #064e3b;
+  --color-danger-light: #fee2e2;
+  --color-danger-subtle: #fecaca;
+  --color-danger-base: #ef4444;
+  --color-danger-dark: #dc2626;
+  --color-danger-deeper: #7f1d1d;
+  --color-warning-light: #fef3c7;
+  --color-warning-subtle: #fde68a;
+  --color-warning-base: #f59e0b;
+  --color-warning-dark: #d97706;
+  --color-warning-deeper: #78350f;
+  --color-info-light: #dbeafe;
+  --color-info-subtle: #bfdbfe;
+  --color-info-base: #3b82f6;
+  --color-info-dark: #2563eb;
+  --color-info-deeper: #1e3a5f;
+  --color-background: transparent;
+  --color-surface: rgba(255,255,255,0.55);
+  --color-surfaceRaised: rgba(255,255,255,0.75);
+  --color-border: rgba(255,255,255,0.35);
+  --color-borderFocus: #9ca3af;
+  --color-text: #111827;
+  --color-textMuted: rgba(17,24,39,0.65);
+  --color-textInverse: #ffffff;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 22px;
+  --radius-xl: 28px;
+  --radius-2xl: 36px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Inter', system-ui, sans-serif;
+  --typography-fontMono: 'JetBrains Mono', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: 0 2px 8px rgba(0,0,0,0.06);
+  --shadow-sm: 0 4px 16px rgba(0,0,0,0.08);
+  --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
+  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
+  --shadow-xl: 0 24px 64px rgba(0,0,0,0.14);
+  --shadow-2xl: 0 32px 80px rgba(0,0,0,0.18);
+  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.4);
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 160ms;
+  --motion-durationNormal: 260ms;
+  --motion-durationSlow: 400ms;
+  --motion-easeStandard: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --motion-easeEmphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 1px;
+  --border-widthMedium: 1px;
+  --border-widthThick: 1.5px;
+  --border-style: solid;
+  --effects-backdropBlur: 16px;
+}
+
+/* Dark Glass — Translucent glass panels floating over a dark background.
+   Generated from src/tokens/themes/dark-glass.ts — do not hand-edit. */
+[data-theme="dark-glass"] {
+  --color-neutral-0: #030712;
+  --color-neutral-50: #111827;
+  --color-neutral-100: #1f2937;
+  --color-neutral-200: #374151;
+  --color-neutral-300: #4b5563;
+  --color-neutral-400: #6b7280;
+  --color-neutral-500: #9ca3af;
+  --color-neutral-600: #d1d5db;
+  --color-neutral-700: #e5e7eb;
+  --color-neutral-800: #f3f4f6;
+  --color-neutral-900: #f9fafb;
+  --color-neutral-950: #ffffff;
+  --color-success-light: #064e3b;
+  --color-success-subtle: #065f46;
+  --color-success-base: #34d399;
+  --color-success-dark: #6ee7b7;
+  --color-success-deeper: #d1fae5;
+  --color-danger-light: #7f1d1d;
+  --color-danger-subtle: #991b1b;
+  --color-danger-base: #f87171;
+  --color-danger-dark: #fca5a5;
+  --color-danger-deeper: #fee2e2;
+  --color-warning-light: #78350f;
+  --color-warning-subtle: #92400e;
+  --color-warning-base: #fbbf24;
+  --color-warning-dark: #fcd34d;
+  --color-warning-deeper: #fef3c7;
+  --color-info-light: #1e3a5f;
+  --color-info-subtle: #1e40af;
+  --color-info-base: #60a5fa;
+  --color-info-dark: #93c5fd;
+  --color-info-deeper: #dbeafe;
+  --color-background: #05070d;
+  --color-surface: rgba(255,255,255,0.06);
+  --color-surfaceRaised: rgba(255,255,255,0.10);
+  --color-border: rgba(255,255,255,0.12);
+  --color-borderFocus: #6b7280;
+  --color-text: #f3f4f6;
+  --color-textMuted: #9ca3af;
+  --color-textInverse: #111827;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 22px;
+  --radius-xl: 28px;
+  --radius-2xl: 36px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Inter', system-ui, sans-serif;
+  --typography-fontMono: 'JetBrains Mono', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: 0 2px 8px rgba(0,0,0,0.5);
+  --shadow-sm: 0 4px 16px rgba(0,0,0,0.55);
+  --shadow-md: 0 8px 32px rgba(0,0,0,0.6);
+  --shadow-lg: 0 16px 48px rgba(0,0,0,0.65);
+  --shadow-xl: 0 24px 64px rgba(0,0,0,0.7);
+  --shadow-2xl: 0 32px 80px rgba(0,0,0,0.75);
+  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.08);
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 160ms;
+  --motion-durationNormal: 260ms;
+  --motion-durationSlow: 400ms;
+  --motion-easeStandard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easeEmphasized: cubic-bezier(0.2, 0, 0, 1);
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 1px;
+  --border-widthMedium: 1.5px;
+  --border-widthThick: 2px;
+  --border-style: solid;
+  --effects-backdropBlur: 18px;
+}
+
+/* Minimalism — Reduced to essentials — thin borders, flat surfaces, no shadow, tight radius.
+   Generated from src/tokens/themes/minimalism.ts — do not hand-edit. */
+[data-theme="minimalism"] {
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #030712;
+  --color-success-light: #d1fae5;
+  --color-success-subtle: #a7f3d0;
+  --color-success-base: #10b981;
+  --color-success-dark: #059669;
+  --color-success-deeper: #064e3b;
+  --color-danger-light: #fee2e2;
+  --color-danger-subtle: #fecaca;
+  --color-danger-base: #ef4444;
+  --color-danger-dark: #dc2626;
+  --color-danger-deeper: #7f1d1d;
+  --color-warning-light: #fef3c7;
+  --color-warning-subtle: #fde68a;
+  --color-warning-base: #f59e0b;
+  --color-warning-dark: #d97706;
+  --color-warning-deeper: #78350f;
+  --color-info-light: #dbeafe;
+  --color-info-subtle: #bfdbfe;
+  --color-info-base: #3b82f6;
+  --color-info-dark: #2563eb;
+  --color-info-deeper: #1e3a5f;
+  --color-background: #ffffff;
+  --color-surface: #ffffff;
+  --color-surfaceRaised: #ffffff;
+  --color-border: #e2e2e2;
+  --color-borderFocus: #9ca3af;
+  --color-text: #111827;
+  --color-textMuted: #6b7280;
+  --color-textInverse: #ffffff;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 6px;
+  --radius-2xl: 8px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Inter', system-ui, sans-serif;
+  --typography-fontMono: 'JetBrains Mono', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-xl: none;
+  --shadow-2xl: none;
+  --shadow-inner: none;
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 120ms;
+  --motion-durationNormal: 200ms;
+  --motion-durationSlow: 320ms;
+  --motion-easeStandard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easeEmphasized: cubic-bezier(0.2, 0, 0, 1);
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 1px;
+  --border-widthMedium: 1px;
+  --border-widthThick: 1px;
+  --border-style: solid;
+  --effects-backdropBlur: 0px;
+}
+
+/* Brutalism — Raw, unstyled web aesthetic — square corners, zero shadow, monospace type.
+   Generated from src/tokens/themes/brutalism.ts — do not hand-edit. */
+[data-theme="brutalism"] {
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #030712;
+  --color-success-light: #d1fae5;
+  --color-success-subtle: #a7f3d0;
+  --color-success-base: #10b981;
+  --color-success-dark: #059669;
+  --color-success-deeper: #064e3b;
+  --color-danger-light: #fee2e2;
+  --color-danger-subtle: #fecaca;
+  --color-danger-base: #ef4444;
+  --color-danger-dark: #dc2626;
+  --color-danger-deeper: #7f1d1d;
+  --color-warning-light: #fef3c7;
+  --color-warning-subtle: #fde68a;
+  --color-warning-base: #f59e0b;
+  --color-warning-dark: #d97706;
+  --color-warning-deeper: #78350f;
+  --color-info-light: #dbeafe;
+  --color-info-subtle: #bfdbfe;
+  --color-info-base: #3b82f6;
+  --color-info-dark: #2563eb;
+  --color-info-deeper: #1e3a5f;
+  --color-background: #ffffff;
+  --color-surface: #ffffff;
+  --color-surfaceRaised: #ffffff;
+  --color-border: #000000;
+  --color-borderFocus: #ff0000;
+  --color-text: #000000;
+  --color-textMuted: #6b7280;
+  --color-textInverse: #ffffff;
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+  --radius-2xl: 0px;
+  --radius-full: 0px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Courier New', monospace;
+  --typography-fontMono: 'Courier New', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-xl: none;
+  --shadow-2xl: none;
+  --shadow-inner: none;
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 0ms;
+  --motion-durationNormal: 0ms;
+  --motion-durationSlow: 0ms;
+  --motion-easeStandard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easeEmphasized: cubic-bezier(0.2, 0, 0, 1);
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 1px;
+  --border-widthMedium: 2px;
+  --border-widthThick: 3px;
+  --border-style: solid;
+  --effects-backdropBlur: 0px;
+}
+
+/* Neo Brutalism — Bold black borders, flat offset shadows, saturated color blocks.
+   Generated from src/tokens/themes/neobrutalism.ts — do not hand-edit. */
+[data-theme="neobrutalism"] {
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #030712;
+  --color-success-light: #d1fae5;
+  --color-success-subtle: #a7f3d0;
+  --color-success-base: #10b981;
+  --color-success-dark: #059669;
+  --color-success-deeper: #064e3b;
+  --color-danger-light: #fee2e2;
+  --color-danger-subtle: #fecaca;
+  --color-danger-base: #ef4444;
+  --color-danger-dark: #dc2626;
+  --color-danger-deeper: #7f1d1d;
+  --color-warning-light: #fef3c7;
+  --color-warning-subtle: #fde68a;
+  --color-warning-base: #f59e0b;
+  --color-warning-dark: #d97706;
+  --color-warning-deeper: #78350f;
+  --color-info-light: #dbeafe;
+  --color-info-subtle: #bfdbfe;
+  --color-info-base: #3b82f6;
+  --color-info-dark: #2563eb;
+  --color-info-deeper: #1e3a5f;
+  --color-background: #fef3c7;
+  --color-surface: #ffffff;
+  --color-surfaceRaised: #ffffff;
+  --color-border: #000000;
+  --color-borderFocus: #000000;
+  --color-text: #111827;
+  --color-textMuted: #6b7280;
+  --color-textInverse: #ffffff;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 10px;
+  --radius-2xl: 12px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Inter', system-ui, sans-serif;
+  --typography-fontMono: 'JetBrains Mono', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: 2px 2px 0 #000000;
+  --shadow-sm: 3px 3px 0 #000000;
+  --shadow-md: 4px 4px 0 #000000;
+  --shadow-lg: 6px 6px 0 #000000;
+  --shadow-xl: 8px 8px 0 #000000;
+  --shadow-2xl: 10px 10px 0 #000000;
+  --shadow-inner: inset 2px 2px 0 #000000;
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 80ms;
+  --motion-durationNormal: 140ms;
+  --motion-durationSlow: 200ms;
+  --motion-easeStandard: linear;
+  --motion-easeEmphasized: linear;
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 2px;
+  --border-widthMedium: 3px;
+  --border-widthThick: 4px;
+  --border-style: solid;
+  --effects-backdropBlur: 0px;
+}
+
+/* Cyberpunk — Neon-on-black, glowing edges, high-saturation magenta/cyan accents.
+   Generated from src/tokens/themes/cyberpunk.ts — do not hand-edit. */
+[data-theme="cyberpunk"] {
+  --color-neutral-0: #030712;
+  --color-neutral-50: #111827;
+  --color-neutral-100: #1f2937;
+  --color-neutral-200: #374151;
+  --color-neutral-300: #4b5563;
+  --color-neutral-400: #6b7280;
+  --color-neutral-500: #9ca3af;
+  --color-neutral-600: #d1d5db;
+  --color-neutral-700: #e5e7eb;
+  --color-neutral-800: #f3f4f6;
+  --color-neutral-900: #f9fafb;
+  --color-neutral-950: #ffffff;
+  --color-success-light: #064e3b;
+  --color-success-subtle: #065f46;
+  --color-success-base: #34d399;
+  --color-success-dark: #6ee7b7;
+  --color-success-deeper: #d1fae5;
+  --color-danger-light: #7f1d1d;
+  --color-danger-subtle: #991b1b;
+  --color-danger-base: #f87171;
+  --color-danger-dark: #fca5a5;
+  --color-danger-deeper: #fee2e2;
+  --color-warning-light: #78350f;
+  --color-warning-subtle: #92400e;
+  --color-warning-base: #fbbf24;
+  --color-warning-dark: #fcd34d;
+  --color-warning-deeper: #fef3c7;
+  --color-info-light: #1e3a5f;
+  --color-info-subtle: #1e40af;
+  --color-info-base: #60a5fa;
+  --color-info-dark: #93c5fd;
+  --color-info-deeper: #dbeafe;
+  --color-background: #0a0014;
+  --color-surface: #12001f;
+  --color-surfaceRaised: #1a0230;
+  --color-border: #ff2bd6;
+  --color-borderFocus: #00f0ff;
+  --color-text: #e8faff;
+  --color-textMuted: #9a8cc9;
+  --color-textInverse: #111827;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+  --radius-2xl: 10px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Inter', system-ui, sans-serif;
+  --typography-fontMono: 'JetBrains Mono', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: 0 0 6px rgba(255,43,214,0.5);
+  --shadow-sm: 0 0 12px rgba(255,43,214,0.55);
+  --shadow-md: 0 0 20px rgba(0,240,255,0.5);
+  --shadow-lg: 0 0 32px rgba(0,240,255,0.55);
+  --shadow-xl: 0 0 48px rgba(255,43,214,0.6);
+  --shadow-2xl: 0 0 64px rgba(0,240,255,0.65);
+  --shadow-inner: inset 0 0 8px rgba(255,43,214,0.4);
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 120ms;
+  --motion-durationNormal: 200ms;
+  --motion-durationSlow: 320ms;
+  --motion-easeStandard: cubic-bezier(0.83,0,0.17,1);
+  --motion-easeEmphasized: cubic-bezier(0.9,0,0.1,1);
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 1px;
+  --border-widthMedium: 1.5px;
+  --border-widthThick: 2px;
+  --border-style: solid;
+  --effects-backdropBlur: 0px;
+}
+
+/* Gradient — Vibrant, colorful transitions across surfaces and accents.
+   Generated from src/tokens/themes/gradient.ts — do not hand-edit. */
+[data-theme="gradient"] {
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #030712;
+  --color-success-light: #d1fae5;
+  --color-success-subtle: #a7f3d0;
+  --color-success-base: #10b981;
+  --color-success-dark: #059669;
+  --color-success-deeper: #064e3b;
+  --color-danger-light: #fee2e2;
+  --color-danger-subtle: #fecaca;
+  --color-danger-base: #ef4444;
+  --color-danger-dark: #dc2626;
+  --color-danger-deeper: #7f1d1d;
+  --color-warning-light: #fef3c7;
+  --color-warning-subtle: #fde68a;
+  --color-warning-base: #f59e0b;
+  --color-warning-dark: #d97706;
+  --color-warning-deeper: #78350f;
+  --color-info-light: #dbeafe;
+  --color-info-subtle: #bfdbfe;
+  --color-info-base: #3b82f6;
+  --color-info-dark: #2563eb;
+  --color-info-deeper: #1e3a5f;
+  --color-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --color-surface: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.75));
+  --color-surfaceRaised: #ffffff;
+  --color-border: rgba(118,75,162,0.25);
+  --color-borderFocus: #764ba2;
+  --color-text: #111827;
+  --color-textMuted: #6b7280;
+  --color-textInverse: #ffffff;
+  --radius-sm: 12px;
+  --radius-md: 18px;
+  --radius-lg: 24px;
+  --radius-xl: 32px;
+  --radius-2xl: 40px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Inter', system-ui, sans-serif;
+  --typography-fontMono: 'JetBrains Mono', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: 0 2px 10px rgba(118,75,162,0.15);
+  --shadow-sm: 0 4px 20px rgba(118,75,162,0.18);
+  --shadow-md: 0 8px 30px rgba(118,75,162,0.22);
+  --shadow-lg: 0 16px 40px rgba(118,75,162,0.26);
+  --shadow-xl: 0 24px 56px rgba(118,75,162,0.3);
+  --shadow-2xl: 0 32px 72px rgba(118,75,162,0.35);
+  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.5);
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 120ms;
+  --motion-durationNormal: 240ms;
+  --motion-durationSlow: 380ms;
+  --motion-easeStandard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easeEmphasized: cubic-bezier(0.2, 0, 0, 1);
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 1px;
+  --border-widthMedium: 1.5px;
+  --border-widthThick: 2px;
+  --border-style: solid;
+  --effects-backdropBlur: 0px;
+}
+
+/* Material — Google Material Design-inspired elevation shadows and motion curves.
+   Generated from src/tokens/themes/material.ts — do not hand-edit. */
+[data-theme="material"] {
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #030712;
+  --color-success-light: #d1fae5;
+  --color-success-subtle: #a7f3d0;
+  --color-success-base: #10b981;
+  --color-success-dark: #059669;
+  --color-success-deeper: #064e3b;
+  --color-danger-light: #fee2e2;
+  --color-danger-subtle: #fecaca;
+  --color-danger-base: #ef4444;
+  --color-danger-dark: #dc2626;
+  --color-danger-deeper: #7f1d1d;
+  --color-warning-light: #fef3c7;
+  --color-warning-subtle: #fde68a;
+  --color-warning-base: #f59e0b;
+  --color-warning-dark: #d97706;
+  --color-warning-deeper: #78350f;
+  --color-info-light: #dbeafe;
+  --color-info-subtle: #bfdbfe;
+  --color-info-base: #3b82f6;
+  --color-info-dark: #2563eb;
+  --color-info-deeper: #1e3a5f;
+  --color-background: #fafafa;
+  --color-surface: #ffffff;
+  --color-surfaceRaised: #ffffff;
+  --color-border: #e5e7eb;
+  --color-borderFocus: #9ca3af;
+  --color-text: #111827;
+  --color-textMuted: #6b7280;
+  --color-textInverse: #ffffff;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 28px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Roboto', system-ui, sans-serif;
+  --typography-fontMono: 'JetBrains Mono', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: 0 1px 2px rgba(0,0,0,0.24);
+  --shadow-sm: 0 1px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.12);
+  --shadow-md: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  --shadow-lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  --shadow-xl: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+  --shadow-2xl: 0 19px 38px rgba(0,0,0,0.3), 0 15px 12px rgba(0,0,0,0.22);
+  --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.12);
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 120ms;
+  --motion-durationNormal: 200ms;
+  --motion-durationSlow: 320ms;
+  --motion-easeStandard: cubic-bezier(0.4,0,0.2,1);
+  --motion-easeEmphasized: cubic-bezier(0.0,0,0.2,1);
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 1px;
+  --border-widthMedium: 1.5px;
+  --border-widthThick: 2px;
+  --border-style: solid;
+  --effects-backdropBlur: 0px;
+}
+
+/* Skeuomorphism — Realistic depth — soft embossed surfaces mimicking physical material.
+   Generated from src/tokens/themes/skeuomorphism.ts — do not hand-edit. */
+[data-theme="skeuomorphism"] {
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #030712;
+  --color-success-light: #d1fae5;
+  --color-success-subtle: #a7f3d0;
+  --color-success-base: #10b981;
+  --color-success-dark: #059669;
+  --color-success-deeper: #064e3b;
+  --color-danger-light: #fee2e2;
+  --color-danger-subtle: #fecaca;
+  --color-danger-base: #ef4444;
+  --color-danger-dark: #dc2626;
+  --color-danger-deeper: #7f1d1d;
+  --color-warning-light: #fef3c7;
+  --color-warning-subtle: #fde68a;
+  --color-warning-base: #f59e0b;
+  --color-warning-dark: #d97706;
+  --color-warning-deeper: #78350f;
+  --color-info-light: #dbeafe;
+  --color-info-subtle: #bfdbfe;
+  --color-info-base: #3b82f6;
+  --color-info-dark: #2563eb;
+  --color-info-deeper: #1e3a5f;
+  --color-background: #e8e4da;
+  --color-surface: #f0ece2;
+  --color-surfaceRaised: #f7f4ec;
+  --color-border: #c9c2b0;
+  --color-borderFocus: #9ca3af;
+  --color-text: #3a3226;
+  --color-textMuted: #6b7280;
+  --color-textInverse: #ffffff;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-2xl: 32px;
+  --radius-full: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --typography-fontSans: 'Inter', system-ui, sans-serif;
+  --typography-fontMono: 'JetBrains Mono', monospace;
+  --typography-sizeXs: 12px;
+  --typography-sizeSm: 14px;
+  --typography-sizeMd: 16px;
+  --typography-sizeLg: 18px;
+  --typography-sizeXl: 22px;
+  --typography-weightNormal: 400;
+  --typography-weightMedium: 500;
+  --typography-weightBold: 700;
+  --typography-lineHeightTight: 1.2;
+  --typography-lineHeightNormal: 1.5;
+  --shadow-xs: inset 0 1px 1px rgba(255,255,255,0.8), 0 1px 3px rgba(58,50,38,0.25);
+  --shadow-sm: inset 0 1px 1px rgba(255,255,255,0.8), 0 2px 6px rgba(58,50,38,0.28);
+  --shadow-md: inset 0 1px 1px rgba(255,255,255,0.8), 0 4px 10px rgba(58,50,38,0.3);
+  --shadow-lg: inset 0 1px 1px rgba(255,255,255,0.8), 0 8px 18px rgba(58,50,38,0.32);
+  --shadow-xl: inset 0 1px 1px rgba(255,255,255,0.8), 0 14px 28px rgba(58,50,38,0.35);
+  --shadow-2xl: inset 0 1px 1px rgba(255,255,255,0.8), 0 20px 40px rgba(58,50,38,0.38);
+  --shadow-inner: inset 0 2px 4px rgba(58,50,38,0.3);
+  --elevation-dropdown: 1000;
+  --elevation-popover: 1100;
+  --elevation-modal: 1200;
+  --elevation-toast: 1300;
+  --elevation-tooltip: 1400;
+  --motion-durationFast: 120ms;
+  --motion-durationNormal: 220ms;
+  --motion-durationSlow: 320ms;
+  --motion-easeStandard: cubic-bezier(0.34,1.56,0.64,1);
+  --motion-easeEmphasized: cubic-bezier(0.2, 0, 0, 1);
+  --motion-durationInstant: 0ms;
+  --border-widthThin: 1px;
+  --border-widthMedium: 1.5px;
+  --border-widthThick: 2px;
+  --border-style: solid;
+  --effects-backdropBlur: 0px;
+}
+
+/* Accent: Indigo
+   Generated from src/tokens/accents/indigo.ts — do not hand-edit. */
+[data-accent="indigo"] {
+  --color-brand-50: #f0f4ff;
+  --color-brand-100: #e0e8ff;
+  --color-brand-200: #c7d5fe;
+  --color-brand-300: #a5b4fc;
+  --color-brand-400: #818cf8;
+  --color-brand-500: #6366f1;
+  --color-brand-600: #4f46e5;
+  --color-brand-700: #4338ca;
+  --color-brand-800: #3730a3;
+  --color-brand-900: #312e81;
+  --color-brand-onAccent: #000000;
+}
+
+/* Accent: Violet
+   Generated from src/tokens/accents/violet.ts — do not hand-edit. */
+[data-accent="violet"] {
+  --color-brand-50: #faf5ff;
+  --color-brand-100: #f3e8ff;
+  --color-brand-200: #e9d5ff;
+  --color-brand-300: #d8b4fe;
+  --color-brand-400: #c084fc;
+  --color-brand-500: #a855f7;
+  --color-brand-600: #9333ea;
+  --color-brand-700: #7e22ce;
+  --color-brand-800: #6b21a8;
+  --color-brand-900: #581c87;
+  --color-brand-onAccent: #000000;
+}
+
+/* Accent: Teal
+   Generated from src/tokens/accents/teal.ts — do not hand-edit. */
+[data-accent="teal"] {
+  --color-brand-50: #f0fdfa;
+  --color-brand-100: #ccfbf1;
+  --color-brand-200: #99f6e4;
+  --color-brand-300: #5eead4;
+  --color-brand-400: #2dd4bf;
+  --color-brand-500: #14b8a6;
+  --color-brand-600: #0d9488;
+  --color-brand-700: #0f766e;
+  --color-brand-800: #115e59;
+  --color-brand-900: #134e4a;
+  --color-brand-onAccent: #000000;
+}
+
+/* Accent: Rose
+   Generated from src/tokens/accents/rose.ts — do not hand-edit. */
+[data-accent="rose"] {
+  --color-brand-50: #fff1f2;
+  --color-brand-100: #ffe4e6;
+  --color-brand-200: #fecdd3;
+  --color-brand-300: #fda4af;
+  --color-brand-400: #fb7185;
+  --color-brand-500: #f43f5e;
+  --color-brand-600: #e11d48;
+  --color-brand-700: #be123c;
+  --color-brand-800: #9f1239;
+  --color-brand-900: #881337;
+  --color-brand-onAccent: #000000;
+}
+
+/* Accent: Amber
+   Generated from src/tokens/accents/amber.ts — do not hand-edit. */
+[data-accent="amber"] {
+  --color-brand-50: #fffbeb;
+  --color-brand-100: #fef3c7;
+  --color-brand-200: #fde68a;
+  --color-brand-300: #fcd34d;
+  --color-brand-400: #fbbf24;
+  --color-brand-500: #f59e0b;
+  --color-brand-600: #d97706;
+  --color-brand-700: #b45309;
+  --color-brand-800: #92400e;
+  --color-brand-900: #78350f;
+  --color-brand-onAccent: #000000;
+}
+
+/* Accent: Emerald
+   Generated from src/tokens/accents/emerald.ts — do not hand-edit. */
+[data-accent="emerald"] {
+  --color-brand-50: #ecfdf5;
+  --color-brand-100: #d1fae5;
+  --color-brand-200: #a7f3d0;
+  --color-brand-300: #6ee7b7;
+  --color-brand-400: #34d399;
+  --color-brand-500: #10b981;
+  --color-brand-600: #059669;
+  --color-brand-700: #047857;
+  --color-brand-800: #065f46;
+  --color-brand-900: #064e3b;
+  --color-brand-onAccent: #000000;
+}
+
+/* Accent: Copper
+   Generated from src/tokens/accents/copper.ts — do not hand-edit. */
+[data-accent="copper"] {
+  --color-brand-50: #fdf6ec;
+  --color-brand-100: #faebd2;
+  --color-brand-200: #f3d3a0;
+  --color-brand-300: #e9b56b;
+  --color-brand-400: #d99a45;
+  --color-brand-500: #b9752c;
+  --color-brand-600: #9c5d24;
+  --color-brand-700: #7d4a1f;
+  --color-brand-800: #623a1c;
+  --color-brand-900: #4e2f19;
+  --color-brand-onAccent: #000000;
+}
+
+/* Accent: Graphite
+   Generated from src/tokens/accents/graphite.ts — do not hand-edit. */
+[data-accent="graphite"] {
+  --color-brand-50: #fafafa;
+  --color-brand-100: #f0f0f0;
+  --color-brand-200: #e0e0e0;
+  --color-brand-300: #c7c7c7;
+  --color-brand-400: #a3a3a3;
+  --color-brand-500: #525252;
+  --color-brand-600: #404040;
+  --color-brand-700: #262626;
+  --color-brand-800: #171717;
+  --color-brand-900: #0a0a0a;
+  --color-brand-onAccent: #ffffff;
+}
+
+/* Accent: Magenta
+   Generated from src/tokens/accents/magenta.ts — do not hand-edit. */
+[data-accent="magenta"] {
+  --color-brand-50: #ffe0fb;
+  --color-brand-100: #ffb3f5;
+  --color-brand-200: #ff80ee;
+  --color-brand-300: #ff4de6;
+  --color-brand-400: #ff26e0;
+  --color-brand-500: #ff00d9;
+  --color-brand-600: #e600c4;
+  --color-brand-700: #cc00af;
+  --color-brand-800: #b3009a;
+  --color-brand-900: #800070;
+  --color-brand-onAccent: #000000;
+}