/* base.css — стартовый CSS по конвенции Client-First-derived.
   Источник правил: ~/.claude/refs/css-conventions.md. Копировать в проект целиком,
   удалять неиспользуемое в конце сборки. Шкала размеров — наша, по правилу «шаг 0.5rem».
   ────────────────────────────────────────────────────────────────────────── */

/* ── Слой 1: примитивы. Только палитра, в компонентах НЕ используются ───── */
:root{
  --base-neutral-000:#FFFFFF;
  --base-neutral-050:#F6F7FA;
  --base-neutral-100:#EEF0F5;
  --base-neutral-300:#C9CFDA;
  --base-neutral-600:#5B6474;
  --base-neutral-900:#131822;
  --base-neutral-950:#0E1218;
  --base-brand-500:#2340D6;
  --base-brand-300:#8C9BFF;
  --base-good-600:#12734F;
  --base-warn-600:#8E5410;
  --base-bad-600:#A63428;
}

/* ── Слой 2: семантика. Имя = НАЗНАЧЕНИЕ, никогда не цвет ───────────────── */
:root{
  --background-color-primary:var(--base-neutral-050);
  --background-color-secondary:var(--base-neutral-000);
  --background-color-tertiary:var(--base-neutral-100);
  --text-color-primary:var(--base-neutral-900);
  --text-color-secondary:var(--base-neutral-600);
  --text-color-brand:var(--base-brand-500);
  --border-color-primary:var(--base-neutral-300);
  --border-color-brand:var(--base-brand-500);
  --status-color-good:var(--base-good-600);
  --status-color-warn:var(--base-warn-600);
  --status-color-bad:var(--base-bad-600);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --background-color-primary:var(--base-neutral-950);
    --background-color-secondary:#151A22;
    --background-color-tertiary:#1B222C;
    --text-color-primary:#E8ECF3;
    --text-color-secondary:#8B96A6;
    --text-color-brand:var(--base-brand-300);
    --border-color-primary:#242C38;
    --border-color-brand:var(--base-brand-300);
  }
}
:root[data-theme="dark"]{
  --background-color-primary:var(--base-neutral-950);
  --background-color-secondary:#151A22;
  --background-color-tertiary:#1B222C;
  --text-color-primary:#E8ECF3;
  --text-color-secondary:#8B96A6;
  --text-color-brand:var(--base-brand-300);
  --border-color-primary:#242C38;
  --border-color-brand:var(--base-brand-300);
}

/* ── Fluid: ОДИН регулятор на весь проект. vw/vh на элементах — запрещены ─ */
html{ font-size: clamp(1rem, 0.833rem + 0.833vw, 1.25rem); }

/* ── Global styles ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--background-color-primary);
  color:var(--text-color-primary);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:var(--text-color-brand)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--border-color-brand); outline-offset:2px;
}
[class*="container-"]{margin-inline:auto}
.rich-text > :first-child{margin-top:0}
.rich-text > :last-child{margin-bottom:0}
.sr-only{position:absolute;clip-path:inset(0 0 99.9% 99.9%);overflow:hidden;width:1px;height:1px;white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── Структура: у каждого класса РОВНО одно свойство-владелец ──────────── */
.page-wrapper{}                                  /* глобальная обёртка, стилей почти нет */
.main-wrapper{}                                  /* семантический <main> */
.padding-global{padding-left:1.5rem;padding-right:1.5rem}   /* ТОЛЬКО горизонталь */
@media (max-width:479px){ .padding-global{padding-left:1rem;padding-right:1rem} }
.container-small{width:100%;max-width:40rem}
.container-medium{width:100%;max-width:56rem}
.container-large{width:100%;max-width:75rem}
.padding-section-small{padding-top:3rem;padding-bottom:3rem}      /* ТОЛЬКО вертикаль */
.padding-section-medium{padding-top:5rem;padding-bottom:5rem}
.padding-section-large{padding-top:8rem;padding-bottom:8rem}

