/* Spark — shape, spacing, elevation tokens. */

:root {
  /* ── Radii ───────────────────────────────────────────────── */
  --radius-lg:   24px; /* bento / surface cards */
  --radius-md:   16px; /* buttons, inner media, medium surfaces */
  --radius-sm:   12px; /* chips, small tiles */
  --radius-pill: 999px;

  /* ── Spacing scale (4px base) ────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ── Elevation ───────────────────────────────────────────── */
  /* Soft + neutral on light — never harsh outlines. */
  --shadow-card:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-raised: 0 10px 30px rgba(0, 0, 0, 0.10);
  /* The CTA glow — orange, only under the gradient button. */
  --shadow-cta:       0 6px 18px rgba(255, 107, 0, 0.28);
  --shadow-cta-hover: 0 10px 26px rgba(255, 107, 0, 0.34);
  /* Warm hairline divider */
  --divider-dark: 1px solid var(--line); /* @kind other */
  --divider-warm: 1px solid var(--line); /* @kind other */
}