:root {
  /* --- base palette (supplied by the brand) --- */
  --kf-black: #12121A;
  --kf-graphite: #292933;
  --kf-text: #4D4D59;
  --kf-muted: #858391;
  --kf-line: #D3D0DA;
  --kf-bg: #F8F7FA;
  --kf-bg-purple: #E9E6F4;
  --kf-red: #D9545B;
  --kf-blue: #637AF0;

  /* --- deck accents (sampled from the supplied slides) --- */
  --kf-ice: #DEF2FD;   /* pale blue stat tiles */
  --kf-steel: #88ABC7; /* chart bars, mid-tone data fills */
  --kf-white: #FEFEFF;

  /* --- alpha utilities --- */
  --kf-black-a8: rgba(18, 18, 26, .08);
  --kf-black-a12: rgba(18, 18, 26, .12);
  --kf-black-a60: rgba(18, 18, 26, .6);
  --kf-white-a10: rgba(255, 255, 255, .1);
  --kf-white-a16: rgba(255, 255, 255, .16);
  --kf-white-a60: rgba(255, 255, 255, .6);

  /* --- semantic: text --- */
  --text-strong: var(--kf-black);
  --text-body: var(--kf-text);
  --text-muted: var(--kf-muted);
  --text-inverse: var(--kf-white);
  --text-inverse-muted: var(--kf-white-a60);
  --text-accent: var(--kf-blue);
  --text-critical: var(--kf-red);

  /* --- semantic: surfaces --- */
  --surface-page: var(--kf-bg);
  --surface-card: var(--kf-white);
  --surface-tint: var(--kf-bg-purple);
  --surface-inverse: var(--kf-black);
  --surface-inverse-raised: var(--kf-graphite);
  --surface-data: var(--kf-ice);

  /* --- semantic: lines & controls --- */
  --border-hairline: var(--kf-line);
  --border-inverse: var(--kf-white-a16);
  --control-fill: var(--kf-black);
  --control-fill-hover: var(--kf-graphite);
  --control-ink: var(--kf-white);
  --control-ghost-border: var(--kf-line);
  --focus-ring: var(--kf-blue);

  /* --- semantic: page gradient (the hero wash) --- */
  --gradient-page: radial-gradient(120% 90% at 68% 8%, #EFECF7 0%, #F6F5FA 45%, #FAFAFC 100%); /* @kind color */
  --gradient-data: linear-gradient(180deg, var(--kf-steel) 0%, var(--kf-ice) 100%); /* @kind color */
}