/* ============================================================
   KBP DESIGN TOKENS
   PROVISIONAL VALUES — derived from the approved homepage mockup.
   NOTE: the original-resolution mockup (887x1774) had NOT arrived at
   build time; these values are structural placeholders using the
   approved proportions/hierarchy and MUST be re-measured and locked
   against the original before visual QA sign-off.
   ============================================================ */
:root{
  /* ---- layout ---- */
  --kbp-container: 1320px;          /* content width at 1440+ */
  --kbp-gutter: 24px;
  --kbp-gutter-lg: 40px;
  --kbp-section-y: 72px;
  --kbp-section-y-lg: 96px;

  /* ---- colour ---- */
  --kbp-ink: #111111;               /* primary text / solid buttons */
  --kbp-ink-soft: #4a4a4a;
  --kbp-muted: #6b7280;
  --kbp-line: #e6e6e6;              /* subtle dividers */
  --kbp-bg: #ffffff;
  --kbp-bg-alt: #f6f6f4;            /* pale section grounds */
  --kbp-accent-sale: #e5533d;       /* CORAL/RED saving badge (corrected) */
  --kbp-star: #111111;

  /* ---- typography ---- */
  --kbp-font: "Inter","Helvetica Neue",Arial,Helvetica,sans-serif;
  --kbp-font-script: "Segoe Script","Brush Script MT",cursive; /* PLACEHOLDER script font - licence check pending */
  --kbp-h1: 54px;
  --kbp-h2: 34px;
  --kbp-h3: 22px;
  --kbp-body: 16px;
  --kbp-small: 14px;
  --kbp-eyebrow: 12px;
  --kbp-track-eyebrow: .12em;

  /* ---- components ---- */
  --kbp-radius: 8px;
  --kbp-radius-sm: 6px;
  --kbp-btn-h: 48px;
  --kbp-btn-px: 26px;
  --kbp-card-radius: 10px;
  --kbp-header-h: 76px;

  /* ---- breakpoints (reference only) ----
     1920 / 1440 / 1366 / 1024 / 768 / 430 / 390 */
}
@media (max-width:1024px){:root{--kbp-h1:42px;--kbp-h2:28px;--kbp-section-y:56px;}}
@media (max-width:768px){:root{--kbp-h1:34px;--kbp-h2:24px;--kbp-section-y:44px;--kbp-gutter:18px;}}