/* ─────────────────────────────────────────────
   Gregor Media — Spacing & Layout Tokens
   ───────────────────────────────────────────── */

:root {
  /* ── Base spacing scale ── */
  --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-28:  112px;
  --space-32:  128px;

  /* ── Section vertical padding ── */
  --section-padding-y:    100px;
  --section-padding-y-sm: 60px;

  /* ── Container / content width ── */
  --content-width:        1520px;
  --content-padding-x:    200px;   /* on 1920px canvas */
  --content-padding-x-md: 40px;
  --content-padding-x-sm: 20px;

  /* ── Border radius ── */
  --radius-sm:     4px;
  --radius-md:     10px;   /* tags, small cards */
  --radius-lg:     20px;   /* cards */
  --radius-xl:     30px;   /* large cards */
  --radius-pill:   9999px; /* buttons, chips */

  /* ── Shadows ── */
  --shadow-card:  30px 30px 60px 0px rgba(40, 50, 80, 0.3);
  --shadow-card-light: 20px 20px 40px 0px rgba(40, 50, 80, 0.15);
  --shadow-soft:  0px 4px 24px 0px rgba(40, 50, 80, 0.1);
  --shadow-sm:    0px 2px 8px 0px rgba(40, 50, 80, 0.1);

  /* ── Navigation ── */
  --nav-height:   80px;

  /* ── Transitions ── */
  --transition-fast:    150ms ease;   /* @kind other */
  --transition-normal:  250ms ease;   /* @kind other */
  --transition-slow:    400ms ease;   /* @kind other */
}