/* ==========================================================================
   Küchenmontage Hamburg — Dark Redesign: Design-Tokens (ЧЕРНОВИК)
   Деплой-путь: /css/redesign-dark.css
   Здесь ТОЛЬКО токены (custom properties) + минимальная тёмная база,
   заскоупленная на body.km-dark — файл безопасен, даже если его случайно
   подключит страница старого дизайна (без класса km-dark ничего не меняет).
   Страничные классы (.wv-* и будущие) живут в инлайн-<style> каждой страницы.
   ========================================================================== */

:root {
  /* Фоны */
  --km-bg: #0C1B2A;            /* фон страницы */
  --km-surface: #12202F;       /* карточки/секции */
  --km-surface-deep: #0F1B28;  /* полоса под hero */

  /* Бордеры */
  --km-border: #1E2C3D;        /* крупные разделители (header/footer/полосы) */
  --km-border-card: #22334A;   /* карточки */
  --km-border-strong: #2E4258; /* кнопки-outline, бейджи, кружки шагов */
  --km-border-hover: #3A5270;  /* hover карточек */
  --km-border-faint: #192636;  /* тонкие разделители (шаги, низ футера) */

  /* Текст */
  --km-text-hi: #ffffff;       /* заголовки/акценты */
  --km-text: #b8b9bc;          /* основной */
  --km-text-body: #c8c9cc;     /* основной (плотные абзацы) */
  --km-text-mid: #a3a4a8;      /* вторичный */
  --km-text-dim: #8e8f93;      /* приглушённый */
  --km-text-faint: #5a5b5e;    /* едва видимый (haftung, копирайт) */

  /* Акценты бренда */
  --km-accent: #e8453c;        /* красный — primary-кнопки, логотип */
  --km-accent-hover: #f2554c;
  --km-salmon: #ff9d94;        /* лососевый — em в H1, eyebrow, ссылки-стрелки */
  --km-salmon-hover: #ffc4be;
  --km-salmon-border: #4a2f2c; /* бордер пилюли «Kurze Antwort» */

  /* Warning-блок */
  --km-warn-bg: #1b1812;
  --km-warn-border: #3a3220;
  --km-warn-text: #c8c0a8;
  --km-warn-strong: #e8dcb8;

  /* Радиусы */
  --km-radius-card: 12px;
  --km-radius-cta: 14px;       /* большая финальная CTA-секция */
  --km-radius-btn: 8px;
  --km-radius-pill: 99px;

  /* Типографика и сетка */
  --km-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --km-container: 820px;
}

/* --- Минимальная база тёмной темы (активна только на body.km-dark) --- */

body.km-dark {
  margin: 0;
  background-color: var(--km-bg);
  /* фон главной: сетка 64px на navy-градиенте */
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, #0B1A29 0%, #0C1B2A 100%);
  background-size: 64px 64px, 64px 64px, 100% 100%;
  background-attachment: fixed;
  background-repeat: repeat, repeat, no-repeat;
  color: var(--km-text);
  font-family: var(--km-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.km-dark *,
body.km-dark *::before,
body.km-dark *::after {
  box-sizing: border-box;
}

/* Текстовые ссылки внутри абзацев: underline с offset, hover — лососевый */
body.km-dark p a:not([class]) {
  color: var(--km-text-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--km-text-faint);
}

body.km-dark p a:not([class]):hover {
  text-decoration-color: var(--km-salmon);
}

/* ==========================================================================
   СВЕТЛЫЕ КАРТОЧКИ (решение Олега 21.07): белый фон + тёмный текст на navy.
   Двойные селекторы [$=] и [*= "… "] покрывают и мультиклассовые карточки
   (class="wk-card wk-prose"). QR-карточка исключена. Трастбар остаётся тёмным.
   ========================================================================== */
body.km-dark :is([class$="-card"], [class*="-card "], [class$="-faq"], [class*="-faq "], [class$="-finalcta"], [class*="-finalcta "], [class$="-limit"], [class*="-limit "], [class$="-factbox"], [class*="-factbox "], [class$="-quote"], [class*="-quote "], [class$="-table-wrap"], [class*="-table-wrap "]):not([class*="-qr-card"]) {
  background: #FFFFFF;
  border-color: #E3E1DB;
  color: #2A3440;
}
body.km-dark :is([class$="-card"], [class*="-card "], [class$="-faq"], [class*="-faq "], [class$="-finalcta"], [class*="-finalcta "], [class$="-limit"], [class*="-limit "], [class$="-factbox"], [class*="-factbox "], [class$="-quote"], [class*="-quote "], [class$="-table-wrap"], [class*="-table-wrap "]):not([class*="-qr-card"]):hover {
  border-color: #C9CDD4;
}
body.km-dark :is([class$="-card"], [class*="-card "], [class$="-faq"], [class*="-faq "], [class$="-finalcta"], [class*="-finalcta "], [class$="-limit"], [class*="-limit "], [class$="-factbox"], [class*="-factbox "], [class$="-quote"], [class*="-quote "], [class$="-table-wrap"], [class*="-table-wrap "]):not([class*="-qr-card"]) :is(h2, h3, h4, summary, strong, b, [class*="-limit-label"], [class$="-price"]) {
  color: #0C1B2A;
}
body.km-dark :is([class$="-card"], [class*="-card "], [class$="-faq"], [class*="-faq "], [class$="-finalcta"], [class*="-finalcta "], [class$="-limit"], [class*="-limit "], [class$="-factbox"], [class*="-factbox "], [class$="-quote"], [class*="-quote "], [class$="-table-wrap"], [class*="-table-wrap "]):not([class*="-qr-card"]) :is(p, li, td, th, blockquote, span:not([class*="btn"]):not([class*="pill"]):not([class*="eyebrow"])) {
  color: #3A4552;
}
body.km-dark :is([class$="-card"], [class*="-card "], [class$="-faq"], [class*="-faq "], [class$="-finalcta"], [class*="-finalcta "], [class$="-limit"], [class*="-limit "], [class$="-factbox"], [class*="-factbox "], [class$="-quote"], [class*="-quote "], [class$="-table-wrap"], [class*="-table-wrap "]) a:not([class*="btn"]) {
  color: #C2362E;
}
body.km-dark :is([class$="-card"], [class*="-card "], [class$="-faq"], [class*="-faq "], [class$="-finalcta"], [class*="-finalcta "], [class$="-limit"], [class*="-limit "], [class$="-factbox"], [class*="-factbox "], [class$="-quote"], [class*="-quote "], [class$="-table-wrap"], [class*="-table-wrap "]) [class*="-btn-outline"] {
  border-color: #0C1B2A;
  color: #0C1B2A;
}
body.km-dark :is([class$="-card"], [class*="-card "], [class$="-faq"], [class*="-faq "], [class$="-finalcta"], [class*="-finalcta "], [class$="-limit"], [class*="-limit "], [class$="-factbox"], [class*="-factbox "], [class$="-quote"], [class*="-quote "], [class$="-table-wrap"], [class*="-table-wrap "]) :is([class*="-answer-pill"], [class*="-eyebrow"]) {
  color: #C2362E;
  border-color: rgba(194, 54, 46, .35);
}