:root{
  /* brand */
  --kolpu-blue:#011CDA;
  --signal-blue:#2E6BFF;
  --sky:#4FD1FF;
  --field-mint:#35F0A0;
  --rabbit-black:#0A0A0A;
  --white:#FFFFFF;
  --paper-grey:#F1F2F6;
  /* neutrals */
  --grey-900:#171717;
  --grey-700:#3A3C44;
  --grey-500:#5A5C66;
  --grey-400:#8A8C96;
  --grey-300:#9A9CA6;
  --grey-200:#D3D5DE;
  --alert:#FF4D4D;
  /* semantic */
  --surface-page:var(--white);
  --surface-alt:var(--paper-grey);
  --surface-brand:var(--kolpu-blue);
  --surface-dark:var(--rabbit-black);
  --surface-dark-raised:var(--grey-900);
  --text-primary:var(--rabbit-black);
  --text-muted:var(--grey-500);
  --text-subtle:var(--grey-400);
  --text-on-brand:var(--white);
  --text-on-brand-muted:rgba(255,255,255,.72);
  --accent:var(--kolpu-blue);
  --accent-hover:var(--signal-blue);
  --accent-highlight:var(--field-mint);
  --border-subtle:rgba(10,10,10,.12);
  --border-strong:var(--rabbit-black);
  --border-on-brand:rgba(255,255,255,.25);
}