/* ════════════════════════════════════════════════════════
   REMONT — дизайн-токены и базовые компоненты · v1.0
   Подключение:
   <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;450;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="remont-tokens.css">
   ════════════════════════════════════════════════════════ */

:root{
  /* ---- цвет ---- */
  --ink:#16181D;                       /* текст, тёмные секции */
  --paper:#FAF8F4;                     /* основной фон сайта */
  --white:#FFFFFF;                     /* карточки, хедер, поля */
  --accent:#B8915A;                    /* латунь: линии, точки, обводки, ≤5% площади */
  --accent-ink:#96743F;                /* латунный ТЕКСТ на светлом (AA) */
  --accent-tint:rgba(184,145,90,.12);  /* латунные подложки */
  --accent-tint-strong:rgba(184,145,90,.16);
  --cta:#1E3A2F;                       /* только кнопки действия */
  --cta-hover:#2A4D3F;
  --cta-active:#183027;
  --muted:#6B6F76;                     /* вторичный текст на светлом */
  --line:rgba(22,24,29,.10);           /* разделители на светлом */
  --line-dark:rgba(255,255,255,.12);   /* разделители на тёмном */
  --success:#7FC8A4;                   /* только статус-точка «открыто» */
  --error:#A1452F;                     /* только ошибки форм */
  --disabled-bg:#E3E4E7;
  --disabled-text:#9A9DA3;

  /* ---- тени ---- */
  --shadow-card:0 20px 60px rgba(22,24,29,.10);
  --shadow-float:0 12px 36px rgba(22,24,29,.16);
  --shadow-cta:0 14px 30px -14px rgba(30,58,47,.55);
  --shadow-cta-hover:0 18px 36px -14px rgba(30,58,47,.6);
  --shadow-menu:0 40px 70px -24px rgba(22,24,29,.30);

  /* ---- радиусы ---- */
  --r-s:6px;   /* мини-чипы, чекбоксы */
  --r-m:8px;   /* кнопки, поля, соц-иконки */
  --r-l:12px;  /* icon-кнопки, rich CTA, бейджи-карточки */
  --r-xl:16px; /* карточки и крупные блоки */

  /* ---- движение ---- */
  --t-fast:.15s ease;
  --t-base:.18s ease;
  --ease-out:cubic-bezier(.22,.8,.3,1); /* drawer/модалки · 280ms */

  /* ---- шрифт ---- */
  --font:'Onest',sans-serif;
}

/* ════════ БАЗА ════════ */
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ════════ КНОПКИ ════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--r-m);border:none;cursor:pointer;white-space:nowrap;
  font-family:var(--font);font-weight:600;font-size:15px;line-height:1;
  transition:background var(--t-base),color var(--t-base),border-color var(--t-base);
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Primary — зелёная */
.btn-cta{background:var(--cta);color:var(--white);padding:14px 24px;}
.btn-cta:hover{background:var(--cta-hover);}
.btn-cta:active{background:var(--cta-active);}
.btn-cta:disabled{background:var(--disabled-bg);color:var(--disabled-text);cursor:not-allowed;}
.btn-cta--lg{padding:18px 32px;font-size:16px;}

/* Secondary — латунная обводка (светлый и тёмный фон) */
.btn-outline-accent{background:transparent;color:var(--accent-ink);border:1px solid var(--accent);padding:13px 24px;}
.dark .btn-outline-accent,.btn-outline-accent.on-dark{color:var(--accent);}
.btn-outline-accent:hover{background:var(--accent);color:var(--ink);}
.btn-outline-accent:active{background:#A07C46;border-color:#A07C46;color:var(--ink);}
.btn-outline-accent:disabled{border-color:var(--line);color:var(--disabled-text);background:transparent;cursor:not-allowed;}

/* Tertiary — ghost на тёмном */
.btn-ghost-dark{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.35);padding:13px 24px;}
.btn-ghost-dark:hover{border-color:var(--white);}
.btn-ghost-dark:active{background:rgba(255,255,255,.08);border-color:var(--white);}
.btn-ghost-dark:disabled{border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.35);cursor:not-allowed;}

/* Rich CTA — только хедер (54) и hero (62) */
.btn-calc{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--cta);color:var(--white);border:none;cursor:pointer;
  border-radius:var(--r-l);padding:0 22px;height:54px;white-space:nowrap;
  font-family:var(--font);box-shadow:var(--shadow-cta);
  transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.btn-calc:hover{background:var(--cta-hover);transform:translateY(-1px);box-shadow:var(--shadow-cta-hover);}
