/* maxstepanenko.com — «ПРОЯВКА» / darkroom
   Токены — закон. В компонентах не бывает сырых hex, не бывает магических чисел.
   Направление и обоснование: ./DESIGN.md
   Шрифты (кириллица проверена по subset U+0400):
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Ysabeau:wght@400;500&family=Mulish:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap&subset=cyrillic,latin" rel="stylesheet">
*/

:root {
  /* ── цвет: 6 имён, тёплая база + один холодный акцент ─────────────── */
  --komnata:      #231E1A;  /* фон страницы — тёплая тёмная комната      */
  --plita:        #15110E;  /* пластина происхождения, углубление, подвал */
  --svet:         #F3EDE3;  /* свет: основной текст, заливка главной кнопки */
  --dymka:        #A79C8E;  /* вторичный текст, подписи, мета            */
  --selen:        #8592D2;  /* селеновый отлив: ссылки, метки года       */
  --kraya:        #3A332C;  /* волосяная линия, край пластины            */

  /* производные — только светлота, хроматика не добавляется */
  --selen-press:  #A9B4E6;  /* ховер/фокус акцента                      */
  /* цифра года по обе стороны края пластины: снаружи тускнее, внутри светлее,
     обе половины держат ≥3:1 — иначе разрез не читается и знак пропадает */
  --god-vne:      color-mix(in srgb, var(--dymka), transparent 34%);
  --god-vnutri:   color-mix(in srgb, #F3EDE3, transparent 56%);
  --kraya-myagko: color-mix(in srgb, var(--kraya), transparent 35%);
  --svet-88:      color-mix(in srgb, var(--svet), transparent 12%);
  --lampa:        color-mix(in srgb, var(--svet), transparent 94%); /* свет увеличителя, 6% */

  /* ── шрифт: 2 гарнитуры + моно на факты ───────────────────────────── */
  --displey: "Ysabeau", Georgia, serif;
  --tekst:   "Mulish", "Segoe UI", system-ui, sans-serif;
  --fakt:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* кегли крупными скачками, промежуточных ступеней нет */
  --t-mono:  0.8125rem;  /* 13 — факт на пластине                      */
  --t-telo:  1.0625rem;  /* 17 — тело, мера 64ch                       */
  --t-lid:   1.3125rem;  /* 21 — лид, подпись под заголовком           */
  --t-h3:    1.75rem;    /* 28                                          */
  --t-h2:    2.75rem;    /* 44                                          */
  --t-h1:    clamp(2.75rem, 7vw, 6.5rem);  /* 44 → 104, дисплей        */
  --t-god:   clamp(3.5rem, 9vw, 6.5rem);   /* цифра года у края плиты  */

  --w-displey: 400;      /* вес вниз по мере роста кегля */
  --w-displey-plot: 500;
  --w-telo: 400;
  --w-telo-zhirn: 600;

  --ls-displey: -0.01em;
  --ls-telo: 0;
  --ls-fakt: 0.02em;
  --lh-displey: 1.0;
  --lh-telo: 1.65;
  --mera: 64ch;

  /* ── ритм: большие прыжки между блоками, тесно внутри блока ───────── */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --razdel: clamp(96px, 12vw, 192px);   /* между секциями              */
  --para-gap: clamp(24px, 4vw, 64px);   /* между пластиной и результатом */
  --kolonka: 1180px;
  --pole: max(20px, 5vw);

  /* ── одна радиус-логика: прямоугольно, 2px только у пластины ──────── */
  --r-nol:   0;
  --r-plita: 2px;

  /* ── одна теневая стратегия: теней нет ────────────────────────────── */
  --shadow: none;
  --volos:  1px solid var(--kraya);       /* разделение линией          */
  --stupen: var(--plita);                 /* разделение ступенью светлоты */
  --fokus:  0 0 0 2px var(--komnata), 0 0 0 4px var(--selen);

  /* ── движение: проявка ────────────────────────────────────────────── */
  --t-mikro:   200ms;   /* ховер, свет за курсором                     */
  --t-stroka:  420ms;   /* строка из-под маски                         */
  --t-proyav:  900ms;   /* проявка пластины                            */
  --shag:      90ms;    /* сдвиг между пластинами                      */
  --e-proyav:  cubic-bezier(.16, .84, .44, 1);
  --e-maska:   cubic-bezier(.22, 1, .36, 1);
  --e-mikro:   cubic-bezier(.2, .9, .3, 1);
  --pod-maskoy: 18px;   /* подъём строки, НЕ 28–46px                   */
  --proyav-ot: contrast(.35) brightness(1.3) saturate(.2) blur(2px);
  --proyav-do: contrast(1) brightness(1) saturate(1) blur(0);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-mikro: 1ms; --t-stroka: 1ms; --t-proyav: 1ms; --shag: 0ms;
    --proyav-ot: var(--proyav-do);
    --pod-maskoy: 0px;
  }
}

/* Сайт живёт только в тёмной комнате: светлой темы у него нет по решению
   направления. Схема объявлена, чтобы браузер не инвертировал формы. */
:root { color-scheme: dark; }

html { background: var(--komnata); }
body {
  margin: 0;
  background: var(--komnata);
  color: var(--svet);
  font: var(--w-telo) var(--t-telo)/var(--lh-telo) var(--tekst);
  -webkit-font-smoothing: antialiased;
}