@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-cyrillic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-cyrillic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-cyrillic.woff2") format("woff2");
}

:root {
  --color-paper: #fbfaf8;
  --color-surface: #ffffff;
  --color-surface-2: #f6f4ef;
  --color-ink: #15171b;
  --color-ink-2: #4a4f58;
  --color-ink-3: #68707d;
  --color-rule: #e4e1d9;
  --color-rule-2: #f0eee8;
  --color-accent: #1f4b99;
  --color-accent-2: #eaf0fa;
  --color-on-accent: #fff;
  --color-ok: #2f7a55;
  --color-warn: #936000;
  --color-danger: #9e2b25;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 28px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 64px;
  --radius-1: 3px;
  --radius-2: 5px;
  --radius-3: 7px;
  --container: 1180px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #101318;
    --color-surface: #171a21;
    --color-surface-2: #1c2028;
    --color-ink: #e9ebef;
    --color-ink-2: #b9c0cb;
    --color-ink-3: #a2abb8;
    --color-rule: #323946;
    --color-rule-2: #272d36;
    --color-accent: #8cb3ef;
    --color-accent-2: #1a2a43;
    --color-on-accent: #101318;
    --color-ok: #71c694;
    --color-warn: #ebb957;
    --color-danger: #f0968e;
  }
}

:root[data-theme="dark"] {
  --color-paper: #101318;
  --color-surface: #171a21;
  --color-surface-2: #1c2028;
  --color-ink: #e9ebef;
  --color-ink-2: #b9c0cb;
  --color-ink-3: #a2abb8;
  --color-rule: #323946;
  --color-rule-2: #272d36;
  --color-accent: #8cb3ef;
  --color-accent-2: #1a2a43;
  --color-on-accent: #101318;
  --color-ok: #71c694;
  --color-warn: #ebb957;
  --color-danger: #f0968e;
}