/* ============================================================================
   Kinema — Spacing, radius, shadow & layout tokens
   4px base grid (Tailwind-derived). Radius is "slightly rounded, not pill-all".
   ============================================================================ */

:root {
  /* ── Spacing scale (4px base) ─────────────────────────────────────────── */
  --kinema-space-1:  4px;
  --kinema-space-2:  8px;
  --kinema-space-3:  12px;
  --kinema-space-4:  16px;
  --kinema-space-5:  20px;
  --kinema-space-6:  24px;
  --kinema-space-8:  32px;
  --kinema-space-10: 40px;
  --kinema-space-12: 48px;
  --kinema-space-16: 64px;
  --kinema-space-20: 80px;
  --kinema-space-24: 96px;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --kinema-radius-sm:     6px;  /* code chips, small controls */
  --kinema-radius-button: 8px;  /* buttons, inputs (rounded-lg) */
  --kinema-radius-card:   12px; /* cards, containers (rounded-xl) */
  --kinema-radius-modal:  16px; /* modals, prominent panels (rounded-2xl) */
  --kinema-radius-pill:   9999px;

  /* ── Elevation (soft, de-outlined) ────────────────────────────────────── */
  --kinema-shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --kinema-shadow-md:  0 10px 30px -12px rgba(0,0,0,0.55);
  --kinema-shadow-lg:  0 20px 40px -20px rgba(0,0,0,0.6);
  --kinema-shadow-xl:  0 25px 60px -15px rgba(0,0,0,0.8); /* floating modals */
  --kinema-shadow-cta: 0 10px 30px -10px rgba(124,58,237,0.55); /* violet CTA glow */
  --kinema-shadow-grad:0 12px 34px -12px rgba(246,24,160,0.5); /* gradient CTA glow */

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --kinema-container:   1080px;
  --kinema-container-wide: 1280px;
  --kinema-topbar-h:    56px;
}