/* ═══════════════════════════════════════════════════════════
   CRAVANI — Spacing, Radius, Shadow, Motion, Layout Tokens
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Spacing scale (4px base) ───────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-18:  72px;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-sm:   6px;    /* buttons, tags, small inputs        */
  --radius-md:   12px;   /* inputs, service cards              */
  --radius-lg:   20px;   /* feature cards, panels              */
  --radius-xl:   32px;   /* large containers                   */
  --radius-pill: 100px;  /* badges, chips, filter buttons      */
  --radius-full: 50%;    /* avatars, dots                      */

  /* ── Shadows (deep, soft — built for near-black) ────────── */
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.4);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:    0 20px 60px rgba(0,0,0,0.6);
  --shadow-card:  0 20px 56px rgba(0,0,0,0.45), 0 0 0 1px rgba(229,48,42,0.07);
  --shadow-accent: 0 0 40px rgba(229,48,42,0.18);   /* red glow */

  /* ── Motion ─────────────────────────────────────────────── */
  --transition-fast:  0.2s ease;   /* @kind other */
  --transition-base:  0.35s ease;  /* @kind other */
  --transition-slow:  0.6s cubic-bezier(0.16,1,0.3,1);  /* @kind other */ /* signature ease-out */
  --ease-out-soft:    cubic-bezier(0.16,1,0.3,1);       /* @kind other */
  --reveal-distance:  40px;   /* fade-up entrance travel        */

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width:     1200px;
  --section-pad:   clamp(72px, 10vw, 120px);
  --container-pad: clamp(20px, 5vw, 48px);
}