@reopt-ai/opt-ui 1.4.1

package/dist/theme/presets/mono-dark.css

@@ -0,0 +1,354 @@
+/* AUTOGENERATED by scripts/gen-theme-css.ts — DO NOT EDIT.
+   Edit the source token map in presets/tokens.ts and re-run:
+     bun run --filter @reopt-ai/opt-ui gen:theme-css
+*/
+
+/* ── Mono Dark Theme ── */
+
+[data-theme="mono-dark"] {
+  /* Surface */
+  --opt-surface: #ffffff;
+  --opt-surface-raised: #ffffff;
+  --opt-surface-overlay: #ffffff;
+  --opt-surface-input: hsl(220 15% 95%);
+  --opt-surface-input-hover: hsl(220 15% 92%);
+  --opt-surface-inset: hsl(220 12% 97%);
+
+  /* Accent */
+  --opt-accent: hsl(190 100% 38%);
+  --opt-accent-hover: hsl(190 100% 32%);
+  --opt-accent-active: hsl(190 100% 26%);
+  --opt-accent-subtle: hsl(190 100% 38% / 0.08);
+  --opt-accent-fg: #ffffff;
+
+  /* Text */
+  --opt-text-body-size: var(--opt-font-size-sm);
+  --opt-text-body-weight: var(--opt-font-weight-normal);
+  --opt-text-body-leading: 1.5;
+  --opt-text-label-size: var(--opt-font-size-sm);
+  --opt-text-label-weight: var(--opt-font-weight-medium);
+  --opt-text-label-leading: 1.25;
+  --opt-text-supporting-size: var(--opt-font-size-xs);
+  --opt-text-supporting-weight: var(--opt-font-weight-normal);
+  --opt-text-supporting-leading: 1.5;
+  --opt-text-code-size: var(--opt-font-size-sm);
+  --opt-text-code-weight: var(--opt-font-weight-normal);
+  --opt-text-code-leading: 1.5;
+  --opt-text-heading-1-size: var(--opt-font-size-3xl);
+  --opt-text-heading-1-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-1-leading: 1.2;
+  --opt-text-heading-2-size: var(--opt-font-size-2xl);
+  --opt-text-heading-2-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-2-leading: 1.25;
+  --opt-text-heading-3-size: var(--opt-font-size-xl);
+  --opt-text-heading-3-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-3-leading: 1.3;
+  --opt-text-heading-4-size: var(--opt-font-size-lg);
+  --opt-text-heading-4-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-4-leading: 1.35;
+  --opt-text-heading-5-size: var(--opt-font-size-base);
+  --opt-text-heading-5-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-5-leading: 1.4;
+  --opt-text-heading-6-size: var(--opt-font-size-sm);
+  --opt-text-heading-6-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-6-leading: 1.5;
+  --opt-text-display-1-size: var(--opt-font-size-4xl);
+  --opt-text-display-1-weight: var(--opt-font-weight-normal);
+  --opt-text-display-1-leading: 1.1;
+  --opt-text-display-2-size: var(--opt-font-size-3xl);
+  --opt-text-display-2-weight: var(--opt-font-weight-normal);
+  --opt-text-display-2-leading: 1.15;
+  --opt-text-display-3-size: var(--opt-font-size-2xl);
+  --opt-text-display-3-weight: var(--opt-font-weight-normal);
+  --opt-text-display-3-leading: 1.2;
+  --opt-text: hsl(220 15% 12%);
+  --opt-text-secondary: hsl(220 10% 38%);
+  --opt-text-tertiary: hsl(220 8% 52%);
+
+  /* Border */
+  --opt-border-width: 1px;
+  --opt-border: hsl(220 12% 88%);
+  --opt-border-hover: hsl(220 12% 70%);
+  --opt-border-subtle: hsl(220 12% 93%);
+
+  /* Focus */
+  --opt-ring: hsl(190 100% 38%);
+  --opt-ring-offset: #ffffff;
+
+  /* Background */
+  --opt-bg: hsl(220 15% 98%);
+  --opt-bg-subtle: hsl(220 15% 95%);
+  --opt-bg-muted: hsl(220 15% 90%);
+
+  /* Status */
+  --opt-success: hsl(155 80% 38%);
+  --opt-success-subtle: hsl(155 60% 94%);
+  --opt-success-fg: hsl(155 80% 24%);
+  --opt-warning: hsl(38 95% 48%);
+  --opt-warning-subtle: hsl(45 90% 93%);
+  --opt-warning-fg: hsl(38 95% 30%);
+  --opt-danger: hsl(355 80% 52%);
+  --opt-danger-subtle: hsl(355 75% 95%);
+  --opt-danger-fg: hsl(355 80% 36%);
+  --opt-info: hsl(190 100% 38%);
+  --opt-info-subtle: hsl(190 90% 94%);
+  --opt-info-fg: hsl(190 100% 26%);
+
+  /* Chart */
+  --opt-chart-6: color-mix(in oklch, var(--opt-chart-1) 62%, var(--opt-chart-2));
+  --opt-chart-7: color-mix(in oklch, var(--opt-chart-2) 62%, var(--opt-chart-3));
+  --opt-chart-8: color-mix(in oklch, var(--opt-chart-3) 62%, var(--opt-chart-4));
+  --opt-chart-9: color-mix(in oklch, var(--opt-chart-4) 62%, var(--opt-chart-5));
+  --opt-chart-10: color-mix(in oklch, var(--opt-chart-5) 62%, var(--opt-chart-1));
+  --opt-chart-11: color-mix(in oklch, var(--opt-chart-1) 55%, var(--opt-chart-3));
+  --opt-chart-12: color-mix(in oklch, var(--opt-chart-2) 55%, var(--opt-chart-4));
+  --opt-chart-13: color-mix(in oklch, var(--opt-chart-3) 55%, var(--opt-chart-5));
+  --opt-chart-14: color-mix(in oklch, var(--opt-chart-4) 55%, var(--opt-chart-1));
+  --opt-chart-15: color-mix(in oklch, var(--opt-chart-5) 55%, var(--opt-chart-2));
+  --opt-chart-16: color-mix(in oklch, var(--opt-chart-1) 35%, var(--opt-chart-4));
+  --opt-chart-sequential-1: color-mix(in oklch, var(--opt-chart-1) 18%, var(--opt-surface));
+  --opt-chart-sequential-2: color-mix(in oklch, var(--opt-chart-1) 36%, var(--opt-surface));
+  --opt-chart-sequential-3: color-mix(in oklch, var(--opt-chart-1) 54%, var(--opt-surface));
+  --opt-chart-sequential-4: color-mix(in oklch, var(--opt-chart-1) 76%, var(--opt-surface));
+  --opt-chart-sequential-5: var(--opt-chart-1);
+  --opt-chart-diverging-negative: var(--opt-danger);
+  --opt-chart-diverging-neutral: var(--opt-text-tertiary);
+  --opt-chart-diverging-positive: var(--opt-success);
+  --opt-chart-1: hsl(190 100% 42%);
+  --opt-chart-2: hsl(280 90% 60%);
+  --opt-chart-3: hsl(155 80% 42%);
+  --opt-chart-4: hsl(38 95% 48%);
+  --opt-chart-5: hsl(330 85% 55%);
+
+  /* Radius */
+  --opt-radius-sm: 0.125rem;
+  --opt-radius-md: 0.25rem;
+  --opt-radius-lg: 0.375rem;
+  --opt-radius-xl: 0.5rem;
+
+  /* Shadow */
+  --opt-shadow-sm: 0 1px 2px rgba(0, 90, 130, 0.05);
+  --opt-shadow-md: 0 2px 5px rgba(0, 90, 130, 0.07);
+  --opt-shadow-lg: 0 6px 14px rgba(0, 90, 130, 0.09);
+
+  /* Spacing */
+  --opt-space-0: 0px;
+  --opt-space-0-5: 0.125rem;
+  --opt-space-1: 0.25rem;
+  --opt-space-1-5: 0.375rem;
+  --opt-space-2: 0.5rem;
+  --opt-space-3: 0.75rem;
+  --opt-space-4: 1rem;
+  --opt-space-5: 1.25rem;
+  --opt-space-6: 1.5rem;
+  --opt-space-8: 2rem;
+  --opt-space-section: 0.75rem;
+  --opt-space-group: 0.5rem;
+  --opt-space-element: 0.25rem;
+
+  /* Typography */
+  --opt-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --opt-font-size-xs: 0.75rem;
+  --opt-font-size-sm: 0.875rem;
+  --opt-font-size-base: 1rem;
+  --opt-font-size-lg: 1.125rem;
+  --opt-font-size-xl: 1.25rem;
+  --opt-font-size-2xl: 1.5rem;
+  --opt-font-size-3xl: 1.875rem;
+  --opt-font-size-4xl: 2.25rem;
+  --opt-font-weight-normal: 400;
+  --opt-font-weight-medium: 500;
+  --opt-font-weight-semibold: 600;
+  --opt-font-weight-bold: 700;
+  --opt-font-heading: var(--font-geist-mono), ui-monospace, monospace;
+  --opt-font-body: var(--font-geist-sans), system-ui, sans-serif;
+  --opt-tracking-heading: 0.02em;
+  --opt-weight-heading: 500;
+
+  /* Other */
+  --opt-control-sm: 2rem;
+  --opt-control-md: 2.5rem;
+  --opt-control-lg: 3rem;
+  --opt-control-padding-sm: 0.75rem;
+  --opt-control-padding-md: 1rem;
+  --opt-control-padding-lg: 1.5rem;
+  --opt-duration-fast: 150ms;
+  --opt-duration-medium: 250ms;
+  --opt-duration-slow: 400ms;
+  --opt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --opt-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+[data-theme="mono-dark-dark"] {
+  /* Surface */
+  --opt-surface: #0a0a0a;
+  --opt-surface-raised: #111111;
+  --opt-surface-overlay: #161616;
+  --opt-surface-input: #050505;
+  --opt-surface-input-hover: #030303;
+  --opt-surface-inset: rgba(0, 200, 255, 0.025);
+
+  /* Accent */
+  --opt-accent: hsl(190 100% 55%);
+  --opt-accent-hover: hsl(190 100% 65%);
+  --opt-accent-active: hsl(190 100% 72%);
+  --opt-accent-subtle: hsl(190 100% 55% / 0.15);
+  --opt-accent-fg: #000000;
+
+  /* Text */
+  --opt-text-body-size: var(--opt-font-size-sm);
+  --opt-text-body-weight: var(--opt-font-weight-normal);
+  --opt-text-body-leading: 1.5;
+  --opt-text-label-size: var(--opt-font-size-sm);
+  --opt-text-label-weight: var(--opt-font-weight-medium);
+  --opt-text-label-leading: 1.25;
+  --opt-text-supporting-size: var(--opt-font-size-xs);
+  --opt-text-supporting-weight: var(--opt-font-weight-normal);
+  --opt-text-supporting-leading: 1.5;
+  --opt-text-code-size: var(--opt-font-size-sm);
+  --opt-text-code-weight: var(--opt-font-weight-normal);
+  --opt-text-code-leading: 1.5;
+  --opt-text-heading-1-size: var(--opt-font-size-3xl);
+  --opt-text-heading-1-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-1-leading: 1.2;
+  --opt-text-heading-2-size: var(--opt-font-size-2xl);
+  --opt-text-heading-2-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-2-leading: 1.25;
+  --opt-text-heading-3-size: var(--opt-font-size-xl);
+  --opt-text-heading-3-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-3-leading: 1.3;
+  --opt-text-heading-4-size: var(--opt-font-size-lg);
+  --opt-text-heading-4-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-4-leading: 1.35;
+  --opt-text-heading-5-size: var(--opt-font-size-base);
+  --opt-text-heading-5-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-5-leading: 1.4;
+  --opt-text-heading-6-size: var(--opt-font-size-sm);
+  --opt-text-heading-6-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-6-leading: 1.5;
+  --opt-text-display-1-size: var(--opt-font-size-4xl);
+  --opt-text-display-1-weight: var(--opt-font-weight-normal);
+  --opt-text-display-1-leading: 1.1;
+  --opt-text-display-2-size: var(--opt-font-size-3xl);
+  --opt-text-display-2-weight: var(--opt-font-weight-normal);
+  --opt-text-display-2-leading: 1.15;
+  --opt-text-display-3-size: var(--opt-font-size-2xl);
+  --opt-text-display-3-weight: var(--opt-font-weight-normal);
+  --opt-text-display-3-leading: 1.2;
+  --opt-text: hsl(220 12% 94%);
+  --opt-text-secondary: hsl(220 10% 64%);
+  --opt-text-tertiary: hsl(220 8% 44%);
+
+  /* Border */
+  --opt-border-width: 1px;
+  --opt-border: rgba(255, 255, 255, 0.1);
+  --opt-border-hover: rgba(255, 255, 255, 0.25);
+  --opt-border-subtle: rgba(255, 255, 255, 0.05);
+
+  /* Focus */
+  --opt-ring: hsl(190 100% 55%);
+  --opt-ring-offset: #0a0a0a;
+
+  /* Background */
+  --opt-bg: #000000;
+  --opt-bg-subtle: #050505;
+  --opt-bg-muted: #0d0d0d;
+
+  /* Status */
+  --opt-success: hsl(150 90% 50%);
+  --opt-success-subtle: hsl(150 90% 50% / 0.15);
+  --opt-success-fg: hsl(150 80% 75%);
+  --opt-warning: hsl(38 100% 55%);
+  --opt-warning-subtle: hsl(38 100% 55% / 0.15);
+  --opt-warning-fg: hsl(48 100% 78%);
+  --opt-danger: hsl(355 90% 60%);
+  --opt-danger-subtle: hsl(355 90% 60% / 0.15);
+  --opt-danger-fg: hsl(355 90% 78%);
+  --opt-info: hsl(190 100% 55%);
+  --opt-info-subtle: hsl(190 100% 55% / 0.15);
+  --opt-info-fg: hsl(190 100% 78%);
+
+  /* Chart */
+  --opt-chart-6: color-mix(in oklch, var(--opt-chart-1) 62%, var(--opt-chart-2));
+  --opt-chart-7: color-mix(in oklch, var(--opt-chart-2) 62%, var(--opt-chart-3));
+  --opt-chart-8: color-mix(in oklch, var(--opt-chart-3) 62%, var(--opt-chart-4));
+  --opt-chart-9: color-mix(in oklch, var(--opt-chart-4) 62%, var(--opt-chart-5));
+  --opt-chart-10: color-mix(in oklch, var(--opt-chart-5) 62%, var(--opt-chart-1));
+  --opt-chart-11: color-mix(in oklch, var(--opt-chart-1) 55%, var(--opt-chart-3));
+  --opt-chart-12: color-mix(in oklch, var(--opt-chart-2) 55%, var(--opt-chart-4));
+  --opt-chart-13: color-mix(in oklch, var(--opt-chart-3) 55%, var(--opt-chart-5));
+  --opt-chart-14: color-mix(in oklch, var(--opt-chart-4) 55%, var(--opt-chart-1));
+  --opt-chart-15: color-mix(in oklch, var(--opt-chart-5) 55%, var(--opt-chart-2));
+  --opt-chart-16: color-mix(in oklch, var(--opt-chart-1) 35%, var(--opt-chart-4));
+  --opt-chart-sequential-1: color-mix(in oklch, var(--opt-chart-1) 18%, var(--opt-surface));
+  --opt-chart-sequential-2: color-mix(in oklch, var(--opt-chart-1) 36%, var(--opt-surface));
+  --opt-chart-sequential-3: color-mix(in oklch, var(--opt-chart-1) 54%, var(--opt-surface));
+  --opt-chart-sequential-4: color-mix(in oklch, var(--opt-chart-1) 76%, var(--opt-surface));
+  --opt-chart-sequential-5: var(--opt-chart-1);
+  --opt-chart-diverging-negative: var(--opt-danger);
+  --opt-chart-diverging-neutral: var(--opt-text-tertiary);
+  --opt-chart-diverging-positive: var(--opt-success);
+  --opt-chart-1: hsl(190 100% 60%);
+  --opt-chart-2: hsl(280 95% 70%);
+  --opt-chart-3: hsl(150 90% 55%);
+  --opt-chart-4: hsl(38 100% 58%);
+  --opt-chart-5: hsl(330 90% 65%);
+
+  /* Radius */
+  --opt-radius-sm: 0.125rem;
+  --opt-radius-md: 0.25rem;
+  --opt-radius-lg: 0.375rem;
+  --opt-radius-xl: 0.5rem;
+
+  /* Shadow */
+  --opt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --opt-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
+  --opt-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.7);
+
+  /* Spacing */
+  --opt-space-0: 0px;
+  --opt-space-0-5: 0.125rem;
+  --opt-space-1: 0.25rem;
+  --opt-space-1-5: 0.375rem;
+  --opt-space-2: 0.5rem;
+  --opt-space-3: 0.75rem;
+  --opt-space-4: 1rem;
+  --opt-space-5: 1.25rem;
+  --opt-space-6: 1.5rem;
+  --opt-space-8: 2rem;
+  --opt-space-section: 0.75rem;
+  --opt-space-group: 0.5rem;
+  --opt-space-element: 0.25rem;
+
+  /* Typography */
+  --opt-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --opt-font-size-xs: 0.75rem;
+  --opt-font-size-sm: 0.875rem;
+  --opt-font-size-base: 1rem;
+  --opt-font-size-lg: 1.125rem;
+  --opt-font-size-xl: 1.25rem;
+  --opt-font-size-2xl: 1.5rem;
+  --opt-font-size-3xl: 1.875rem;
+  --opt-font-size-4xl: 2.25rem;
+  --opt-font-weight-normal: 400;
+  --opt-font-weight-medium: 500;
+  --opt-font-weight-semibold: 600;
+  --opt-font-weight-bold: 700;
+  --opt-font-heading: var(--font-geist-mono), ui-monospace, monospace;
+  --opt-font-body: var(--font-geist-sans), system-ui, sans-serif;
+  --opt-tracking-heading: 0.02em;
+  --opt-weight-heading: 500;
+
+  /* Other */
+  --opt-control-sm: 2rem;
+  --opt-control-md: 2.5rem;
+  --opt-control-lg: 3rem;
+  --opt-control-padding-sm: 0.75rem;
+  --opt-control-padding-md: 1rem;
+  --opt-control-padding-lg: 1.5rem;
+  --opt-duration-fast: 150ms;
+  --opt-duration-medium: 250ms;
+  --opt-duration-slow: 400ms;
+  --opt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --opt-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
+}

