/* Completage — визуальные токены (v3, «чисто и чётко»)
   Референс: OURA & CO. — гротеск, тёплая кремовая бумага, тёмно-коричневый,
   строгая модульная сетка на линиях 1px, крупные цифры.
   Метод: web_site/.claude/skills/minimalist-ui (макро-воздух, линии, тихая моторика).

   Подключать:
     <link rel="stylesheet" href="fonts-geist.css">   Geist 300/400/500/600, кириллица, base64
*/

:root{
  /* ── Гамма: тёплая бумага + тёмно-коричневый. Чистого белого и чёрного нет ── */
  --paper:    #F2EFE9;   /* фон страницы */
  --paper-2:  #EAE6DE;   /* вторая подложка */
  --card:     #FBFAF7;   /* карточка, поле ввода */
  --dark:     #2A211B;   /* тёмный блок, главная кнопка */
  --brown:    #3A2C23;   /* заголовки — фирменный тёмно-коричневый */

  --ink:      #262019;   /* основной текст */
  --ink-2:    #554C42;   /* вторичный текст */
  --mut:      #8A8175;   /* метки, подписи */
  --line:     #E2DDD3;   /* линии сетки — основной структурный элемент */
  --line-2:   #CFC7B9;   /* контрастная линия: рамка поля, кнопки */

  --accent:   #9A7F62;   /* тёплый тауп — редкий акцент */
  --stock:    #55663F;   /* олива — ТОЛЬКО «в наличии» */
  --warn:     #8A6A3B;   /* охра — «остатка не хватает» */

  /* ── Шрифт один на весь интерфейс ── */
  --sans: 'Geist', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ── Ритм: макро-воздух ── */
  --px: clamp(20px, 4.4vw, 64px);
  --py: clamp(56px, 8vw, 120px);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{
  font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.6;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0 }
button{ font-family:inherit; color:inherit; background:none; border:0; cursor:pointer }
input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit;
  border:0; background:none; outline:none; appearance:none; -webkit-appearance:none }
/* Сброс выше снимает с флажков и переключателей вид браузера — без этого галочку не видно
   вовсе, и кажется, что «не кликается». Рисуем сами, как .agree в кабинете: квадрат на линии,
   выбранный — заливкой. Переключатель отличается внутренним полем, углы остаются острыми. */
input[type=checkbox],input[type=radio]{ width:14px; height:14px; min-width:14px; flex:0 0 auto;
  padding:0; margin:3px 0 0; border:1px solid var(--line-2); background:var(--card); cursor:pointer }
input[type=checkbox]:checked{ background:var(--brown); border-color:var(--brown) }
input[type=radio]:checked{ background:var(--brown); border-color:var(--brown);
  box-shadow:inset 0 0 0 3px var(--card) }
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{ outline:1px solid var(--brown);
  outline-offset:2px }

/* ── Типографика: контраст размера, а не гарнитур ────────────
   Один гротеск. Заголовок — крупно, плотно, тёмно-коричневым. */
.display{ font-weight:500; letter-spacing:-.035em; line-height:1.02; color:var(--brown) }
.h1{ font-size:clamp(40px, 7vw, 96px) }
.h2{ font-size:clamp(26px, 3.6vw, 46px) }
.h3{ font-size:clamp(18px, 2vw, 24px); letter-spacing:-.02em; line-height:1.2 }

.lead{ font-size:clamp(15px,1.35vw,17px); line-height:1.55; color:var(--ink-2); max-width:52ch }

/* Метка — интерфейсный шёпот */
.lab{ font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mut) }

/* Крупная цифра в ячейке сетки — приём референса */
.num{ font-size:clamp(34px,4.4vw,60px); font-weight:400; letter-spacing:-.04em;
      line-height:.92; color:var(--brown) }

/* ── Сетка на линиях: структура вместо украшений ── */
.rule{ border-top:1px solid var(--line) }
.cell{ border-top:1px solid var(--line); padding:clamp(20px,2.4vw,34px) 0 }
.grid-lines{ display:grid; gap:0 }
.grid-lines > *{ border-top:1px solid var(--line); padding:clamp(20px,2.4vw,32px) clamp(16px,2vw,28px) }
@media (min-width:760px){
  .grid-lines > * + *{ border-left:1px solid var(--line) }
}

/* ── Управляющие элементы: острые, без теней ── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 26px; border-radius:0; transition:background .2s, color .2s, border-color .2s;
}
.btn-dark{ background:var(--dark); color:var(--paper) }
.btn-dark:hover{ background:#191310 }
.btn-dark:active{ transform:scale(.985) }
.btn-ghost{ border:1px solid var(--line-2); color:var(--ink-2) }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink) }

.pill{ display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); transition:.2s }
.pill:hover{ background:var(--dark); border-color:var(--dark); color:var(--card) }

/* ── Наличие: единственный цветовой сигнал ── */
.st{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; white-space:nowrap }
.st .dot{ width:6px; height:6px; border-radius:50%; background:var(--stock) }
.st.in{ color:var(--stock) }
.st.low{ color:var(--warn) }   .st.low .dot{ background:var(--warn) }
.st.lead{ color:var(--mut) }   .st.lead .dot{ background:var(--line-2) }

/* ── Моторика: присутствует, но незаметна ── */
@media (prefers-reduced-motion:no-preference){
  .rise{ opacity:0; transform:translateY(12px);
         animation:rise .6s cubic-bezier(.16,1,.3,1) forwards }
  @keyframes rise{ to{ opacity:1; transform:none } }
}