/* ============================================================
   KGM — SPACING & LAYOUT TOKENS
   Web rhythm is generous and vertical (section bands of ~90px).
   Slide rhythm is a fixed 1920×1080 frame, left-aligned.
   ============================================================ */
:root {
  /* ---- Base spacing scale ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  56px;
  --space-9:  72px;
  --space-10: 96px;

  /* ---- Web layout ---- */
  --container-max: 1240px;     /* page content width */
  --container-pad: 28px;       /* gutter */
  --section-band:  96px;       /* vertical padding of a content band */
  --grid-gap:      24px;       /* card grid gap */

  /* ---- Radii (the website is soft, not hard-edged) ---- */
  --radius-button: 6px;
  --radius-input:  8px;
  --radius-card:   12px;
  --radius-card-lg:14px;
  --radius-pill:   999px;

  /* ---- Card accent ---- */
  --card-accent-bar: 4px;      /* coloured top border on tinted cards */

  /* ---- Elevation (used sparingly — borders are preferred) ---- */
  --shadow-sm: 0 1px 3px rgba(13,27,42,.12);
  --shadow-md: 0 6px 20px rgba(13,27,42,.10);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.22,.61,.36,1); /* @kind other */
  --dur-rise:   0.6s; /* @kind other */

  /* ============================================================
     SLIDE GEOMETRY — 1920×1080 canvas
     ============================================================ */
  --slide-w:        1920px;
  --slide-h:        1080px;
  --slide-pad-x:    120px;
  --slide-pad-top:  100px;
  --slide-pad-bot:  90px;
  --slide-grid-gap: 36px;
  --slide-item-gap: 28px;
  --slide-mark:     72px;  /* lion mark, top-right of every slide */
}