/* ==========================================================================
   ЭНЕРГЕТ — тема оформления
   Построена от фирменного #E74014. Все пары «текст / фон» проверены расчётом
   по WCAG 2.1; результаты — в комментариях у соответствующих переменных.

   Нейтральные тона несут примесь фирменного тона (hue 34°, хрома 0.002–0.014),
   поэтому серый не выглядит мёртвым и читается как часть системы.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Шрифты

   Файлы лежат в /fonts/. Все три подрезаны до кириллицы, латиницы, цифр
   и типографской пунктуации — вместе 42 КБ.

   Доступные начертания: Magistral 700, Gilroy 400 и 700. Промежуточных
   весов нет, поэтому в теме используются только эти три — 500 и 600
   браузер подделал бы синтетическим утолщением, а это грязно выглядит
   на кириллице.

   В Magistral нет знака рубля — суммы набираются Gilroy.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Magistral';
  src: url('/fonts/magistral-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/gilroy-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/gilroy-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* ---- Палитра: сырые значения ------------------------------------------
     Напрямую в разметке не использовать. Работать только с ролями ниже.   */

  --raw-n-0:   #FFFDFC;
  --raw-n-50:  #FAF7F6;
  --raw-n-100: #F2EDEC;
  --raw-n-200: #E5DEDC;
  --raw-n-300: #D1C8C6;
  --raw-n-400: #A69C99;
  --raw-n-500: #827875;
  --raw-n-600: #625856;
  --raw-n-700: #433B39;
  --raw-n-800: #2A2422;
  --raw-n-900: #181211;
  --raw-n-950: #0D0908;

  --raw-accent:        #E74014;  /* фирменный, без изменений */
  --raw-accent-strong: #C82F00;  /* нажатие, кнопка в тёмной схеме */
  --raw-accent-text:   #B62600;  /* ссылки и мелкий текст на светлом */
  --raw-accent-light:  #FF7352;  /* акцент для тёмной схемы */
  --raw-accent-soft:   #FFEAE3;  /* заливка-подложка, светлая */
  --raw-accent-softdk: #481C12;  /* заливка-подложка, тёмная */

  --raw-success:    #1D7D3E;
  --raw-warning:    #A06700;
  --raw-danger:     #B7262B;
  --raw-success-dk: #62C37A;
  --raw-warning-dk: #EEB154;
  --raw-danger-dk:  #F2716A;

  /* ---- Роли: светлая схема ---------------------------------------------- */

  --surface:          var(--raw-n-0);    /* фон страницы */
  --surface-raised:   var(--raw-n-50);   /* карточки, панели */
  --surface-sunken:   var(--raw-n-100);  /* полосы секций, таблицы через строку */
  --surface-inverse:  var(--raw-n-950);  /* тёмные блоки внутри светлой страницы */

  --content:          var(--raw-n-900);  /* 18.27:1 — основной текст */
  --content-second:   var(--raw-n-700);  /* 10.77:1 — подписи, лид */
  --content-muted:    var(--raw-n-600);  /*  6.79:1 — сноски, служебное */
  --content-inverse:  var(--raw-n-50);   /* текст на surface-inverse */

  --border:           var(--raw-n-200);  /* разделители, декоративные линии */
  --border-strong:    var(--raw-n-500);  /*  4.23:1 — поля ввода, границы UI */

  --accent:           var(--raw-accent);        /*  4.03:1 — плашки, кнопки, крупный текст */
  --accent-hover:     var(--raw-accent-strong);
  --accent-text:      var(--raw-accent-text);   /*  6.34:1 — ссылки, мелкий текст */
  --accent-soft:      var(--raw-accent-soft);
  --on-accent:        #FFFFFF;                  /*  4.08:1 — текст на кнопке, от 18px */

  --success:      var(--raw-success);  /* 5.11:1 */
  --warning:      var(--raw-warning);  /* 4.67:1 */
  --danger:       var(--raw-danger);   /* 6.23:1 */
  --success-soft: #E3F6E6;
  --warning-soft: #FFEFD5;
  --danger-soft:  #FFE9E6;

  --focus-ring: var(--raw-accent);     /* 4.03:1 к фону — виден */

  /* ---- Типографика ------------------------------------------------------- */

  --font-heading: 'Magistral', 'Gilroy', system-ui, sans-serif;
  --font-body:    'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 — сноски, подписи к таблицам */
  --text-sm:   0.875rem;  /* 14 — вспомогательное */
  --text-base: 1rem;      /* 16 — основной текст */
  --text-lg:   1.125rem;  /* 18 — лид, крупный текст */
  --text-xl:   1.375rem;  /* 22 — h4 */
  --text-2xl:  1.75rem;   /* 28 — h3 */
  --text-3xl:  2.25rem;   /* 36 — h2 */
  --text-4xl:  3rem;      /* 48 — h1 */
  --text-5xl:  3.75rem;   /* 60 — первый экран, десктоп */

  --leading-tight:  1.15;  /* заголовки от 28px */
  --leading-snug:   1.3;   /* заголовки до 28px */
  --leading-normal: 1.55;  /* основной текст */

  --tracking-tight: -0.02em;  /* крупные заголовки */
  --tracking-wide:   0.06em;  /* надзаголовки капсом */

  --measure: 68ch;  /* предельная длина строки основного текста */

  /* ---- Пространство (шаг 4px) -------------------------------------------- */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container: 1280px;
  --gutter: var(--space-4);

  /* ---- Форма ------------------------------------------------------------- */
  /* Резкий радиус: инженерная подача, чертёж. Один на всю тему, не смешивать. */

  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(13, 9, 8, 0.06);
  --shadow:    0 2px 8px rgba(13, 9, 8, 0.08);
  --shadow-lg: 0 8px 32px rgba(13, 9, 8, 0.12);

  --transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Тёмная схема — не инверсия светлой: акцент осветляется, иначе проваливается
   в фон, а границы наоборот подтягиваются вверх по светлоте.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:         var(--raw-n-950);
    --surface-raised:  var(--raw-n-900);
    --surface-sunken:  var(--raw-n-800);
    --surface-inverse: var(--raw-n-50);

    --content:         var(--raw-n-50);   /* 18.59:1 */
    --content-second:  var(--raw-n-300);  /* 12.07:1 */
    --content-muted:   var(--raw-n-400);  /*  7.40:1 */
    --content-inverse: var(--raw-n-900);

    --border:          var(--raw-n-800);
    --border-strong:   var(--raw-n-500);  /*  4.62:1 */

    --accent:          var(--raw-accent-strong);
    --accent-hover:    var(--raw-accent);
    --accent-text:     var(--raw-accent-light);  /* 7.39:1 */
    --accent-soft:     var(--raw-accent-softdk);
    --on-accent:       #FFFFFF;                  /* 5.44:1 */

    --success:      var(--raw-success-dk);  /*  9.07:1 */
    --warning:      var(--raw-warning-dk);  /* 10.43:1 */
    --danger:       var(--raw-danger-dk);   /*  6.93:1 */
    --success-soft: #14301C;
    --warning-soft: #33260C;
    --danger-soft:  #3A1512;

    --focus-ring: var(--raw-accent-light);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  }
}