package/dist/theme/presets/natural.css

@@ -0,0 +1,181 @@
+/* AUTOGENERATED by scripts/gen-theme-css.ts — DO NOT EDIT.
+   Edit the source token map in presets/tokens.ts and re-run:
+     bun run --filter @reopt-ai/opt-ui gen:theme-css
+*/
+
+/* ── Natural Theme ── */
+/* force-light: no dark variant */
+
+[data-theme="natural"] {
+  /* Surface */
+  --opt-surface: #faf6f0;
+  --opt-surface-raised: #fffdf9;
+  --opt-surface-overlay: #fffdf9;
+  --opt-surface-input: hsl(35 35% 93%);
+  --opt-surface-input-hover: hsl(35 35% 90%);
+  --opt-surface-inset: hsl(35 25% 95%);
+
+  /* Accent */
+  --opt-accent: hsl(155 38% 45%);
+  --opt-accent-hover: hsl(155 38% 38%);
+  --opt-accent-active: hsl(155 38% 32%);
+  --opt-accent-subtle: hsl(155 38% 45% / 0.1);
+  --opt-accent-fg: #ffffff;
+
+  /* Text */
+  --opt-text-body-size: var(--opt-font-size-sm);
+  --opt-text-body-weight: var(--opt-font-weight-normal);
+  --opt-text-body-leading: 1.5;
+  --opt-text-label-size: var(--opt-font-size-sm);
+  --opt-text-label-weight: var(--opt-font-weight-medium);
+  --opt-text-label-leading: 1.25;
+  --opt-text-supporting-size: var(--opt-font-size-xs);
+  --opt-text-supporting-weight: var(--opt-font-weight-normal);
+  --opt-text-supporting-leading: 1.5;
+  --opt-text-code-size: var(--opt-font-size-sm);
+  --opt-text-code-weight: var(--opt-font-weight-normal);
+  --opt-text-code-leading: 1.5;
+  --opt-text-heading-1-size: var(--opt-font-size-3xl);
+  --opt-text-heading-1-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-1-leading: 1.2;
+  --opt-text-heading-2-size: var(--opt-font-size-2xl);
+  --opt-text-heading-2-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-2-leading: 1.25;
+  --opt-text-heading-3-size: var(--opt-font-size-xl);
+  --opt-text-heading-3-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-3-leading: 1.3;
+  --opt-text-heading-4-size: var(--opt-font-size-lg);
+  --opt-text-heading-4-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-4-leading: 1.35;
+  --opt-text-heading-5-size: var(--opt-font-size-base);
+  --opt-text-heading-5-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-5-leading: 1.4;
+  --opt-text-heading-6-size: var(--opt-font-size-sm);
+  --opt-text-heading-6-weight: var(--opt-font-weight-semibold);
+  --opt-text-heading-6-leading: 1.5;
+  --opt-text-display-1-size: var(--opt-font-size-4xl);
+  --opt-text-display-1-weight: var(--opt-font-weight-normal);
+  --opt-text-display-1-leading: 1.1;
+  --opt-text-display-2-size: var(--opt-font-size-3xl);
+  --opt-text-display-2-weight: var(--opt-font-weight-normal);
+  --opt-text-display-2-leading: 1.15;
+  --opt-text-display-3-size: var(--opt-font-size-2xl);
+  --opt-text-display-3-weight: var(--opt-font-weight-normal);
+  --opt-text-display-3-leading: 1.2;
+  --opt-text: hsl(25 15% 18%);
+  --opt-text-secondary: hsl(25 10% 40%);
+  --opt-text-tertiary: hsl(25 8% 55%);
+
+  /* Border */
+  --opt-border-width: 1px;
+  --opt-border: hsl(30 15% 85%);
+  --opt-border-hover: hsl(30 12% 70%);
+  --opt-border-subtle: hsl(30 15% 90%);
+
+  /* Focus */
+  --opt-ring: hsl(155 38% 45%);
+  --opt-ring-offset: #fffdf9;
+
+  /* Background */
+  --opt-bg: hsl(38 45% 95%);
+  --opt-bg-subtle: hsl(35 30% 92%);
+  --opt-bg-muted: hsl(35 25% 88%);
+
+  /* Status */
+  --opt-success: hsl(145 55% 42%);
+  --opt-success-subtle: hsl(145 45% 94%);
+  --opt-success-fg: hsl(145 55% 28%);
+  --opt-warning: hsl(35 85% 52%);
+  --opt-warning-subtle: hsl(40 80% 93%);
+  --opt-warning-fg: hsl(35 85% 34%);
+  --opt-danger: hsl(8 72% 55%);
+  --opt-danger-subtle: hsl(8 65% 95%);
+  --opt-danger-fg: hsl(8 72% 38%);
+  --opt-info: hsl(195 60% 46%);
+  --opt-info-subtle: hsl(195 55% 94%);
+  --opt-info-fg: hsl(195 60% 32%);
+
+  /* Chart */
+  --opt-chart-6: color-mix(in oklch, var(--opt-chart-1) 62%, var(--opt-chart-2));
+  --opt-chart-7: color-mix(in oklch, var(--opt-chart-2) 62%, var(--opt-chart-3));
+  --opt-chart-8: color-mix(in oklch, var(--opt-chart-3) 62%, var(--opt-chart-4));
+  --opt-chart-9: color-mix(in oklch, var(--opt-chart-4) 62%, var(--opt-chart-5));
+  --opt-chart-10: color-mix(in oklch, var(--opt-chart-5) 62%, var(--opt-chart-1));
+  --opt-chart-11: color-mix(in oklch, var(--opt-chart-1) 55%, var(--opt-chart-3));
+  --opt-chart-12: color-mix(in oklch, var(--opt-chart-2) 55%, var(--opt-chart-4));
+  --opt-chart-13: color-mix(in oklch, var(--opt-chart-3) 55%, var(--opt-chart-5));
+  --opt-chart-14: color-mix(in oklch, var(--opt-chart-4) 55%, var(--opt-chart-1));
+  --opt-chart-15: color-mix(in oklch, var(--opt-chart-5) 55%, var(--opt-chart-2));
+  --opt-chart-16: color-mix(in oklch, var(--opt-chart-1) 35%, var(--opt-chart-4));
+  --opt-chart-sequential-1: color-mix(in oklch, var(--opt-chart-1) 18%, var(--opt-surface));
+  --opt-chart-sequential-2: color-mix(in oklch, var(--opt-chart-1) 36%, var(--opt-surface));
+  --opt-chart-sequential-3: color-mix(in oklch, var(--opt-chart-1) 54%, var(--opt-surface));
+  --opt-chart-sequential-4: color-mix(in oklch, var(--opt-chart-1) 76%, var(--opt-surface));
+  --opt-chart-sequential-5: var(--opt-chart-1);
+  --opt-chart-diverging-negative: var(--opt-danger);
+  --opt-chart-diverging-neutral: var(--opt-text-tertiary);
+  --opt-chart-diverging-positive: var(--opt-success);
+  --opt-chart-1: hsl(155 38% 45%);
+  --opt-chart-2: hsl(25 65% 55%);
+  --opt-chart-3: hsl(45 75% 50%);
+  --opt-chart-4: hsl(195 60% 46%);
+  --opt-chart-5: hsl(340 45% 55%);
+
+  /* Radius */
+  --opt-radius-sm: 0.375rem;
+  --opt-radius-md: 0.5rem;
+  --opt-radius-lg: 0.75rem;
+  --opt-radius-xl: 1rem;
+
+  /* Shadow */
+  --opt-shadow-sm: 0 1px 2px hsl(30 20% 50% / 0.06);
+  --opt-shadow-md: 0 4px 8px hsl(30 20% 50% / 0.08);
+  --opt-shadow-lg: 0 10px 20px hsl(30 20% 50% / 0.1);
+
+  /* Spacing */
+  --opt-space-0: 0px;
+  --opt-space-0-5: 0.125rem;
+  --opt-space-1: 0.25rem;
+  --opt-space-1-5: 0.375rem;
+  --opt-space-2: 0.5rem;
+  --opt-space-3: 0.75rem;
+  --opt-space-4: 1rem;
+  --opt-space-5: 1.25rem;
+  --opt-space-6: 1.5rem;
+  --opt-space-8: 2rem;
+  --opt-space-section: 1.75rem;
+  --opt-space-group: 1.25rem;
+  --opt-space-element: 0.625rem;
+
+  /* Typography */
+  --opt-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --opt-font-size-xs: 0.75rem;
+  --opt-font-size-sm: 0.875rem;
+  --opt-font-size-base: 1rem;
+  --opt-font-size-lg: 1.125rem;
+  --opt-font-size-xl: 1.25rem;
+  --opt-font-size-2xl: 1.5rem;
+  --opt-font-size-3xl: 1.875rem;
+  --opt-font-size-4xl: 2.25rem;
+  --opt-font-weight-normal: 400;
+  --opt-font-weight-medium: 500;
+  --opt-font-weight-semibold: 600;
+  --opt-font-weight-bold: 700;
+  --opt-font-heading: var(--font-playfair-display), Georgia, serif;
+  --opt-font-body: var(--font-lora), Georgia, serif;
+  --opt-tracking-heading: 0.005em;
+  --opt-weight-heading: 600;
+
+  /* Other */
+  --opt-control-sm: 2rem;
+  --opt-control-md: 2.5rem;
+  --opt-control-lg: 3rem;
+  --opt-control-padding-sm: 0.75rem;
+  --opt-control-padding-md: 1rem;
+  --opt-control-padding-lg: 1.5rem;
+  --opt-duration-fast: 150ms;
+  --opt-duration-medium: 250ms;
+  --opt-duration-slow: 400ms;
+  --opt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --opt-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
+}