:root {
  /* Background colors */
  --bg-body: #120f17;
  --bg-card: #1b1722;
  --bg-elevated: #1b1722;
  --bg-hover: #373044;

  /* Border colors */
  --border-primary: #2f293a;
  --border-secondary: #2f293a;
  --border-subtle: #2f293a;

  /* Brand colors */
  --color-primary: #a855f7;
  --color-accent: #b497cf;
  --color-accent-muted: #b497cf;

  /* Text colors */
  --text-primary: #fff;
  --text-secondary: #f5f5f5;
  --text-muted: #aaaaaa;
  --text-dimmed: #a1a1aa;
  --text-link: #ffffff;
  --section-heading: #f4f4f5;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 2px 8px rgba(82, 39, 255, 0.4);

  --docs-header-height: 60px;

  --docs-content-max-width: 675px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-press: 120ms;
  --dur-tooltip: 160ms;
  --dur-menu: 200ms;
  --dur-panel: 280ms;

  /* Transitions */
  --transition-fast: 0.15s var(--ease-out);
  --transition-base: 0.2s var(--ease-out);
  --transition-slow: 0.3s var(--ease-out);

  /* Shared gradient for section titles */
  --gradient-title: linear-gradient(135deg, #fff 0%, #8660fa 20%, #a855f7 40%, #8400ff 60%, #a855f7 80%, #fff 100%);

  --surface-ghost: rgba(255, 255, 255, 0.07);
  --surface-ghost-hover: rgba(255, 255, 255, 0.12);
  --surface-ghost-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --surface-ghost-blur: blur(32px) saturate(1.3);
  --surface-ghost-track: rgba(255, 255, 255, 0.04);
  --action-control-bg: var(--surface-ghost-track);
  --action-control-border: transparent;
  --action-control-hover: var(--surface-ghost-hover);
  --action-control-selected: var(--surface-ghost);
  --action-control-selected-border: transparent;
  --action-control-shadow: var(--surface-ghost-highlight);

  --shell-panel: rgba(18, 15, 23, 0.82);
  --shell-panel-solid: #120f17;
  --shell-border: rgba(255, 255, 255, 0.07);
  --shell-border-strong: rgba(255, 255, 255, 0.1);
  --shell-fade-rgb: 18, 15, 23;
  --field-bg: #120f17;
  --text-on-accent: #fff;
  --inset-border: rgba(255, 255, 255, 0.055);
  --preview-border: rgba(255, 255, 255, 0.05);
  --inset-divider: rgba(255, 255, 255, 0.045);
  --row-hover: rgba(255, 255, 255, 0.022);
  --code-name: rgba(216, 180, 254, 0.9);
  --code-type: rgba(215, 205, 226, 0.68);
  --code-value: rgba(220, 214, 229, 0.86);
  --code-chip: rgba(255, 255, 255, 0.055);
  --skeleton-base: #1b1722;
  --skeleton-shine: #2a2335;
  --shadow-elevated: 0 14px 40px rgba(0, 0, 0, 0.14);
  --shadow-elevated-hover: 0 18px 42px rgba(0, 0, 0, 0.18);
  --shadow-menu: 0 10px 30px rgba(0, 0, 0, 0.5);
  --slider-thumb: rgba(255, 255, 255, 0.9);
  --slider-fill: rgba(255, 255, 255, 0.06);
  --switch-track: #37313f;
  --switch-track-checked: #d4d4d8;
  --switch-knob: #a1a1aa;
  --switch-knob-checked: #27222e;
  --floating-control-bg: rgba(18, 15, 23, 0.72);
  --floating-control-hover: rgba(36, 30, 44, 0.94);
  --code-bg: #120f17;
  --code-bg-accent: #1b1722;
  --new-badge-text: #e2c9ff;
  --new-badge-bg: rgba(168, 85, 247, 0.32);
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg-body: #ffffff;
  --bg-card: #ffffff;
  --bg-elevated: #f1f1f2;
  --bg-hover: #e9e9eb;
  --border-primary: #d1d1d4;
  --border-secondary: #dedee1;
  --border-subtle: #e7e7e9;
  --color-primary: #8f36e8;
  --color-accent: #7e3db8;
  --color-accent-muted: #8a719d;
  --text-primary: #18181b;
  --text-secondary: #2f2f33;
  --text-muted: #52525b;
  --text-dimmed: #71717a;
  --text-link: #27272a;
  --section-heading: #3f3f46;
  --shadow-dropdown: 0 16px 42px rgba(24, 24, 27, 0.12);
  --shadow-primary: 0 4px 18px rgba(143, 54, 232, 0.2);
  --surface-ghost: rgba(24, 24, 27, 0.07);
  --surface-ghost-hover: rgba(24, 24, 27, 0.11);
  --surface-ghost-highlight: 0 1px 2px rgba(24, 24, 27, 0.05);
  --surface-ghost-track: rgba(24, 24, 27, 0.055);
  --action-control-bg: #ffffff;
  --action-control-border: var(--border-subtle);
  --action-control-hover: #f8f8f9;
  --action-control-selected: #ffffff;
  --action-control-selected-border: var(--border-primary);
  --action-control-shadow: none;
  --shell-panel: rgba(255, 255, 255, 0.86);
  --shell-panel-solid: #ffffff;
  --shell-border: rgba(24, 24, 27, 0.09);
  --shell-border-strong: rgba(24, 24, 27, 0.14);
  --shell-fade-rgb: 255, 255, 255;
  --field-bg: #ffffff;
  --inset-border: rgba(24, 24, 27, 0.14);
  --preview-border: rgba(24, 24, 27, 0.055);
  --inset-divider: rgba(24, 24, 27, 0.1);
  --row-hover: rgba(24, 24, 27, 0.035);
  --code-name: #7c25b4;
  --code-type: #554c5e;
  --code-value: #332a3a;
  --code-chip: rgba(24, 24, 27, 0.06);
  --skeleton-base: #e7e7e9;
  --skeleton-shine: #f4f4f5;
  --shadow-elevated: 0 14px 38px rgba(24, 24, 27, 0.07);
  --shadow-elevated-hover: 0 18px 44px rgba(24, 24, 27, 0.1);
  --shadow-menu: 0 16px 36px rgba(24, 24, 27, 0.13);
  --slider-thumb: #71717a;
  --slider-fill: rgba(24, 24, 27, 0.09);
  --switch-track: #d4d4d8;
  --switch-track-checked: #52525b;
  --switch-knob: #ffffff;
  --switch-knob-checked: #ffffff;
  --floating-control-bg: rgba(255, 255, 255, 0.92);
  --floating-control-hover: #fff;
  --code-bg: #ffffff;
  --code-bg-accent: #ececee;
  --new-badge-text: #6f249d;
  --new-badge-bg: #eee1f7;
  --gradient-title: linear-gradient(135deg, #24192d 0%, #7550c8 25%, #9138df 50%, #7340bd 75%, #24192d 100%);
}

:root[data-theme='dark'] {
  color-scheme: dark;
}

/* Shared keyframes — used by section titles across multiple components */
@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}