/* Ручной переключатель — те же значения, но по атрибуту */
[data-theme="dark"] {
  --surface:         var(--raw-n-950);
  --surface-raised:  var(--raw-n-900);
  --surface-sunken:  var(--raw-n-800);
  --surface-inverse: var(--raw-n-50);

  --content:         var(--raw-n-50);
  --content-second:  var(--raw-n-300);
  --content-muted:   var(--raw-n-400);
  --content-inverse: var(--raw-n-900);

  --border:          var(--raw-n-800);
  --border-strong:   var(--raw-n-500);

  --accent:          var(--raw-accent-strong);
  --accent-hover:    var(--raw-accent);
  --accent-text:     var(--raw-accent-light);
  --accent-soft:     var(--raw-accent-softdk);
  --on-accent:       #FFFFFF;

  --success:      var(--raw-success-dk);
  --warning:      var(--raw-warning-dk);
  --danger:       var(--raw-danger-dk);
  --success-soft: #14301C;
  --warning-soft: #33260C;
  --danger-soft:  #3A1512;

  --focus-ring: var(--raw-accent-light);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Базовые стили
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--content);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 3vw, var(--text-5xl)); }
h2 { font-size: clamp(1.625rem, 1.2rem + 2vw, var(--text-3xl)); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); line-height: var(--leading-snug); }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); }

/* Надзаголовок секции — капсом, разрядка, акцентом */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-2);
}

/* Числа в таблицах и калькуляторах — одинаковой ширины, колонки не пляшут */
.num, td.num, .stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ---- Кнопки -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;              /* область нажатия */
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-lg);     /* 18px — при этом размере контраст 4.08:1 достаточен */
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn-secondary {
  background: transparent;
  color: var(--content);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--content); color: var(--content); }

/* ---- Поля ---------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field label {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--content-second);
}

.field input,
.field textarea,
.field select {
  min-height: 44px;
  padding: var(--space-3);
  background: var(--surface);
  color: var(--content);
  border: 1px solid var(--border-strong);   /* 4.23:1 — граница различима */
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-base);
}

.field input::placeholder { color: var(--content-muted); }

.field .error { color: var(--danger); font-size: var(--text-sm); }
.field input[aria-invalid="true"] { border-color: var(--danger); }

/* Фокус виден всегда — не убирать outline без замены */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Таблицы ------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--content-second);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr:hover { background: var(--surface-sunken); }

/* ---- Раскладка ----------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(var(--space-16), 10vw, var(--space-24)); }
.section-tight { padding-block: var(--space-12); }

/* Асимметричные раскладки: заголовок в узкой колонке, содержимое в широкой */
.split-4-8 { display: grid; gap: var(--space-8); }
.split-5-7 { display: grid; gap: var(--space-8); }

/* Без этого широкий потомок (таблица, преформат) не даёт колонке сжаться
   и на узком экране появляется горизонтальный скролл всей страницы. */
.split-4-8 > *, .split-5-7 > * { min-width: 0; }

/* Таблицы шире экрана прокручиваются сами, а не тянут за собой страницу */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 480px; }

@media (min-width: 900px) {
  :root { --gutter: var(--space-8); }
  .split-4-8 { grid-template-columns: 4fr 8fr; gap: var(--space-12); }
  .split-5-7 { grid-template-columns: 5fr 7fr; gap: var(--space-12); }
}

/* ---- Движение ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Печать -------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .btn, nav, footer { display: none; }
}