:root {
  /* primitive */
  --p-ink: #14213d;   /* derived: dark shade of the CI blue */
  --p-ink-2: #1b3260;
  --p-ink-3: #2b4678;
  --p-ground: #f5f5f6;   /* CI page ground */
  --p-white: #ffffff;
  --p-line: #d9dee8;
  --p-muted: #566175;
  --p-cyan: #5b9cd3;   /* CI light blue */
  --p-teal: #2e529f;   /* CI dark blue, link and accent text */
  --p-mint: #6bb4e6;   /* CI sky blue */
  --p-blue: #4576bf;   /* CI mid blue */
  --p-navy: #14264a;   /* derived: dark band */

  /* semantic */
  --color-bg: var(--p-ground);
  --color-surface: var(--p-white);
  --color-text: var(--p-ink);
  --color-text-soft: var(--p-muted);
  --color-line: var(--p-line);
  --color-link: var(--p-teal);
  --color-accent: var(--p-cyan);
  --color-rank: var(--p-teal);
  --color-dark: var(--p-navy);
  --color-dark-2: var(--p-ink-2);
  --color-on-dark: #f3f6f7;
  --color-on-dark-soft: #b4c3dc;

  /* type */
  --font-display: "Figtree", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* component */
  --radius-card: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 0 0 1px rgba(20, 33, 61, .08), 0 10px 22px -12px rgba(20, 33, 61, .3);
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}