/* ── Типографика ────────────────────────────────────────────────────────── */
h1,.heading-style-h1{font-size:3rem;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0}
h2,.heading-style-h2{font-size:2.25rem;line-height:1.14;letter-spacing:-.015em;text-wrap:balance;margin:0}
h3,.heading-style-h3{font-size:1.5rem;line-height:1.25;margin:0}
h4,.heading-style-h4{font-size:1.25rem;line-height:1.3;margin:0}
h5,.heading-style-h5{font-size:1.125rem;line-height:1.4;margin:0}
h6,.heading-style-h6{font-size:1rem;line-height:1.4;margin:0}
.text-size-tiny{font-size:0.75rem}
.text-size-small{font-size:0.875rem}
.text-size-regular{font-size:1rem}
.text-size-medium{font-size:1.25rem}
.text-size-large{font-size:1.5rem}
.text-weight-light{font-weight:300}
.text-weight-normal{font-weight:400}
.text-weight-medium{font-weight:500}
.text-weight-semibold{font-weight:600}
.text-weight-bold{font-weight:700}
.text-align-left{text-align:left}
.text-align-center{text-align:center}
.text-align-right{text-align:right}
.text-color-primary{color:var(--text-color-primary)}
.text-color-secondary{color:var(--text-color-secondary)}
.text-color-brand{color:var(--text-color-brand)}
.text-style-allcaps{text-transform:uppercase;letter-spacing:.08em}
.text-style-nowrap{white-space:nowrap}
.text-style-muted{color:var(--text-color-secondary)}
.text-style-nums{font-variant-numeric:tabular-nums}
.text-style-2lines{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Отступы: <prop>-<direction>-<size>. Стекать только однородное ──────── */
.margin-top-0{margin-top:0}
.margin-top-tiny{margin-top:0.25rem}
.margin-top-xxsmall{margin-top:0.5rem}
.margin-top-xsmall{margin-top:1rem}
.margin-top-small{margin-top:1.5rem}
.margin-top-medium{margin-top:2rem}
.margin-top-large{margin-top:3rem}
.margin-top-xlarge{margin-top:4rem}
.margin-top-xxlarge{margin-top:5rem}
.margin-top-huge{margin-top:6rem}
.margin-top-xhuge{margin-top:8rem}
.margin-top-xxhuge{margin-top:12rem}
.margin-bottom-0{margin-bottom:0}
.margin-bottom-tiny{margin-bottom:0.25rem}
.margin-bottom-xxsmall{margin-bottom:0.5rem}
.margin-bottom-xsmall{margin-bottom:1rem}
.margin-bottom-small{margin-bottom:1.5rem}
.margin-bottom-medium{margin-bottom:2rem}
.margin-bottom-large{margin-bottom:3rem}
.margin-bottom-xlarge{margin-bottom:4rem}
.margin-bottom-xxlarge{margin-bottom:5rem}
.margin-bottom-huge{margin-bottom:6rem}
.margin-bottom-xhuge{margin-bottom:8rem}
.margin-bottom-xxhuge{margin-bottom:12rem}
.margin-left-0{margin-left:0}
.margin-left-tiny{margin-left:0.25rem}
.margin-left-xxsmall{margin-left:0.5rem}
.margin-left-xsmall{margin-left:1rem}
.margin-left-small{margin-left:1.5rem}
.margin-left-medium{margin-left:2rem}
.margin-left-large{margin-left:3rem}
.margin-left-xlarge{margin-left:4rem}
.margin-left-xxlarge{margin-left:5rem}
.margin-left-huge{margin-left:6rem}
.margin-left-xhuge{margin-left:8rem}
.margin-left-xxhuge{margin-left:12rem}
.margin-right-0{margin-right:0}
.margin-right-tiny{margin-right:0.25rem}
.margin-right-xxsmall{margin-right:0.5rem}
.margin-right-xsmall{margin-right:1rem}
.margin-right-small{margin-right:1.5rem}
.margin-right-medium{margin-right:2rem}
.margin-right-large{margin-right:3rem}
.margin-right-xlarge{margin-right:4rem}
.margin-right-xxlarge{margin-right:5rem}
.margin-right-huge{margin-right:6rem}
.margin-right-xhuge{margin-right:8rem}
.margin-right-xxhuge{margin-right:12rem}
.margin-horizontal-0{margin-left:0;margin-right:0}
.margin-horizontal-tiny{margin-left:0.25rem;margin-right:0.25rem}
.margin-horizontal-xxsmall{margin-left:0.5rem;margin-right:0.5rem}
.margin-horizontal-xsmall{margin-left:1rem;margin-right:1rem}
.margin-horizontal-small{margin-left:1.5rem;margin-right:1.5rem}
.margin-horizontal-medium{margin-left:2rem;margin-right:2rem}
.margin-horizontal-large{margin-left:3rem;margin-right:3rem}
.margin-horizontal-xlarge{margin-left:4rem;margin-right:4rem}
.margin-horizontal-xxlarge{margin-left:5rem;margin-right:5rem}
.margin-horizontal-huge{margin-left:6rem;margin-right:6rem}
.margin-horizontal-xhuge{margin-left:8rem;margin-right:8rem}
.margin-horizontal-xxhuge{margin-left:12rem;margin-right:12rem}
.margin-vertical-0{margin-top:0;margin-bottom:0}
.margin-vertical-tiny{margin-top:0.25rem;margin-bottom:0.25rem}
.margin-vertical-xxsmall{margin-top:0.5rem;margin-bottom:0.5rem}
.margin-vertical-xsmall{margin-top:1rem;margin-bottom:1rem}
.margin-vertical-small{margin-top:1.5rem;margin-bottom:1.5rem}
.margin-vertical-medium{margin-top:2rem;margin-bottom:2rem}
.margin-vertical-large{margin-top:3rem;margin-bottom:3rem}
.margin-vertical-xlarge{margin-top:4rem;margin-bottom:4rem}
.margin-vertical-xxlarge{margin-top:5rem;margin-bottom:5rem}
.margin-vertical-huge{margin-top:6rem;margin-bottom:6rem}
.margin-vertical-xhuge{margin-top:8rem;margin-bottom:8rem}
.margin-vertical-xxhuge{margin-top:12rem;margin-bottom:12rem}
.padding-top-0{padding-top:0}
.padding-top-tiny{padding-top:0.25rem}
.padding-top-xxsmall{padding-top:0.5rem}
.padding-top-xsmall{padding-top:1rem}
.padding-top-small{padding-top:1.5rem}
.padding-top-medium{padding-top:2rem}
.padding-top-large{padding-top:3rem}
.padding-top-xlarge{padding-top:4rem}
.padding-top-xxlarge{padding-top:5rem}
.padding-top-huge{padding-top:6rem}
.padding-top-xhuge{padding-top:8rem}
.padding-top-xxhuge{padding-top:12rem}
.padding-bottom-0{padding-bottom:0}
.padding-bottom-tiny{padding-bottom:0.25rem}
.padding-bottom-xxsmall{padding-bottom:0.5rem}
.padding-bottom-xsmall{padding-bottom:1rem}
.padding-bottom-small{padding-bottom:1.5rem}
.padding-bottom-medium{padding-bottom:2rem}
.padding-bottom-large{padding-bottom:3rem}
.padding-bottom-xlarge{padding-bottom:4rem}
.padding-bottom-xxlarge{padding-bottom:5rem}
.padding-bottom-huge{padding-bottom:6rem}
.padding-bottom-xhuge{padding-bottom:8rem}
.padding-bottom-xxhuge{padding-bottom:12rem}
.padding-left-0{padding-left:0}
.padding-left-tiny{padding-left:0.25rem}
.padding-left-xxsmall{padding-left:0.5rem}
.padding-left-xsmall{padding-left:1rem}
.padding-left-small{padding-left:1.5rem}
.padding-left-medium{padding-left:2rem}
.padding-left-large{padding-left:3rem}
.padding-left-xlarge{padding-left:4rem}
.padding-left-xxlarge{padding-left:5rem}
.padding-left-huge{padding-left:6rem}
.padding-left-xhuge{padding-left:8rem}
.padding-left-xxhuge{padding-left:12rem}
.padding-right-0{padding-right:0}
.padding-right-tiny{padding-right:0.25rem}
.padding-right-xxsmall{padding-right:0.5rem}
.padding-right-xsmall{padding-right:1rem}
.padding-right-small{padding-right:1.5rem}
.padding-right-medium{padding-right:2rem}
.padding-right-large{padding-right:3rem}
.padding-right-xlarge{padding-right:4rem}
.padding-right-xxlarge{padding-right:5rem}
.padding-right-huge{padding-right:6rem}
.padding-right-xhuge{padding-right:8rem}
.padding-right-xxhuge{padding-right:12rem}
.padding-horizontal-0{padding-left:0;padding-right:0}
.padding-horizontal-tiny{padding-left:0.25rem;padding-right:0.25rem}
.padding-horizontal-xxsmall{padding-left:0.5rem;padding-right:0.5rem}
.padding-horizontal-xsmall{padding-left:1rem;padding-right:1rem}
.padding-horizontal-small{padding-left:1.5rem;padding-right:1.5rem}
.padding-horizontal-medium{padding-left:2rem;padding-right:2rem}
.padding-horizontal-large{padding-left:3rem;padding-right:3rem}
.padding-horizontal-xlarge{padding-left:4rem;padding-right:4rem}
.padding-horizontal-xxlarge{padding-left:5rem;padding-right:5rem}
.padding-horizontal-huge{padding-left:6rem;padding-right:6rem}
.padding-horizontal-xhuge{padding-left:8rem;padding-right:8rem}
.padding-horizontal-xxhuge{padding-left:12rem;padding-right:12rem}
.padding-vertical-0{padding-top:0;padding-bottom:0}
.padding-vertical-tiny{padding-top:0.25rem;padding-bottom:0.25rem}
.padding-vertical-xxsmall{padding-top:0.5rem;padding-bottom:0.5rem}
.padding-vertical-xsmall{padding-top:1rem;padding-bottom:1rem}
.padding-vertical-small{padding-top:1.5rem;padding-bottom:1.5rem}
.padding-vertical-medium{padding-top:2rem;padding-bottom:2rem}
.padding-vertical-large{padding-top:3rem;padding-bottom:3rem}
.padding-vertical-xlarge{padding-top:4rem;padding-bottom:4rem}
.padding-vertical-xxlarge{padding-top:5rem;padding-bottom:5rem}
.padding-vertical-huge{padding-top:6rem;padding-bottom:6rem}
.padding-vertical-xhuge{padding-top:8rem;padding-bottom:8rem}
.padding-vertical-xxhuge{padding-top:12rem;padding-bottom:12rem}

/* ── Вторичные утилиты ──────────────────────────────────────────────────── */
.background-color-primary{background-color:var(--background-color-primary)}
.background-color-secondary{background-color:var(--background-color-secondary)}
.background-color-tertiary{background-color:var(--background-color-tertiary)}
.max-width-xsmall{max-width:20rem}
.max-width-small{max-width:30rem}
.max-width-medium{max-width:40rem}
.max-width-large{max-width:52rem}
.max-width-full{max-width:100%}
.spacing-clean{margin:0;padding:0}
.hide{display:none}
@media (max-width:991px){ .hide-tablet{display:none} }
@media (max-width:767px){ .hide-mobile-landscape{display:none} }
@media (max-width:479px){ .hide-mobile{display:none} }
.overflow-hidden{overflow:hidden}
.aspect-ratio-square{aspect-ratio:1/1}
.aspect-ratio-landscape{aspect-ratio:4/3}
.aspect-ratio-widescreen{aspect-ratio:16/9}
.pointer-events-none{pointer-events:none}
.layer{position:absolute;inset:0}