/* Дизайн-токены demchenko.blog. Единственный источник цвета, шрифта, отступов и движения.
   Страница тёмная, графит в тон фона портрета (#161616), без цветных акцентов в заголовках.
   Цвет живёт только в работах: скриншоты, сцены, рабочий стол.
   Токены страницы: --page, --surface, --text*, --hair*. Токены «экранов» (сцены, окна стола):
   --paper, --ink*, --line*, --blue (имя историческое: это акцент интерфейса, синий как в видео-референсе). */

@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/inter-tight-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/inter-tight-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url(../fonts/jetbrains-mono-cyrillic-wght-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-style:normal;font-weight:100 800;font-display:swap;
  src:url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* страница */
  --page:#161616;        /* фон, совпадает с фоном портрета */
  --surface:#1D1D1D;     /* плитки, поля */
  --surface-2:#252525;   /* hover плиток */
  --hair:rgba(255,255,255,.08);
  --hair-2:rgba(255,255,255,.15);
  --text:#F2F2EF;
  --text-2:#A8A8A3;
  --text-3:#86867F;

  /* экраны: сцены, окна рабочего стола, скриншоты (светлый интерфейс) */
  --bg:#F3F3F1;
  --paper:#FFFFFF;
  --sunk:#EDEDEB;
  --line:#E3E3E0;
  --line-2:#CFCFCB;
  --ink:#141414;
  --ink-2:#454542;
  --ink-3:#6B6B67;

  /* смысловые цвета интерфейса */
  --blue:#3F63F3;        /* акцент экранов: ключевое слово подписи, кнопка в окне, точки */
  --blue-ink:#2E4FD8;
  --blue-soft:#E8EDFE;
  --green:#22A05B;
  --green-ink:#17824A;
  --green-soft:#E2F4EA;
  --red:#D2423A;
  --red-soft:#FBE4E2;
  --amber:#F2C14E;       /* только стикер/заметка на рабочем столе */

  /* тёмные экраны */
  --night:#161616;
  --night-2:#1F1F1F;
  --night-line:rgba(255,255,255,.09);
  --night-ink:#F2F2EF;
  --night-ink-2:#A8A8A3;

  /* шрифт: один гротеск на всё, моно только для мелких меток */
  --font:'Inter Tight',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:var(--font);   /* наследие: где был засечный, теперь тот же гротеск */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-mac:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter Tight',sans-serif;
  --font-win:'Segoe UI Variable Text','Segoe UI Variable','Segoe UI','Inter Tight',sans-serif;

  /* шкала текста */
  --t-hero:clamp(3rem,1.2rem + 6.4vw,7.25rem);    /* 48 → 116 */
  --t-h2:clamp(2.25rem,1.3rem + 3.6vw,4.5rem);     /* 36 → 72 */
  --t-h3:clamp(1.3rem,1.1rem + .7vw,1.6rem);       /* 21 → 26 */
  --t-num:clamp(3.2rem,2rem + 5vw,6.5rem);
  --t-lead:clamp(1.125rem,1rem + .45vw,1.375rem);  /* 18 → 22 */
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-micro:.8125rem;
  --track-display:-.045em;
  --track-num:-.05em;

  /* отступы (шаг 4) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:144px;
  --gutter:clamp(16px,4vw,56px);
  --wrap:1328px;
  --section:clamp(96px,11vw,184px);

  /* форма: небольшие радиусы */
  --r-xs:6px;--r-sm:8px;--r:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px;

  /* тени нейтральные, только для окон и экранов */
  --sh-1:0 1px 2px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06);
  --sh-2:0 1px 2px rgba(0,0,0,.08),0 12px 32px -8px rgba(0,0,0,.18);
  --sh-3:0 2px 4px rgba(0,0,0,.08),0 28px 64px -14px rgba(0,0,0,.3);
  --sh-win:0 0 0 .5px rgba(0,0,0,.35),0 22px 70px -10px rgba(0,0,0,.55);

  /* движение */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --d-1:160ms;--d-2:280ms;--d-3:480ms;--d-4:720ms;

  color-scheme:dark;
}

@media (prefers-reduced-motion:reduce){
  :root{--d-1:1ms;--d-2:1ms;--d-3:1ms;--d-4:1ms}
}