.btn-calc:active{background:var(--cta-active);transform:translateY(0);box-shadow:0 8px 20px -12px rgba(30,58,47,.5);}
.btn-calc:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-calc:disabled{background:var(--disabled-bg);color:var(--disabled-text);box-shadow:none;transform:none;cursor:not-allowed;}
.btn-calc .ic{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);
  display:inline-flex;align-items:center;justify-content:center;margin-left:-6px;flex:none;
}
.btn-calc .tx{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1;text-align:left;}
.btn-calc .tx strong{font-size:14.5px;font-weight:800;}
.btn-calc .tx small{font-size:11px;font-weight:500;opacity:.8;}
.btn-calc--lg{height:62px;padding:0 28px;}
.btn-calc--lg .tx strong{font-size:16px;}
.btn-calc--lg .tx small{font-size:11.5px;}

/* Icon button 48 (моб 44) */
.iconbtn{
  width:48px;height:48px;border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.iconbtn:hover{border-color:var(--accent);color:var(--accent-ink);}
.iconbtn:active{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-tint);}
.iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.iconbtn:disabled{color:var(--disabled-text);background:transparent;cursor:not-allowed;}
.iconbtn--44{width:44px;height:44px;}

/* Текстовая ссылка с латунным подчёркиванием */
.link-accent{
  font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;
  color:inherit;text-decoration:none;white-space:nowrap;
  border-bottom:2px solid var(--accent);padding-bottom:4px;
  transition:color var(--t-base);
}
.link-accent:hover{color:var(--accent-ink);}
.link-accent:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px;}

/* Пунктирная ссылка (utility-полоса, тёмный фон) */
.link-dashed{
  color:var(--accent);font-weight:600;text-decoration:none;
  border-bottom:1px dashed rgba(184,145,90,.6);padding-bottom:1px;
}
.link-dashed:hover{border-bottom-style:solid;}

/* Загрузка (вешать на primary/rich) */
.is-loading{pointer-events:none;}
.is-loading .tx,.is-loading .btn-label{opacity:.55;}
.spinner{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:rmSpin .8s linear infinite;
}
@keyframes rmSpin{to{transform:rotate(360deg);}}

/* ════════ БЕЙДЖИ И ЧИПЫ ════════ */
.badge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(22,24,29,.06);color:var(--muted);}
.badge--brass{background:var(--accent-tint-strong);color:var(--accent-ink);}
.chip-brass{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--accent-tint);color:var(--accent-ink);font-size:12.5px;font-weight:700;white-space:nowrap;
}
.dot-accent{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;display:inline-block;}
.dot-pulse{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(127,200,164,.18);flex:none;display:inline-block;}

/* ════════ ПОЛЯ ФОРМ ════════ */
.input{
  height:52px;border-radius:var(--r-m);border:1px solid rgba(22,24,29,.18);
  background:var(--white);padding:0 16px;width:100%;outline:none;
  font-family:var(--font);font-size:15px;color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input::placeholder{color:var(--disabled-text);}
.input:hover{border-color:rgba(22,24,29,.34);}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,145,90,.18);}
.input.is-error{border-color:var(--error);box-shadow:0 0 0 3px rgba(161,69,47,.12);}
.input:disabled{background:#F2F2F4;color:var(--disabled-text);border-color:var(--line);cursor:not-allowed;}
.fld-label{font-size:13px;font-weight:600;display:block;margin-bottom:8px;}
.fld-error{font-size:12px;color:var(--error);font-weight:500;margin-top:6px;display:block;}

/* ════════ ТИПОГРАФИЧЕСКИЕ ХЕЛПЕРЫ ════════ */
.h1{font-size:64px;line-height:1.05;font-weight:800;letter-spacing:-.02em;}
.h2{font-size:44px;line-height:1.1;font-weight:800;letter-spacing:-.02em;}
.h3{font-size:28px;line-height:1.25;font-weight:700;letter-spacing:-.01em;}
.lead{font-size:18px;line-height:1.6;color:var(--muted);}
.overline{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.caps-head{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);}
.price-num{font-size:52px;line-height:1;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.em-marker{font-style:normal;font-weight:800;background:linear-gradient(180deg,transparent 60%,rgba(184,145,90,.35) 60%);padding:0 2px;}
@media (max-width:767px){
  .h1{font-size:34px;line-height:1.1;}
  .h2{font-size:28px;line-height:1.15;}
  .h3{font-size:22px;}
  .lead{font-size:16px;line-height:1.55;}
  .price-num{font-size:38px;}
}

/* ════════ ДОСТУПНОСТЬ ════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .spinner{animation:rmSpin .8s linear infinite !important;} /* индикатор загрузки оставляем */
}