/* ===================== TOKENS / FOUNDATION CONTRACT ===================== */
:root{
  /* Primitive colors — canonical palette values used by semantic tokens. */
  --green-50:  #F2FAF6;
  --green-600: #15803D;
  --green-700: #146C43;

  --blue-50:  #EEF6FF;
  --blue-300: #9EC5E8;
  --blue-800: #0B4870;

  --neutral-100: #F4F6F9;
  --neutral-200: #ECEFF3;
  --neutral-300: #E5E7EB;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #111827;
  --neutral-900: #0F172A;

  --white: #FFFFFF;

  /* Semantic colors. Equal current values do not imply equal semantic roles. */
  --color-text-strong:    var(--neutral-900);
  --color-text-primary:   var(--neutral-800);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted:     var(--neutral-500);

  --color-surface-page: #FFF5E9;
  --color-surface:      var(--white);
  --color-border:       var(--neutral-300);

  --color-action-primary:       var(--green-600);
  --color-action-primary-hover: var(--green-700);
  --color-action-primary-soft:  var(--green-50);
  --color-on-action-primary:    var(--white);

  --color-link:          var(--blue-800);
  --color-focus-outline: #78C6A7;

  --color-error-text:   #B91C1C;
  --color-error-border: #FCA5A5;
  --info-bg:     var(--blue-50);
  --info-brd:    var(--blue-300);
  --info-ink:    var(--blue-800);

  /* Typography foundations. */
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-heading: "Onest", "Inter", ui-sans-serif, system-ui, sans-serif;
  --fz-base: 16px;
  --lh-base: 1.55;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;

  /* Spacing scale. Optical/component-specific values may remain local. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Global section rhythm. */
  --section-title-note-gap:   12px;
  --section-note-content-gap: 24px;
  /* Radius contract. */
  --radius-sm:   10px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-pill: 999px;
  /* Elevation contract. */
  --shadow-sm: 0 8px 24px rgba(0,0,0,.04);
  --shadow-md: 0 12px 28px rgba(0,0,0,.08);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.06);
  /* Motion contract: durations and easing are independently addressable. */
  --duration-fast:   120ms;
  --duration-normal: 180ms;
  --duration-slow:   250ms;
  --ease-standard: ease;
  --ease-out: ease-out;
  /* Layout foundations. */
  --layout-container: 1200px;
  --layout-gutter:    20px;
  --layout-section-y: 64px;
  /* Action buttons: shared geometry for primary landing-page CTA. */
  --button-height:      48px;
  --button-padding-x:   18px;
  --button-gap:         8px;
  --button-radius:      var(--radius-md);
  --button-font-size:   15px;
  --button-font-weight: 700;
  --button-line-height: 1.2;

  /* Generic fields. Component controls may intentionally use other dimensions. */
  --field-height:    48px;
  --field-padding-x: 14px;
  --field-padding-y: 12px;
  --field-radius:    var(--radius-md);
  --field-border:    var(--color-border);
}

/* Foundation breakpoint contract:
   640px  — primary mobile boundary
   768px  — content/tablet boundary
   980px  — navigation boundary
   1024px — desktop/tablet layout boundary
   Other thresholds remain component/content/capability queries. */
@media (min-width: 769px){
  :root{
    --section-title-note-gap: 14px;
    --section-note-content-gap: 28px;
  }
}

/* Responsive typography foundations */
@media (max-width: 1024px){ :root{ --fz-base: 15.5px; } } /* tablet */
@media (max-width: 640px){  :root{ --fz-base: 15px;   } } /* mobile */

/* Глобалка */
html{ font-size: var(--fz-base); }
body{
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  line-height: var(--lh-base);
  background: var(--color-surface-page); /* общий теплый фон — подложка страницы */
  margin: 0;
}

