/* ============================================================
   ktrene.ru — дизайн-токены
   Направление: белый лист, чёрно-белая фотография, лайм как
   графика, приглушённый шалфей как второй голос.
   Референсы: постер «Reserve 50 minutos» + кадр с лаймовой линией.
   ============================================================ */

/* ── Шрифты (самохост, кириллица; никаких запросов на сторонние CDN) ── */
@font-face {
  font-family: 'Onest';
  src: url('fonts/onest-cyrillic.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  src: url('fonts/onest-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

:root {
  /* ══ ЦВЕТ ═══════════════════════════════════════════════════
     Белый лист. Чернила почти чёрные с зелёным подтоном.
     Тёплая глина — акцент-графика; яркий зелёный в интерфейсе не используем.
     Шалфей — второй голос: статусы, приглушённые подложки.            */

  --ground:        #FFFFFF;
  --ground-alt:    oklch(0.973 0.007 150);   /* чередующаяся полоса */
  --surface:       #FFFFFF;
  --surface-sunk:  oklch(0.966 0.009 150);   /* поле ввода, утопленное */

  --ink:           oklch(0.225 0.016 155);
  --ink-2:         oklch(0.468 0.018 155);
  --ink-3:         oklch(0.645 0.014 155);

  --line:          oklch(0.908 0.008 150);
  --line-strong:   oklch(0.800 0.012 150);

  --lime:          oklch(0.745 0.105 48);    /* legacy name: тёплая глина */
  --lime-dim:      oklch(0.885 0.055 48);    /* мягкая подложка */
  --lime-ink:      oklch(0.285 0.040 42);    /* текст поверх акцента */

  --sage:          oklch(0.580 0.055 152);
  --sage-ink:      oklch(0.415 0.058 152);
  --sage-wash:     oklch(0.958 0.018 152);

  --sand:          oklch(0.930 0.045 88);    /* групповое занятие, редко */
  --sand-ink:      oklch(0.455 0.060 84);

  --focus:         oklch(0.545 0.155 250);

  /* ══ ТИПОГРАФИКА ════════════════════════════════════════════
     Шкала сдержанная: заголовок работает пропорцией и разрядкой,
     а не кеглем. Крупная типографика — приём постера, не веб-страницы. */

  --font-ui:      'Onest', ui-sans-serif, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-text:    var(--font-ui);

  --t-hero:  clamp(2.05rem, 1.34rem + 2.95vw, 3.90rem);
  --t-h2:    clamp(1.52rem, 1.24rem + 1.18vw, 2.28rem);
  --t-h3:    clamp(1.10rem, 1.04rem + 0.26vw, 1.28rem);
  --t-lead:  clamp(1.00rem, 0.97rem + 0.16vw, 1.10rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --lh-hero: 1.02;
  --lh-head: 1.14;
  --lh-lead: 1.52;
  --lh-body: 1.62;

  --tr-hero: -0.022em;
  --tr-head: -0.015em;
  --tr-micro: 0.11em;

  /* ══ РИТМ ═══════════════════════════════════════════════════ */
  --s-hair: 2px;
  --s-xs:   6px;
  --s-sm:  10px;
  --s-md:  14px;
  --s-lg:  22px;
  --s-xl:  34px;
  --s-2xl: 54px;
  --s-3xl: 88px;
  --s-4xl: 142px;

  --sec-tight:  clamp(30px, 3.2vw, 48px);
  --sec-normal: clamp(48px, 5.4vw, 80px);
  --sec-open:   clamp(64px, 7.4vw, 112px);

  --measure: 62ch;
  --page:    1180px;
  --page-wide: 1400px;

  /* ══ ФОРМА ══════════════════════════════════════════════════ */
  --r-media:  2px;   /* фото — прямой угол, как в печати */
  --r-input:  8px;
  --r-btn:    6px;   /* почти прямоугольная кнопка, не pill */
  --r-slot:   6px;
  --r-card:  10px;
  --r-pill: 999px;

  --sh-lift: none;                                   /* на белом листе тени не нужны */
  --sh-pop:  0 14px 32px -20px oklch(0.25 0.02 150 / 0.28);

  /* ══ ДВИЖЕНИЕ ═══════════════════════════════════════════════ */
  --d-tap:   110ms;
  --d-state: 240ms;
  --d-enter: 520ms;
  --d-scene: 880ms;

  --e-out:   cubic-bezier(0.16, 0.84, 0.24, 1);
  --e-soft:  cubic-bezier(0.32, 0.08, 0.24, 1);
  --e-snap:  cubic-bezier(0.30, 1.02, 0.42, 1);

  color-scheme: light;
}

/* ── Тёмная тема ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:       oklch(0.185 0.012 155);
    --ground-alt:   oklch(0.218 0.012 155);
    --surface:      oklch(0.228 0.012 155);
    --surface-sunk: oklch(0.162 0.010 155);
    --ink:          oklch(0.950 0.008 150);
    --ink-2:        oklch(0.775 0.012 150);
    --ink-3:        oklch(0.618 0.012 150);
    --line:         oklch(0.300 0.012 155);
    --line-strong:  oklch(0.400 0.014 155);
    --lime:         oklch(0.730 0.095 48);
    --lime-dim:     oklch(0.380 0.050 48);
    --lime-ink:     oklch(0.955 0.015 50);
    --sage:         oklch(0.700 0.058 152);
    --sage-ink:     oklch(0.780 0.050 152);
    --sage-wash:    oklch(0.268 0.030 152);
    --sand:         oklch(0.780 0.070 88);
    --sand-ink:     oklch(0.860 0.055 88);
    --focus:        oklch(0.680 0.130 250);
    --sh-pop:       0 14px 32px -20px oklch(0.05 0.01 150 / 0.70);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:       oklch(0.185 0.012 155);
  --ground-alt:   oklch(0.218 0.012 155);
  --surface:      oklch(0.228 0.012 155);
  --surface-sunk: oklch(0.162 0.010 155);
  --ink:          oklch(0.950 0.008 150);
  --ink-2:        oklch(0.775 0.012 150);
  --ink-3:        oklch(0.618 0.012 150);
  --line:         oklch(0.300 0.012 155);
  --line-strong:  oklch(0.400 0.014 155);
  --lime:         oklch(0.730 0.095 48);
  --lime-dim:     oklch(0.380 0.050 48);
  --lime-ink:     oklch(0.955 0.015 50);
  --sage:         oklch(0.700 0.058 152);
  --sage-ink:     oklch(0.780 0.050 152);
  --sage-wash:    oklch(0.268 0.030 152);
  --sand:         oklch(0.780 0.070 88);
  --sand-ink:     oklch(0.860 0.055 88);
  --focus:        oklch(0.680 0.130 250);
  --sh-pop:       0 14px 32px -20px oklch(0.05 0.01 150 / 0.70);
}