/* ============================================================
   EKM Growth Marketing — Spacing, Radius & Elevation Tokens
   Brand geometry is sharp & angular — radii stay near 0.
   Depth comes from colour difference, not heavy shadow.
   ============================================================ */
: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-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── Layout ───────────────────────────────────────────────── */
  --container-max: 1280px;
  --gutter:        48px;       /* desktop section padding */
  --gutter-sm:     24px;       /* mobile section padding */

  /* ── Border radius — sharp by default ─────────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;   /* brand default — buttons, inputs, cards */
  --radius-md:   4px;
  --radius-lg:   8px;   /* use sparingly */
  --radius-full: 9999px;

  /* ── Border widths ────────────────────────────────────────── */
  --border-hairline: 1px;
  --border-strong:   1.5px;

  /* ── Shadows / elevation ──────────────────────────────────── */
  /* On dark surfaces, prefer border separation over shadow.    */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.40);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.50);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.60);
  /* Light-mode card shadow */
  --shadow-light: 0 4px 16px rgba(13,13,13,0.12);
  /* Subtle top-edge inset highlight on dark cards */
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ── Motion ─── snappy, confident; no bounce ──────────────── */
  --ease-out:  cubic-bezier(0.2, 0, 0.0, 1); /* @kind other */
  --ease-in:   cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast:  150ms;   /* @kind other */
  --dur-base:  220ms;   /* @kind other */
  --dur-slow:  400ms;   /* @kind other */

  /* ── Z-index ──────────────────────────────────────────────── */
  --z-base:    1;      /* @kind other */
  --z-sticky:  100;    /* @kind other */
  --z-overlay: 500;    /* @kind other */
  --z-modal:   1000;   /* @kind other */
  --z-toast:   1500;   /* @kind other */
}