:root{
  --ink-black:#0a0a0b;
  --near-black:#111113;
  --charcoal-1:#161616;
  --charcoal-2:#1d1e21;
  --charcoal-3:#2a2b2f;
  --navy-deep:#01040d;
  --navy-mid:#01112b;
  --line-on-dark:rgba(255,255,255,0.12);
  --white:#ffffff;
  --off-white:#f4f5f6;
  --grey-400:#9a9ca1;
  --grey-600:#5c5e64;

  --cyan-500:#4cc9f0;
  --cyan-400:#7bd7f4;
  --cyan-600:#2fa9d1;
  --cyan-700:#1f7f9e;

  --success:#3ecf8e;
  --warning:#f0b94c;
  --danger:#f0554c;

  --surface-page:var(--ink-black);
  --surface-raised:var(--charcoal-2);
  --surface-sunken:var(--near-black);
  --surface-inverse:var(--off-white);

  --text-primary:var(--white);
  --text-secondary:var(--grey-400);
  --text-on-light:var(--near-black);
  --text-accent:var(--cyan-500);

  --border-subtle:var(--line-on-dark);
  --accent-primary:var(--cyan-500);
  --accent-secondary:var(--cyan-400);
}