/* Контейнер/секция (общие, не блок-специфичные) */
.container{
  max-width: var(--layout-container);
  margin: 0 auto;
  padding-inline: var(--layout-gutter);
  box-sizing: border-box;
}
.section{
  padding-block: var(--layout-section-y);
}
.section--white{
  background: var(--color-surface);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50% + var(--layout-gutter));
}

/* ===================== Типографика ===================== */
/* Заголовки — адаптив через clamp: desktop / tablet / mobile */
h1, .h1{
  font-family: var(--font-heading);
  max-width: 22ch;   
  font-weight: 700;
  color: var(--color-text-strong);
    letter-spacing: -0.015em; 
  line-height: 1.08;
  margin: 0 0 var(--space-8);
  font-size: clamp(40px, 4.4vw, 64px);
}
h2, .h2{
  font-family: var(--font-heading);
  font-weight: 800; color: var(--color-text-strong);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.22;
  margin: var(--space-12) 0 .5rem;
}
h3, .h3{
  font-family: var(--font-heading);
  font-weight: 700; color: var(--color-text-strong);
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.25;
  margin: var(--space-6) 0 var(--space-3);
}

/* Параграф, мелкий текст */
p{ margin: 0 0 var(--space-4); }
.small{ font-size: .875rem; color: var(--color-text-secondary); }


/* ===================== Ссылки ===================== */
a{
  color: var(--color-link);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard);
}
a:hover{
  color: var(--color-action-primary-hover);
  text-decoration-style: solid;
}
a:focus-visible{
  outline: 3px solid rgba(21,128,61,.28);
  outline-offset: 2px;
}
a[disabled], .link--muted{ color: var(--color-text-muted); pointer-events:none; }


/* ===================== Кнопки (UI Kit — чистовая версия) ===================== */
.btn{
  --btn-bg:  var(--color-action-primary-soft);
  --btn-brd: var(--color-action-primary);
  --btn-ink: var(--color-action-primary-hover);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--button-gap);
  min-height:var(--button-height);
  padding:0 var(--button-padding-x);
  border:1px solid var(--btn-brd);
  border-radius:var(--button-radius);
  background:var(--btn-bg);
  color:var(--btn-ink);
  font-family:var(--font-sans);
  font-size:var(--button-font-size);
  font-weight:var(--button-font-weight);
  line-height:var(--button-line-height);
  letter-spacing:0;
  cursor:pointer;
  user-select:none;
  text-decoration:none;

  transition:
    background var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    transform .05s;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{
  outline:2px solid var(--color-focus-outline);
  outline-offset:2px;
}
.btn[disabled]{ opacity:.6; pointer-events:none; }

/* размеры: основной CTA всегда один; compact остаётся только для специальных UI-контролов */
.btn-sm{
  min-height:40px;
  padding-inline:12px;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:600;
}
.btn-lg{
  min-height:var(--button-height);
  padding-inline:var(--button-padding-x);
  border-radius:var(--button-radius);
}

/* виды */
.btn-primary{
  --btn-bg:  var(--color-action-primary);
  --btn-brd: var(--color-action-primary);
  --btn-ink: #fff;
}
/* SWAP-логика: filled → hover как outline (прозрачный фон, зелёный текст/бордер) */
.btn-primary:hover,
.btn-primary:focus-visible{
  --btn-bg:  transparent;
  --btn-brd: var(--color-action-primary-hover);
  --btn-ink: var(--color-action-primary-hover);
  background: transparent;
  color: var(--color-action-primary-hover);
}

.btn-outline{
  --btn-bg:  transparent;
  --btn-ink: var(--color-action-primary-hover);
  --btn-brd: var(--color-action-primary-hover);
  background: transparent;
}
/* SWAP-логика: outline → hover как filled (зелёная заливка, белый текст) */
.btn-outline:hover,
.btn-outline:focus-visible{
  --btn-bg:  var(--color-action-primary);
  --btn-brd: var(--color-action-primary);
  --btn-ink: #fff;
  background: var(--color-action-primary);
  color:#fff;
}

