/* ===========================================================
   СВОД — дизайн-система «Хаос на входе — один ряд на выходе»
   Слой 1: токены. Ничего, кроме переменных.
   =========================================================== */

:root {
  /* --- Цвет: база ---
     Контраст поднят относительно первой редакции: фон глубже,
     границы жёстче, вторичный текст темнее. Разница фона и карточки
     была 3 % — страница читалась одним пятном. */
  --canvas: #EDEFEA;
  --surface: #FFFFFF;
  --surface-2: #E2E5DE;
  --line: #CFD3C8;
  --line-strong: #ADB2A4;

  --ink-300: #9AA093;
  --ink-500: #676C61;
  --ink-600: #474C43;
  --ink-800: #23281F;
  --ink-900: #0E1310;

  /* --- Цвет: тёмная тема (секции 05 и 12) --- */
  --deep-bg: #0E1310;
  --deep-bg-2: #171D18;
  --deep-surface: rgba(255, 255, 255, .04);
  --deep-line: rgba(255, 255, 255, .10);
  --deep-text: #EDEFE9;
  --deep-muted: #8E948A;

  /* --- Цвет: сигнальные (только по смыслу) --- */
  --lime-500: #C9F24D;   /* сошлось / готово */
  --lime-600: #B4DC3C;
  --lime-100: #EDF9C8;
  --coral-500: #FF5A3C;  /* расхождение / ошибка */
  --coral-100: #FFE2DB;
  --coral-text: #B02A12;

  /* --- Типографика --- */
  --font-display: 'Unbounded', 'Inter Tight', system-ui, sans-serif;
  --font-text: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Десктопная шкала */
  --fs-display: 64px;   --lh-display: 68px;   --tr-display: -.03em;
  --fs-h2: 44px;        --lh-h2: 50px;        --tr-h2: -.025em;
  --fs-metric: 72px;    --lh-metric: 72px;
  --fs-h3: 24px;        --lh-h3: 32px;        --tr-h3: -.01em;
  --fs-h4: 19px;        --lh-h4: 27px;
  --fs-lead: 21px;      --lh-lead: 32px;
  --fs-body: 17px;      --lh-body: 28px;
  --fs-small: 15px;     --lh-small: 23px;
  --fs-caption: 13px;   --lh-caption: 19px;
  --fs-mono-label: 12px;
  --fs-mono-data: 14px;

  /* --- Сетка --- */
  --container: 1200px;
  --container-narrow: 880px;
  --container-text: 680px;
  --gutter: 24px;
  --col: 78px;
  --page-pad: 120px;

  /* --- Отступы (база 4) --- */
  --s-4: 4px;    --s-8: 8px;    --s-12: 12px;  --s-16: 16px;
  --s-20: 20px;  --s-24: 24px;  --s-32: 32px;  --s-40: 40px;
  --s-48: 48px;  --s-64: 64px;  --s-80: 80px;  --s-96: 96px;
  --s-120: 120px; --s-140: 140px; --s-160: 160px;

  --section-pad: 120px;
  --section-pad-dark: 140px;

  /* --- Радиусы --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;   /* кнопки, поля */
  --r-lg: 18px;   /* карточки */
  --r-xl: 28px;   /* крупные панели */

  /* --- Тени (холодные, на базе ink-900) --- */
  --sh-1: 0 1px 2px rgba(14, 19, 16, .04);
  --sh-2: 0 6px 16px rgba(14, 19, 16, .06), 0 1px 2px rgba(14, 19, 16, .04);
  --sh-3: 0 16px 40px rgba(14, 19, 16, .10), 0 2px 4px rgba(14, 19, 16, .05);
  --sh-4: 0 32px 80px rgba(14, 19, 16, .14);

  /* --- Движение --- */
  --t-instant: 120ms;
  --t-fast: 180ms;
  --t-base: 240ms;
  --t-slow: 320ms;
  --e-out: cubic-bezier(.2, 0, 0, 1);
  --e-in: cubic-bezier(.4, 0, 1, 1);
  --e-inout: cubic-bezier(.4, 0, .2, 1);

  /* --- Слои --- */
  --z-header: 100;
  --z-authorbar: 200;
  --z-panel: 300;
}

/* Планшет */
@media (max-width: 1279px) {
  :root { --page-pad: 40px; }
}
@media (max-width: 1023px) {
  :root {
    --page-pad: 32px;
    --fs-display: 46px; --lh-display: 50px;
    --fs-h2: 34px;      --lh-h2: 40px;
    --fs-metric: 56px;  --lh-metric: 58px;
    --section-pad: 88px;
    --section-pad-dark: 100px;
  }
}

/* Мобильная шкала — отдельная, а не пропорциональная */
@media (max-width: 767px) {
  :root {
    --page-pad: 20px;
    --gutter: 16px;

    --fs-display: 34px;  --lh-display: 38px;  --tr-display: -.02em;
    --fs-h2: 28px;       --lh-h2: 33px;
    --fs-metric: 44px;   --lh-metric: 46px;
    --fs-h3: 20px;       --lh-h3: 28px;
    --fs-h4: 17px;       --lh-h4: 25px;
    --fs-lead: 18px;     --lh-lead: 27px;
    --fs-body: 16px;     --lh-body: 26px;
    --fs-mono-label: 11px;

    --section-pad: 64px;
    --section-pad-dark: 72px;
  }
}

/* Узкие телефоны (320–360): Unbounded широкий, длинные слова вроде
   «пользователей» не влезают в 280px и распирают страницу. */
@media (max-width: 360px) {
  :root {
    --fs-display: 30px; --lh-display: 34px;
    --fs-h2: 24px;      --lh-h2: 29px;
    --fs-metric: 38px;  --lh-metric: 40px;
  }
}