:root {
  color-scheme: light dark;
  --fandhe-color-bg: #ffffff;
  --fandhe-color-bg-subtle: #f7f7f7;
  --fandhe-color-bg-muted: #eeeeee;
  --fandhe-color-fg: #111111;
  --fandhe-color-fg-muted: #4a4a4a;
  --fandhe-color-fg-subtle: #767676;
  --fandhe-color-border: #d9d9d9;
  --fandhe-color-border-muted: #e6e6e6;
  --fandhe-color-accent: #3182ce;
  --fandhe-color-accent-emphasized: #2b6cb0;
  --fandhe-color-accent-fg: #ffffff;
  --fandhe-color-info: #3182ce;
  --fandhe-color-info-emphasized: #2b6cb0;
  --fandhe-color-info-fg: #ffffff;
  --fandhe-color-success: #2f855a;
  --fandhe-color-success-emphasized: #276749;
  --fandhe-color-success-fg: #ffffff;
  --fandhe-color-warning: #b7791f;
  --fandhe-color-warning-emphasized: #975a16;
  --fandhe-color-warning-fg: #ffffff;
  --fandhe-color-danger: #c53030;
  --fandhe-color-danger-emphasized: #9b2c2c;
  --fandhe-color-danger-fg: #ffffff;
  --fandhe-color-chart-1: #3182ce;
  --fandhe-color-chart-2: #dd6b20;
  --fandhe-color-chart-3: #2f855a;
  --fandhe-color-chart-4: #805ad5;
  --fandhe-color-chart-5: #d53f8c;
  --fandhe-color-chart-6: #00a3c4;
  --fandhe-space-1: 0.25rem;
  --fandhe-space-2: 0.5rem;
  --fandhe-space-3: 0.75rem;
  --fandhe-space-4: 1rem;
  --fandhe-space-5: 1.25rem;
  --fandhe-space-6: 1.5rem;
  --fandhe-space-8: 2rem;
  --fandhe-space-10: 2.5rem;
  --fandhe-space-12: 3rem;
  --fandhe-space-16: 4rem;
  --fandhe-font-font-body: system-ui, -apple-system, sans-serif;
  --fandhe-font-font-mono: ui-monospace, monospace;
  --fandhe-font-font-size-xs: 0.75rem;
  --fandhe-font-font-size-sm: 0.875rem;
  --fandhe-font-font-size-md: 1rem;
  --fandhe-font-font-size-lg: 1.125rem;
  --fandhe-font-font-size-xl: 1.25rem;
  --fandhe-font-font-size-2xl: 1.5rem;
  --fandhe-font-font-size-3xl: 1.875rem;
  --fandhe-font-font-size-4xl: 2.25rem;
  --fandhe-font-font-weight-normal: 400;
  --fandhe-font-font-weight-medium: 500;
  --fandhe-font-font-weight-semibold: 600;
  --fandhe-font-font-weight-bold: 700;
  --fandhe-font-line-height-tight: 1.25;
  --fandhe-font-line-height-normal: 1.5;
  --fandhe-font-line-height-relaxed: 1.75;
  --fandhe-radius-sm: 0.25rem;
  --fandhe-radius-md: 0.375rem;
  --fandhe-radius-lg: 0.5rem;
  --fandhe-radius-xl: 0.75rem;
  --fandhe-radius-full: 9999px;
  --fandhe-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --fandhe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --fandhe-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --fandhe-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.16);
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fandhe-color-bg: #111111;
    --fandhe-color-bg-subtle: #1a1a1a;
    --fandhe-color-bg-muted: #242424;
    --fandhe-color-fg: #f7f7f7;
    --fandhe-color-fg-muted: #cccccc;
    --fandhe-color-fg-subtle: #a3a3a3;
    --fandhe-color-border: #3a3a3a;
    --fandhe-color-border-muted: #2a2a2a;
    --fandhe-color-accent: #4299e1;
    --fandhe-color-accent-emphasized: #63b3ed;
    --fandhe-color-accent-fg: #0b1720;
    --fandhe-color-info: #63b3ed;
    --fandhe-color-info-emphasized: #90cdf4;
    --fandhe-color-info-fg: #0b1720;
    --fandhe-color-success: #68d391;
    --fandhe-color-success-emphasized: #9ae6b4;
    --fandhe-color-success-fg: #0b1a12;
    --fandhe-color-warning: #f6ad55;
    --fandhe-color-warning-emphasized: #fbd38d;
    --fandhe-color-warning-fg: #1a1203;
    --fandhe-color-danger: #fc8181;
    --fandhe-color-danger-emphasized: #feb2b2;
    --fandhe-color-danger-fg: #1a0b0b;
    --fandhe-color-chart-1: #63b3ed;
    --fandhe-color-chart-2: #f6ad55;
    --fandhe-color-chart-3: #68d391;
    --fandhe-color-chart-4: #b794f4;
    --fandhe-color-chart-5: #f687b3;
    --fandhe-color-chart-6: #76e4f7;
    --fandhe-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
    --fandhe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
    --fandhe-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --fandhe-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fandhe-color-bg: #111111;
  --fandhe-color-bg-subtle: #1a1a1a;
  --fandhe-color-bg-muted: #242424;
  --fandhe-color-fg: #f7f7f7;
  --fandhe-color-fg-muted: #cccccc;
  --fandhe-color-fg-subtle: #a3a3a3;
  --fandhe-color-border: #3a3a3a;
  --fandhe-color-border-muted: #2a2a2a;
  --fandhe-color-accent: #4299e1;
  --fandhe-color-accent-emphasized: #63b3ed;
  --fandhe-color-accent-fg: #0b1720;
  --fandhe-color-info: #63b3ed;
  --fandhe-color-info-emphasized: #90cdf4;
  --fandhe-color-info-fg: #0b1720;
  --fandhe-color-success: #68d391;
  --fandhe-color-success-emphasized: #9ae6b4;
  --fandhe-color-success-fg: #0b1a12;
  --fandhe-color-warning: #f6ad55;
  --fandhe-color-warning-emphasized: #fbd38d;
  --fandhe-color-warning-fg: #1a1203;
  --fandhe-color-danger: #fc8181;
  --fandhe-color-danger-emphasized: #feb2b2;
  --fandhe-color-danger-fg: #1a0b0b;
  --fandhe-color-chart-1: #63b3ed;
  --fandhe-color-chart-2: #f6ad55;
  --fandhe-color-chart-3: #68d391;
  --fandhe-color-chart-4: #b794f4;
  --fandhe-color-chart-5: #f687b3;
  --fandhe-color-chart-6: #76e4f7;
  --fandhe-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --fandhe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
  --fandhe-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --fandhe-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}
.primitives-showcase {
  display: block;
}
.primitives-demo-note {
  font-size: 0.875rem;
  color: var(--fandhe-color-fg-muted);
  margin: 0 0 0.75rem;
}
.primitives-demo-frame {
  border: 1px dashed var(--fandhe-color-border);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0 0 1.5rem;
  background: var(--fandhe-color-bg-subtle);
  overflow-x: auto;
}