/* ============================================================
   COE Platform spacing, radii, borders, elevation
   4px grid. Corners are generous (cards 16px, controls 10px —
   matching rounded-2xl / rounded-[10px] in the app). Shadows are
   the app's shadow-card / shadow-cardhover pair.
   ============================================================ */

:root {
  /* ---- Spacing (4px grid) ---- */
  --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;

  /* ---- Radii ---- */
  --radius-xs: 6px;            /* tags, code spans */
  --radius-sm: 10px;           /* buttons, inputs (rounded-[10px]) */
  --radius-md: 12px;           /* small panels (rounded-xl) */
  --radius-lg: 16px;           /* cards (rounded-2xl) */
  --radius-full: 999px;        /* badges, pills */

  /* ---- Elevation (tailwind.config.js boxShadow) ---- */
  --shadow-card: 0 1px 2px 0 rgba(0,0,0,0.04), 0 1px 3px 0 rgba(0,0,0,0.06);
  --shadow-cardhover: 0 6px 18px -8px rgba(27,49,57,0.16);
  --shadow-pop: 0 10px 30px -12px rgba(27,49,57,0.14);
  --shadow-navy: 0 24px 60px rgba(16,29,34,0.45);

  /* ---- Borders ---- */
  --border-width: 1px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
}