/* ============================================================
   Hyper Charts — Spacing, radii, shadows, motion
   Base unit = 4px. Default content gutter = 24px (Figma spec).
   ============================================================ */
:root {
  /* ---- Spacing scale ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;   /* inner card padding (small) */
  --space-6:  24px;   /* default gutter / card padding */
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --gutter:      24px;
  --card-pad:    24px;
  --card-pad-sm: 20px;

  /* ---- Radii ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   12px;   /* mini-indicator / inner tiles */
  --radius-lg:   16px;   /* default card */
  --radius-xl:   20px;
  --radius-2xl:  24px;   /* large chart blocks */
  --radius-pill: 999px;  /* buttons, trend chips */

  /* ---- Borders ---- */
  --border-hairline: 1px;
  --border-card: 1px solid var(--border-subtle);

  /* ---- Shadows ----
     Soft, purple-tinted, multi-layer (the Set Product "floating card" look). */
  --shadow-xs:
     0 1px 2px rgba(108,73,172,0.04);
  --shadow-sm:
     0 2px 4px  rgba(108,73,172,0.04),
     0 4px 10px rgba(108,73,172,0.05);
  --shadow-card:
     0 1.8px 3.1px  rgba(108,73,172,0.020),
     0 4.3px 7.6px  rgba(108,73,172,0.028),
     0 8.1px 14.3px rgba(108,73,172,0.035),
     0 14.4px 25.4px rgba(108,73,172,0.042),
     0 27px 47.6px  rgba(108,73,172,0.050),
     0 64px 113px   rgba(108,73,172,0.070);
  --shadow-pop:
     0 8px 16px rgba(108,73,172,0.10),
     0 24px 60px rgba(108,73,172,0.14);

  /* ---- Glow shadows (charts, dark theme) ---- */
  --glow-soft-green:  0 0 24px rgba(99,255,59,0.35);
  --glow-soft-orange: 0 0 24px rgba(255,111,52,0.30);
  --glow-soft-violet: 0 0 24px rgba(135,113,243,0.30);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   480ms; /* @kind other */
  --dur-draw:   900ms;  /* @kind other */
}