/* ============================================================
   KLETSKAARTE — Design Tokens
   Colours & type taken directly from the supplied brand kit
   (Colour Palatte.png + Fonts.png). Do not invent new values.
   ============================================================ */

:root {
  /* ---- Brand colours (exact, from Colour Palatte.png) ---- */
  --kk-vlam-rooi:   #D83C2D;  /* R216 G60 B45  — primary red, the springbok */
  --kk-botter-geel: #F2CA21;  /* R242 G202 B33 — yellow die / Ysbrekers / box */
  --kk-roomwit:     #EFEEE6;  /* R239 G238 B230 — cream / Diep Aanklank cards */
  --kk-diep-rooi:   #C1272D;  /* R193 G39 B45  — deep red, CTAs / shadows */
  --kk-carbon:      #231F20;  /* R35 G31 B32   — near-black, type & flames */

  /* ---- Supporting tints (derived from the five above) ---- */
  --kk-roomwit-2:   #E4E2D6;  /* slightly deeper cream for panels */
  --kk-carbon-80:   rgba(35,31,32,0.80);
  --kk-carbon-60:   rgba(35,31,32,0.60);
  --kk-geel-deep:   #E0B413;  /* pressed-state yellow */

  /* ---- Typography ----
     Brand fonts: Logo = Pacaembu, Headlines = Futura LT Bold,
     Body = Futura PT Demi/Medium. Web substitute: Jost
     (geometric, closest free match to Futura). Logo lockups
     use the supplied PNG artwork, not a webfont. */
  --kk-font-display: 'Jost', 'Futura', 'Century Gothic', sans-serif;  /* headlines */
  --kk-font-body:    'Jost', 'Futura', 'Century Gothic', sans-serif;  /* body */

  --kk-w-medium: 500;   /* Futura PT Medium */
  --kk-w-demi:   600;   /* Futura PT Demi */
  --kk-w-bold:   700;   /* Futura LT Bold */
  --kk-w-black:  800;   /* extra punch for hero display */

  /* ---- Type scale (mobile-first) ---- */
  --kk-h1:    40px;  --kk-h1-lh:    1.02;  --kk-h1-ls:    -0.01em;
  --kk-h2:    28px;  --kk-h2-lh:    1.08;
  --kk-h3:    20px;  --kk-h3-lh:    1.15;
  --kk-body:  16px;  --kk-body-lh:  1.5;
  --kk-small: 14px;  --kk-small-lh: 1.45;
  --kk-caption: 12px; --kk-caption-ls: 0.14em;  /* uppercase labels */

  /* ---- Spacing scale (8pt) ---- */
  --kk-s1: 4px;  --kk-s2: 8px;  --kk-s3: 12px; --kk-s4: 16px;
  --kk-s5: 24px; --kk-s6: 32px; --kk-s7: 48px; --kk-s8: 64px;

  /* ---- Radius & shadow ---- */
  --kk-r-sm: 6px; --kk-r-md: 12px; --kk-r-lg: 20px; --kk-r-pill: 999px;
  --kk-shadow-card: 0 6px 24px rgba(35,31,32,0.14);
  --kk-shadow-cta:  0 8px 20px rgba(193,39,45,0.32);

  /* ---- Layout ---- */
  --kk-page-max: 440px;   /* mobile-first content column */
  --kk-gutter:   20px;
}