/* ───────────────────────────────────────────────────────────────
   SPACING, RADII, SHADOWS — Luca Como Design System
   Generous editorial whitespace. Page gutters 48px, section
   rhythm 64px. Radii are gentle (6–16px); pills are fully round.
   Shadows are soft and rare on paper; dark stages get purple glow.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── 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:  80px;
  --space-10: 120px;

  /* ── Layout ── */
  --page-gutter:   48px;   /* horizontal page padding */
  --section-gap:   64px;   /* vertical rhythm between sections */
  --container-max: 1100px; /* reading-width container */
  --nav-h:         64px;   /* fixed nav height */

  /* ── Radii ── */
  --radius-sm:   6px;    /* small cards, chips */
  --radius-md:   8px;    /* default cards */
  --radius-lg:   10px;   /* feature panels */
  --radius-xl:   16px;   /* hero stages */
  --radius-pill: 100px;  /* buttons, tags */
  --radius-full: 50%;    /* avatars, dots */

  /* ── Borders ── */
  --border-width: 1px;
  --hairline: 1px solid var(--border);

  /* ── Shadows ── */
  --shadow-card:  0 16px 48px rgba(0,0,0,0.12);     /* lifted card */
  --shadow-soft:  0 12px 36px rgba(0,0,0,0.08);     /* gentle */
  --shadow-stage: 0 30px 80px rgba(0,0,0,0.55),
                  0 16px 36px rgba(168,85,247,0.18),
                  0 0 0 1px rgba(168,85,247,0.08);   /* dark browser frame */
  --shadow-glow:  0 12px 36px rgba(168,85,247,0.18); /* purple hover glow */

  /* ── Motion ── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast:   0.2s; /* @kind other */
  --dur-base:   0.3s; /* @kind other */
  --dur-slow:   0.4s; /* @kind other */
}