.btn-secondary{
  --btn-bg:  var(--info-bg);
  --btn-brd: var(--info-brd);
  --btn-ink: var(--info-ink);
}

.btn-ghost{
  --btn-bg:  transparent;
  --btn-brd: transparent;
  --btn-ink: var(--neutral-800);
  border-color: var(--neutral-300);
  background:#fff;
}

.btn-danger{
  --btn-bg:  #FEE2E2;
  --btn-brd: #FCA5A5;
  --btn-ink: #B91C1C;
}

/* иконки в кнопках */
.btn > .icon{ width:18px; height:18px; display:inline-block; }




/* ===================== Формы (inputs/select/textarea) ===================== */
.input, select, textarea{
  appearance:none;
  font-size:14.5px;
  width:100%; box-sizing:border-box;
  padding:var(--field-padding-y) var(--field-padding-x);
  border:1px solid var(--field-border);
  border-radius: var(--field-radius);
  background:#fff; color: var(--neutral-800);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  min-height: var(--field-height);
}
textarea{ min-height: 120px; resize: vertical; }

/* Native select primitive */
select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
  padding-right:42px;
}

.input:focus, select:focus, textarea:focus{
  outline:0;
  border-color:#B9E0D1;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
.input.is-invalid, select.is-invalid, textarea.is-invalid{
  border-color: #FCA5A5; box-shadow:0 0 0 4px rgba(220,38,38,.12);
}
label{ color: var(--neutral-700); font-weight:600; margin-bottom:6px; display:block; }

/* чекбоксы/радио (нативные) */
input[type="checkbox"], input[type="radio"]{
  accent-color: var(--color-action-primary);
  width: 16px; height: 16px; vertical-align: middle;
}

/* ===================== Карточки / Плашки ===================== */
.card{
  background:#fff; border:1px solid var(--neutral-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.card--elev2{ box-shadow: var(--shadow-md); }
.card--bleached{ background: var(--neutral-100); }

/* ===================== Бейджи / Чипы ===================== */
.badge{
  display:inline-block; font-size:12px; line-height:1;
  padding:4px 8px; border-radius:var(--radius-pill);
  background: var(--color-action-primary-soft);
  border:1px solid #B9E0D1; color: var(--color-action-primary-hover);
}
.tag{
  display:inline-block;
  cursor:pointer; font-size:14px; padding:6px 12px;
  border:1px solid var(--neutral-300);
  border-radius: var(--radius-pill); background:#fff; color: var(--neutral-800);
  transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.tag:hover{ transform: translateY(-1px); background: var(--neutral-100); border-color:rgba(34,197,94,.25); }
.tag:active{ transform:translateY(1px); }

/* ===================== Утилиты отступов (минимальный набор) ===================== */
.mt-0{ margin-top:0!important; } .mb-0{ margin-bottom:0!important; }
.mt-4{ margin-top:var(--space-4)!important; } .mb-4{ margin-bottom:var(--space-4)!important; }
.mt-6{ margin-top:var(--space-6)!important; } .mb-6{ margin-bottom:var(--space-6)!important; }
.mt-8{ margin-top:var(--space-8)!important; } .mb-8{ margin-bottom:var(--space-8)!important; }
.mt-12{ margin-top:var(--space-12)!important; } .mb-12{ margin-bottom:var(--space-12)!important; }

/* ===================== Доступность / motion ===================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,0,0); white-space:nowrap; border:0;
}





/* Без «прыжка» при тапе */
.btn-primary:active,
.btn-outline:active{ transform: translateY(0); }

/* Global interaction foundations */
html{ scroll-behavior:smooth; }
html, body{
  overflow-x:clip;
}

/* Text selection is available for page content.
   Interaction controls remain non-selectable without blocking copy/select globally. */
button,
.btn{
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
button[disabled]{ cursor:not-allowed; opacity:.8; }