/* ============================================================
   Gonka.Top — Spacing, radii, shadows, motion, layout
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --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-15: 60px;
  --space-18: 70px;
  --space-30: 120px;   /* vertical section rhythm */

  /* ---- Radii ---- */
  --radius-xs:   3px;   /* mono code ticks */
  --radius-sm:   4px;   /* tags, tiny pills */
  --radius-md:   6px;   /* nav items, small buttons */
  --radius-lg:   8px;   /* buttons, doc links */
  --radius-xl:   10px;  /* dropdowns */
  --radius-2xl:  16px;  /* cards, grids */
  --radius-pill: 100px; /* badges, capsule tags */
  --radius-full: 50%;

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

  /* ---- Shadows ---- (light theme → soft, cool, low-spread) */
  --shadow-sm: 0 1px 2px rgba(14, 14, 26, 0.04);
  --shadow-md: 0 4px 16px rgba(14, 14, 26, 0.06);
  --shadow-lg: 0 12px 40px rgba(14, 14, 26, 0.10);
  --shadow-accent: 0 8px 30px rgba(107, 91, 217, 0.18);
  --glow-accent: 0 0 8px var(--accent);

  /* ---- Motion ---- (quick, no bounce; ease, not spring) */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast:   0.15s;   /* @kind other */
  --dur-normal: 0.2s;    /* @kind other */
  --dur-slow:   0.25s;   /* @kind other */
  --transition-base: all var(--dur-fast) var(--ease);   /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1320px;
  --container-pad: 32px;
  --nav-blur: blur(20px) saturate(1.2);   /* @kind other */
}