:root {
  /* base + text */
  --mist-50: #F5F9FB;
  --mist-100: #E6EEF3;
  --surface: #FFFFFF;
  --line: #D5E2E9;
  --line-input: #C7D6DE;
  --ink: #10222C;
  --ink-60: #4A5C66;
  --ink-40: #7C8B94;
  /* Kolor bezczynnej ikony. Ink-40 na tekst nie wystarcza (2,99:1 na mist-100,
     wymóg 4,5:1), a jako ikona na tym tle też spada pod 3:1 — stąd o tyle
     ciemniejszy odcień, żeby kciuki i zakładka miały 3,78:1 na najciemniejszym
     z naszych teł. Ink-40 zostaje przy tym, co nie musi być czytelne. */
  --ink-45: #6B7A83;
  --on-ink: #AFC4CE;
  --on-ink-meta: #8CA3AE;

  /* navigation accent */
  --azure: #1C7093;
  --azure-700: #145670;
  --azure-soft: #DCEBF2;

  /* punchline + reactions */
  --rose-600: #C94272;
  --rose-700: #A8305A;
  --rose: #E8628E;
  --rose-soft: #FBE1EA;
  --rose-100: #F7C3D5;

  /* states */
  --jade: #17876B;
  --jade-soft: #DCF0E8;
  /* Głos w dół. Ceglasty, nie różowy: róż w tym serwisie należy do puenty i do
     zapisanego żartu, a zakładka stoi w tym samym rzędzie co kciuki. 4,63:1 na
     najciemniejszym z naszych teł i 4,53:1 na własnym tincie. */
  --terra: #B8431F;
  --terra-soft: #FCE6DC;

  /* semantic aliases */
  --bg-screen: var(--mist-50);
  --bg-alt: var(--mist-100);
  --bg-dark: var(--ink);
  --surface-card: var(--surface);
  --border-default: var(--line);
  --border-input: var(--line-input);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-60);
  --text-meta: var(--ink-40);
  --icon-idle: var(--ink-45);
  --text-on-dark: var(--on-ink);
  --text-meta-on-dark: var(--on-ink-meta);
  --text-link: var(--azure);
  --text-link-hover: var(--azure-700);
  --text-punchline: var(--rose-700);
  --action-primary: var(--rose-600);
  --action-primary-hover: var(--rose-700);
  --action-secondary: var(--azure);
  --action-secondary-hover: var(--azure-700);
  --accent-decorative: var(--rose);
  --focus-ring: var(--azure);
}