/* Дизайн-система Атлетикс Корп. Источник правил: ПЕРЕДАЧА-САЙТ-2.0.md, раздел 4.
   Три цвета, три стиля текста. Больше в палитру не добавляем — любой "серый" это чёрный с прозрачностью. */

@font-face {
  font-family: 'Unbounded';
  src: url('fonts/unbounded/unbounded-variable.woff2') format('woff2-variations'),
       url('fonts/unbounded/unbounded-variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  src: url('fonts/golos-text/golos-text-variable.woff2') format('woff2-variations'),
       url('fonts/golos-text/golos-text-variable.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono/jetbrains-mono-variable.woff2') format('woff2-variations'),
       url('fonts/jetbrains-mono/jetbrains-mono-variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root{
  /* ЦВЕТ. Ровно три. Латунь только у того, что измеряется (кольцо у стопы, измерительные
     метки, моноширинные подписи). Логотип - не латунь (решение основателя 19.10). */
  --c-black: #0A0A08;
  --c-bone:  #F2F0EB;
  --c-brass: #DDA74F;
  /* Логотип: костяной белый, тот же цвет, что у основного текста - знак и заголовок
     читаются как одна система. Не чистый #FFFFFF. Файлы: logo-ac-light@2x/3x.png
     (на тёмном), logo-ac-dark@2x/3x.png (#0A0A08, на светлых страницах). */
  --c-logo:  #F2F0EB;

  /* "серый" получаем прозрачностью чёрного/кости, не вводя четвёртый цвет */
  --line-on-bone:  rgba(10,10,8,.14);
  --line-on-black: rgba(242,240,235,.16);
  --mute-on-bone:  rgba(10,10,8,.58);
  --mute-on-black: rgba(242,240,235,.62);

  /* КОНТЕКСТНЫЕ РОЛИ. Компоненты ссылаются на них, не на --c-black/--c-bone напрямую.
     РЕШЕНИЕ 15.10: тема выбирается на уровне страницы, не внутри неё. По умолчанию
     страница тёмная — так для главной и для большинства страниц сайта. */
  --surface:    var(--c-black);
  --on-surface: var(--c-bone);
  --line:       var(--line-on-black);
  --mute:       var(--mute-on-black);
}

/* СВЕТЛЫЕ СТРАНИЦЫ. Ставится на <html data-theme="light"> — целиком светлая страница,
   "научный журнал". Список по решению 15.10: Подход, Знания и статьи, юридические.
   Остальные страницы тёмные по умолчанию, без этого атрибута. */
:root[data-theme="light"]{
  --surface:    var(--c-bone);
  --on-surface: var(--c-black);
  --line:       var(--line-on-bone);
  --mute:       var(--mute-on-bone);
}

:root{

  /* ШРИФТ. Дисплейный вынесен в одну переменную — поменять на TT Lakes Neue Extended
     или другой кандидат можно одной строкой, без правок где-либо ещё. */
  --font-display: 'Unbounded', sans-serif;
  --font-text:     'Golos Text', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* ШКАЛА ТЕКСТА. Три стиля на экране максимум: заголовок (display),
     текст (text), подпись измерения (mono). Между собой другие размеры — вариации
     внутри этих трёх ролей, не новые стили. */
  --fs-display-xl: clamp(2.75rem, 7vw, 7.5rem);   /* первый экран, "ЧЕРЕЗ ДВИЖЕНИЕ." */
  --fs-display-l:  clamp(2rem, 4.2vw, 3.75rem);    /* заголовки блоков H2 */
  --fs-display-m:  clamp(1.375rem, 2.2vw, 1.75rem);/* подзаголовки, цитаты */
  --fs-text-l:      1.25rem;
  --fs-text:        1.0625rem;
  --fs-text-s:      0.9375rem;
  --fs-mono:        0.8125rem;
  --fs-mono-s:      0.75rem;

  --lh-display: 1.04;
  --lh-text: 1.55;
  --lh-mono: 1.3;

  /* ОТСТУПЫ. Шкала 4px. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* СЕТКА */
  --grid-max: 1280px;
  --grid-gap: 24px;
  --grid-pad: 20px;

  /* ГЕОМЕТРИЯ. Без скруглений — компания про измерение, не про "мягкий" софт. */
  --radius: 2px;
  --radius-pill: 999px; /* только для кнопки-пилюли "Записаться" в шапке, см. образец */

  --dur-fast: .15s;
  --dur: .3s;
  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 720px){
  :root{
    --grid-pad: 16px;
    --sp-8: 48px;
    --sp-9: 64px;
    --sp-10: 80px;
  }
}

/* ===================================================== БАЗА ============= */
*{ box-sizing: border-box; }
/* Страховка сверх точечных исправлений (чистка 16.10, пункт E18): где-то на узких экранах
   что-то неучтённое может растянуть документ шире вьюпорта (см. отчёт 03-чистка.md - сама
   причина на главной и "Подходе" найдена и исправлена отдельно, это именно страховка). */
html,body{ overflow-x: clip; }
html{ background: var(--surface); }
body{
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Заголовки — только тонкий Unbounded, как на первом экране прелоадера v7. Жирный не используем нигде. */
h1,h2,h3{
  font-family: var(--font-display);
  margin: 0;
  line-height: var(--lh-display);
  letter-spacing: -0.005em;
  font-weight: 200;
}
h1{ font-size: var(--fs-display-xl); }
h2{ font-size: var(--fs-display-l); font-weight: 300; }
h3{ font-size: var(--fs-display-m); font-weight: 300; }
p{ margin: 0; }
a{ color: inherit; }
.ds-mono{
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.ds-wrap{
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-pad);
}
.ds-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}
@media (max-width: 720px){
  .ds-grid{ grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
}

/* ===================================================== КНОПКИ =========== */
.ds-btn{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-text-s);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--on-surface);
  background: var(--on-surface);
  color: var(--surface);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  text-decoration: none;
}
.ds-btn:hover{ transform: translateY(-1px); opacity: .88; }
.ds-btn.ds-btn--outline{
  background: transparent;
  color: var(--on-surface);
  border-color: var(--on-surface);
}
.ds-btn.ds-btn--outline:hover{ background: var(--on-surface); color: var(--surface); }
/* тихая кнопка "Записаться" в шапке. Было с латунной рамкой — убрано по правке:
   латунь только у измерений (с 19.10 и у логотипа её нет), у кнопки её быть не должно. */
.ds-btn.ds-btn--quiet{
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--on-surface);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-4);
}
.ds-btn.ds-btn--quiet:hover{ background: var(--on-surface); color: var(--surface); }

