:root {
  --sb-coral: #ff5b4d;
  --sb-lime: #b8f35d;
  --sb-blue: #2f6bff;
  --sb-amber: #f8b84e;
  --sb-ink: #101923;
  --sb-canvas: #faf7f2;
  --sb-surface: #ffffff;
  --sb-muted: #667085;
  --sb-border: #e8e6e1;
  --sb-success: #238636;
  --sb-danger: #d92d20;

  --sb-youtube: #ff0033;
  --sb-instagram: #c13584;
  --sb-facebook: #1877f2;
  --sb-tiktok: #25b6ba;
  --sb-x: #111111;

  --sb-font-display: "Manrope", "Inter", system-ui, sans-serif;
  --sb-font-ui: "Inter", system-ui, sans-serif;

  --sb-radius-sm: 10px;
  --sb-radius-md: 18px;
  --sb-radius-lg: 28px;
  --sb-shadow-card: 0 10px 32px rgb(16 25 35 / 8%);

  --sb-motion-grow: 450ms cubic-bezier(.2,.8,.2,1);
  --sb-motion-pulse: 600ms cubic-bezier(.2,.8,.2,1);
  --sb-motion-travel: 300ms cubic-bezier(.2,.8,.2,1);
  --sb-motion-reveal: 240ms cubic-bezier(.2,.8,.2,1);
}

[data-theme="dark"] {
  --sb-canvas: #0c1218;
  --sb-surface: #151f29;
  --sb-ink: #f8f7f3;
  --sb-muted: #aab4c0;
  --sb-border: #283441;
  --sb-x: #f3f4f6;
  --sb-shadow-card: 0 12px 36px rgb(0 0 0 / 28%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sb-motion-grow: 150ms linear;
    --sb-motion-pulse: 150ms linear;
    --sb-motion-travel: 150ms linear;
    --sb-motion-reveal: 150ms linear;
  }
}