/* Токены страницы «Экосбор под ключ». Один источник для цветов, форм, шрифтов, движения. */
:root {
  color-scheme: light;

  /* Цвет */
  --bg: #ffffff;          /* фон страницы */
  --bg-soft: #f4f5f0;     /* серо-зелёная подложка карточек и таблеток */
  --ink: #171a17;         /* чернила */
  --ink-2: #4a4f48;       /* текст второго плана */
  --muted: #7a7f76;       /* приглушённый текст, подписи */
  --line: #e3e5de;        /* тонкие линии */
  --sage: #dbe7c9;        /* маркер-таблетка, зелёная карточка */
  --sage-2: #c9dab3;      /* маркер при наведении, тень маркера */
  --moss: #1f4d3a;        /* кнопки */
  --moss-ink: #f3f7ee;    /* текст на кнопке */
  --photo-fallback: linear-gradient(160deg, #e7e6df 0%, #c9cbc0 45%, #8f9a7d 100%); /* пока нет hero.jpg */

  /* Формы */
  --r-xl: 32px;           /* карточки */
  --r-lg: 22px;           /* врезка, мелкие карточки */
  --r-md: 12px;
  --r-pill: 999px;        /* таблетки: навигация, кнопки, теги */

  /* Тени */
  --shadow-card: 0 20px 50px rgba(23, 26, 23, .08);
  --shadow-float: 0 8px 24px rgba(23, 26, 23, .10);

  /* Шрифты */
  --font-display: 'Outfit', 'Manrope', system-ui, sans-serif;
  --font-text: 'Manrope', system-ui, -apple-system, sans-serif;
  --weight-display: 300;
  --tracking-display: -0.02em;

  /* Размеры текста */
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-h2: clamp(30px, 3.6vw, 48px);
  --text-h1: clamp(34px, 5vw, 66px);

  /* Сетка */
  --page-max: 1360px;
  --page-gutter: clamp(16px, 3vw, 40px);
  --icon-stroke: 1.6;

  /* Движение */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: .2s;
  --dur-slow: .9s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121412;
    --bg-soft: #1a1d19;
    --ink: #f1f3ec;
    --ink-2: #c9cdc3;
    --muted: #8d928a;
    --line: #2a2e28;
    --sage: #2f4a2c;
    --sage-2: #3a5b35;
    --moss: #9fd0a8;
    --moss-ink: #0f1a12;
    --photo-fallback: linear-gradient(160deg, #3a4136 0%, #55634c 55%, #2a3625 100%);
    --shadow-card: 0 20px 50px rgba(0, 0, 0, .4);
    --shadow-float: 0 8px 24px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121412;
  --bg-soft: #1a1d19;
  --ink: #f1f3ec;
  --ink-2: #c9cdc3;
  --muted: #8d928a;
  --line: #2a2e28;
  --sage: #2f4a2c;
  --sage-2: #3a5b35;
  --moss: #9fd0a8;
  --moss-ink: #0f1a12;
  --photo-fallback: linear-gradient(160deg, #3a4136 0%, #55634c 55%, #2a3625 100%);
  --shadow-card: 0 20px 50px rgba(0, 0, 0, .4);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, .45);
}