/* =================================================================
   DESIGN TOKENS — SpinOrbit Design System
   Extends the palette/type already established by the wheel apps
   (indigo primary, orange focus accent, Outfit/DM Sans) so tool
   pages and platform chrome share one visual language.
   ================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* ---- Brand color ---- */
  --sw-primary: #4f46e5;
  --sw-primary-dark: #3730a3;
  --sw-primary-light: #eef2ff;
  --sw-focus: #ff5f29;
  --sw-focus-glow: rgba(255, 95, 41, 0.22);
  --sw-secondary: #00a86b;
  --sw-secondary-light: #e6f7f0;
  --sw-danger: #e74c3c;

  /* ---- Neutrals ---- */
  --sw-ink: #0f1117;
  --sw-ink-soft: #1a1c23;
  --sw-canvas: #faf9fc;
  --sw-surface: #ffffff;
  --sw-bg: #f0f2f8;
  --sw-bg2: #e8eaf2;
  --sw-border: #dde0ea;
  --sw-text: #1a1c23;
  --sw-text-muted: #6b7280;
  --sw-text-faint: #9ca3af;

  /* ---- Slice palette (reused across wheel previews/icons) ---- */
  --sw-slice-1: #6366f1;
  --sw-slice-2: #ec4899;
  --sw-slice-3: #f97316;
  --sw-slice-4: #22c55e;
  --sw-slice-5: #06b6d4;
  --sw-slice-6: #eab308;

  /* ---- Typography ---- */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* ---- Radius ---- */
  --sw-radius-sm: 8px;
  --sw-radius: 14px;
  --sw-radius-lg: 22px;
  --sw-radius-full: 999px;

  /* ---- Spacing scale ---- */
  --sw-space-xs: 0.5rem;
  --sw-space-sm: 0.85rem;
  --sw-space-md: 1.5rem;
  --sw-space-lg: 2.5rem;
  --sw-space-xl: 4rem;
  --sw-space-2xl: 6rem;

  /* ---- Shadows ---- */
  --sw-shadow-sm: 0 2px 8px rgba(15, 17, 23, 0.06);
  --sw-shadow-md: 0 8px 32px rgba(15, 17, 23, 0.08);
  --sw-shadow-lg: 0 24px 64px rgba(15, 17, 23, 0.12);
  --sw-shadow-glow: 0 8px 32px rgba(79, 70, 229, 0.22);

  /* ---- Layout ---- */
  --sw-container: 1200px;
  --sw-header-h: 72px;
}