:root {
  --qbx-color-bg: #ffffff;
  --qbx-color-bg-soft: #f4f8f8;
  --qbx-color-surface: #ffffff;
  --qbx-color-surface-raised: #eef5f5;
  --qbx-color-text: #07141a;
  --qbx-color-muted: #41565e;
  --qbx-color-line: rgba(7, 20, 26, 0.16);
  --qbx-color-brand: #197f7e;
  --qbx-color-brand-strong: #176f70;
  --qbx-color-gold: #765812;
  --qbx-color-violet: #5144b5;
  --qbx-color-danger: #a33d32;
  --qbx-color-positive: #0b715c;
  --qbx-color-brand-contrast: #effffb;
  --qbx-shadow-panel: 0 24px 70px rgba(7, 20, 26, 0.11);
  --qbx-size-content-max: 1280px;
  --qbx-size-reading-max: 720px;
  --qbx-space-1: 8px;
  --qbx-space-2: 16px;
  --qbx-space-3: 24px;
  --qbx-space-4: 32px;
  --qbx-space-6: 48px;
  --qbx-space-8: 64px;
  --qbx-radius-control: 10px;
  --qbx-radius-card: 20px;
  --qbx-radius-panel: 24px;
  --qbx-radius-pill: 999px;
  --qbx-control-min: 48px;
  --qbx-header-desktop: 84px;
  --qbx-header-mobile: 76px;
  --qbx-focus-ring: 3px solid var(--qbx-color-brand);
  --qbx-motion-fast: 180ms;
  --qbx-motion-base: 320ms;
  --qbx-motion-slow: 700ms;
}

html[data-theme="dark"],
.qbx-story-root[data-theme="dark"] {
  --qbx-color-bg: #050810;
  --qbx-color-bg-soft: #08101c;
  --qbx-color-surface: #0b1421;
  --qbx-color-surface-raised: #0f1d2b;
  --qbx-color-text: #eef8ff;
  --qbx-color-muted: #9fb2c0;
  --qbx-color-line: rgba(190, 220, 235, 0.14);
  --qbx-color-brand: #66f1d6;
  --qbx-color-brand-strong: #19cbb6;
  --qbx-color-gold: #efc77b;
  --qbx-color-violet: #8e83ff;
  --qbx-color-danger: #ff9d8d;
  --qbx-color-positive: #78e6ca;
  --qbx-color-brand-contrast: #061210;
  --qbx-shadow-panel: 0 30px 90px rgba(0, 0, 0, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --qbx-motion-fast: 1ms;
    --qbx-motion-base: 1ms;
    --qbx-motion-slow: 1ms;
  }
}