/* ===================================================== ССЫЛКИ =========== */
.ds-link{
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: .2em;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.ds-link:hover{ text-decoration-color: var(--on-surface); }
.ds-link--brass{ text-decoration-color: var(--c-brass); }

/* ===================================================== КАРТОЧКИ ========= */
.ds-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: var(--surface);
}
.ds-card .ds-card__tag{
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  color: var(--mute);
  display: block;
  margin-bottom: var(--sp-3);
}
.ds-card h3{ margin-bottom: var(--sp-2); }
.ds-card p{ color: var(--mute); font-size: var(--fs-text-s); }

/* ===================================================== ФОРМЫ ============ */
.ds-field{ display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ds-field label{ font-size: var(--fs-text-s); font-weight: 600; }
.ds-field input, .ds-field textarea{
  font-family: var(--font-text);
  font-size: var(--fs-text);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--on-surface);
}
.ds-field input:focus, .ds-field textarea:focus{
  outline: none;
  border-color: var(--on-surface);
}

/* ===================================================== ПОДПИСИ ИЗМЕРЕНИЙ = */
/* Единственное место, где моноширинный шрифт разрешён. Используется у точек на суставах,
   у волны от шага, у цифр в блоке "Данные". Латунь — потому что это "измеряемое". */
.ds-measure{
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--c-brass);
  letter-spacing: .04em;
}
.ds-measure::before{ content: "· "; }

/* ===================================================== ИНВЕРСИЯ ========= */
/* Секция с цветом, обратным теме страницы. Решением 15.10 вариант "тёмная секция внутри
   светлой страницы" для тем сайта не используется (тема только на уровне страницы целиком) —
   класс оставлен как утилита на случай, если точечная инверсия понадобится для акцента. */
.ds-inverse{
  --surface:    var(--c-black);
  --on-surface: var(--c-bone);
  --line:       var(--line-on-black);
  --mute:       var(--mute-on-black);
  background: var(--surface);
  color: var(--on-surface);
}