/* atalov.com — общая дизайн-система
   Pixelify Sans — только латинские акценты (имя, метки). В нём плохая кириллица,
   поэтому русские заголовки набраны JetBrains Mono Bold, текст — IBM Plex Sans. */

@font-face { font-family: "Pixelify Sans"; font-weight: 400; font-display: swap;
  src: url("../fonts/pixelify-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Pixelify Sans"; font-weight: 600; font-display: swap;
  src: url("../fonts/pixelify-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/ibm-plex-sans-cyrillic-400-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap;
  src: url("../fonts/jetbrains-mono-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Бренд-палитра (исходные цвета — не менять без владельца сайта) */
  --brand-blue: #0224FF;
  --brand-navy: #081538;
  --brand-black: #0C0D01;
  --brand-cyan: #8CEEFF;
  --brand-mint: #91FFC0;
  --brand-violet: #653FFF;

  /* Семантические токены: компоненты используют только их */
  --bg: var(--brand-black);
  --bg-2: #14150A;
  --bg-code: var(--brand-navy);
  --line: #2B2D1E;
  --line-2: #3E4130;
  --fg: #ECEBE2;
  --fg-2: #AEAE9F;
  --fg-3: #77786A;
  --mint: var(--brand-mint);        /* главный акцент */
  --mint-ink: var(--brand-black);   /* текст на мятном фоне */
  --cyan: var(--brand-cyan);        /* инлайн-код, сноски */
  --violet: var(--brand-violet);    /* врезки note, рамки второго плана */
  --blue: var(--brand-blue);        /* рамка аватара, фирменные штрихи */
  --blue-text: #8FA0FF;
  --warn: #FFC857;
  --code-fg: #E4E8F5;

  --f-pixel: "Pixelify Sans", "JetBrains Mono", monospace;
  --f-text: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-head: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --px: 2px; /* размер «пикселя» для рамок и углов */
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #F3F2EA;
  --bg-2: #E9E8DE;
  --bg-code: var(--brand-navy);
  --line: #D5D4C6;
  --line-2: #B9B8A8;
  --fg: #16170D;
  --fg-2: #505145;
  --fg-3: #7A7B6D;
  --mint: #077A45;                  /* мятный, затемнённый для светлого фона */
  --mint-ink: #F3F2EA;
  --cyan: #006A80;
  --violet: var(--brand-violet);
  --blue: var(--brand-blue);
  --blue-text: var(--brand-blue);
  --warn: #9A5B00;
  --code-fg: #E4E8F5;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--mint); color: var(--mint-ink); }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--mint);
    text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { background: var(--mint); color: var(--mint-ink); text-decoration: none; }
a:focus-visible, button:focus-visible { outline: var(--px) solid var(--mint); outline-offset: 3px; }

/* Пиксельный угол: срезаем по одному «пикселю» в каждом углу */
.px-corners {
  clip-path: polygon(0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)),
    calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)),
    0 calc(100% - var(--px)));
}

.cursor { display: inline-block; width: .6em; height: 1.05em; margin-left: .1em;
  background: var(--mint); vertical-align: -.15em; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.kicker { font-family: var(--f-pixel); font-weight: 400; color: var(--mint);
  font-size: .95rem; letter-spacing: .02em; margin: 0; }

/* Верхняя панель */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 1200px; margin: 0 auto; padding: 18px 24px;
  font-family: var(--f-mono); font-size: 13px; color: var(--fg-2);
}
.topbar a { text-decoration: none; }
.topbar .crumbs { display: flex; gap: .5ch; flex-wrap: wrap; }
.topbar .crumbs span { color: var(--fg-3); }
.home-mark { font-family: var(--f-pixel); font-size: 16px; color: var(--fg); }
.home-mark b { color: var(--mint); font-weight: 400; }

.theme-toggle {
  font: inherit; font-family: var(--f-mono); font-size: 13px; color: var(--fg-2);
  background: none; border: var(--px) solid var(--line-2); padding: 3px 9px; cursor: pointer;
}
.theme-toggle:hover { color: var(--mint-ink); background: var(--mint); border-color: var(--mint); }

.site-footer {
  max-width: 1200px; margin: 0 auto; padding: 40px 24px 48px;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 12px; color: var(--fg-3);
}
.site-footer a { color: var(--fg-2); }
kbd { font-family: var(--f-mono); font-size: .92em; border: 1px solid var(--line-2);
  border-bottom-width: 2px; padding: 0 5px; color: var(--fg-2); }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  * { scroll-behavior: auto !important; }
}
.topbar.wide, .site-footer.wide { max-width: 1400px; }