:root {
  /* Typography */
  --font: 'Montserrat', sans-serif;

  /* Ink / Text hierarchy */
  --ink: #0f1923;
  --ink-2: #2a3a4a;
  --ink-3: #56697a;
  --ink-4: #9aaab8;
  --ink-5: #c8d4dc;

  /* Brand Blues */
  --blue: #1a3a5c;
  --blue-hi: #2e6499;
  --blue-soft: #dce8f5;
  --blue-pale: #f0f5fb;

  /* Backgrounds */
  --bg: #f4f5f7;
  --white: #fff;
  --surf-2: #eef0f3;
  --surf-3: #e2e6ea;

  /* Status colors */
  --green: #1a6040;
  --green-l: #e0f0e8;
  --amber: #9a6e10;
  --red: #b83030;

  /* Borders */
  --border: rgba(15,25,35,.07);
  --border-md: rgba(15,25,35,.12);

  /* Shadows */
  --sh-sm: 0 2px 14px rgba(15,25,35,.07);
  --sh-md: 0 6px 32px rgba(15,25,35,.09);
  --sh-lg: 0 16px 60px rgba(15,25,35,.11), 0 4px 16px rgba(15,25,35,.06);

  /* Border radius */
  --r: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --pill: 999px;

  /* Layout */
  --w: 1260px;
  --px: 40px;
}

@media (max-width: 1024px) { :root { --px: 20px; } }
@media (max-width: 640px)  { :root { --px: 16px; } }