/* ============================================================
   DentUp Audit — дизайн-токены (единственный источник).
   Слоёв больше нет: styles.css, landing.css и seo-content.css
   используют только эти переменные. Тёмная «сцена» голосового
   режима — набор --stage-*, включается классом .stage-scope.
   Брейкпоинты (media-запросы в файлах компонентов):
   640 / 768 / 1024 / 1280 / 1536 + prefers-reduced-motion + print.
   ============================================================ */

/* ---------- Шрифты: Onest (текст) + Manrope 800 (акцент) ---------- */
/* Самохостинг woff2, кириллица + латиница, font-display: swap. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/onest-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/onest-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-cyrillic-800-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caveat 700 — рукописные акценты: номера в списках SEO-страниц,
   числа-акценты лендинга и проза полосы методологии (.strip p).
   Два сабсета одной семьи: латиница (в ней цифры) + кириллица. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/caveat-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/caveat-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Caveat 500 — тоньше, для рукописной прозы полосы методологии (.strip p). */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/caveat-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/caveat-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* ---------- Палитра: светлая «бумажная» база ---------- */
  --paper: #f8f6f1; /* фон страниц */
  --paper-raised: #ffffff; /* карточки, панели */
  --paper-tint: #f1ede3; /* вторичные подложки */
  --ink: #1a1a1a; /* основной текст */
  --ink-soft: #4a524d; /* вторичный текст */
  --ink-muted: #687060; /* плейсхолдеры, подписи */
  --line: #e2e0da; /* разделители */
  --line-strong: #c8c5bc;

  /* Бренд: глубокий тил + фирменный лайм + терракота */
  --teal-900: #0d3d33;
  --teal-700: #155248; /* заголовки, шапка */
  --teal-500: #1a6b5a; /* ссылки, активные состояния */
  --teal-300: #2e9e83;
  --teal-tint: #e8f3f0; /* подложка активных блоков */
  --lime-500: #afca78; /* CTA, прогресс */
  --lime-600: #96b35f; /* hover CTA */
  --lime-tint: #f3f7e9;
  --terra-500: #c97d2a; /* вторичные акценты, «внимание» */
  --terra-tint: #fdf3e7;
  --white: #ffffff;

  /* Роли тил-акцентов. Текст/иконки на подложках страницы читают
     --accent/--accent-strong; залитые тил-поверхности (кнопки, чипы)
     продолжают читать --teal-700/--teal-500 с белым текстом. В светлой
     теме роли совпадают с палитрой; тёмная светлит только текстовые. */
  --accent: var(--teal-500);
  --accent-strong: var(--teal-700);
  /* Текст на tint-подложках и бумаге: в светлой теме — глубокий тил. */
  --tint-ink: var(--teal-900);
  /* Приглушённый текст на залитом тиле (бейджи, tour-cta, оверлеи). */
  --teal-tint-ink: var(--teal-tint);

  /* Семантика (цвет + светлая подложка) */
  --ok: #2a7a4a;
  --ok-tint: #edf7f2;
  --warn: #c97d2a;
  --warn-tint: #fdf3e7;
  --danger: #b84040;
  --danger-tint: #fdf0f0;
  --info: #1a6b5a;
  --info-tint: #e8f3f0;

  /* ---------- Тёмная «сцена» голосового режима (M3) ---------- */
  --stage-bg: #1c2321;
  --stage-surface: #242e2a;
  --stage-text: #f4f6f3;
  --stage-text-soft: #c7cbc4;
  --stage-line: #3a453f;
  --stage-accent: var(--lime-500);

  /* ---------- Типографика ---------- */
  --font-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Manrope", "Onest", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;

  /* Fluid-шкала: минимум на 360px, максимум на 1280px+ */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12–13 */
  --text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); /* 14–15 */
  --text-md: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16–17 */
  --text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18–20 */
  --text-xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); /* 22–28 */
  --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); /* 28–36 */
  --text-3xl: clamp(2.125rem, 1.8rem + 1.4vw, 3rem); /* 34–48 */

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---------- Отступы и размеры ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --container: 1280px;
  --container-landing: 1440px;
  --container-narrow: 760px;

  /* ---------- Радиусы и тени ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-card: 20px;
  --radius-btn: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgb(26 26 26 / 0.06), 0 4px 16px rgb(26 26 26 / 0.07);
  --shadow-pop: 0 2px 6px rgb(26 26 26 / 0.1), 0 12px 32px rgb(26 26 26 / 0.14);

  /* ---------- Поведение ---------- */
  --focus-ring: 0 0 0 3px rgb(46 158 131 / 0.45);
  --transition-fast: 140ms ease;
  --touch-target: 44px;

  /* Контрольные ширины адаптивного чек-листа (layout-тесты) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ---------- Тёмная тема ---------- */
/* Включается атрибутом data-theme="dark" на <html>: инлайн-скрипт в
   <head> каждой страницы восстанавливает выбор из localStorage до
   первой отрисовки, переключатель — theme.js. Перекрашивается только
   палитра: компоненты продолжают читать var(). Поверхности — семья
   тёмной сцены голосового режима (--stage-*); залитые тил/лайм
   сохраняются вместе с белым текстом на них, текстовые роли тила
   светлеют (--accent/--accent-strong). */
[data-theme="dark"] {
  color-scheme: dark;

  --paper: #121815;
  --paper-raised: #1a211e;
  --paper-tint: #222b26;

  --ink: #f2f5f1;
  --ink-soft: #c3cac3;
  --ink-muted: #8d968d;

  --line: #2c3630;
  --line-strong: #404c45;

  --accent: #5cbf9f;
  --accent-strong: #86d7bb;
  --tint-ink: #86d7bb;
  --teal-tint: #1d2a26;
  --teal-tint-ink: #bfe0d3;
  --lime-600: #bdd98a; /* hover CTA на тёмном светлеет, а не темнеет */
  --lime-tint: #262f1e;
  --terra-500: #d99c52;
  --terra-tint: #302718;

  --ok: #5cb87f;
  --ok-tint: #1c2b21;
  --warn: #d99c52;
  --warn-tint: #302718;
  --danger: #e28b8b;
  --danger-tint: #322020;
  --info: #5cbf9f;
  --info-tint: #1d2a26;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.45);
  --shadow-pop: 0 2px 6px rgb(0 0 0 / 0.45), 0 12px 32px rgb(0 0 0 / 0.5);
}

/* Выделение: светлая пара (лайм-подложка + тёмный тил) на тёмном
   теряется — оставляем её в обе стороны, цвета инвертируются. */
[data-theme="dark"] ::selection {
  background: var(--lime-500);
  color: var(--teal-900);
}

/* Печать всегда светлая: тёмные значения палитры откатываются к
   исходным, компоненты при этом не трогаются. */
@media print {
  [data-theme="dark"] {
    color-scheme: light;

    --paper: #f8f6f1;
    --paper-raised: #ffffff;
    --paper-tint: #f1ede3;
    --ink: #1a1a1a;
    --ink-soft: #4a524d;
    --ink-muted: #687060;
    --line: #e2e0da;
    --line-strong: #c8c5bc;
    --accent: #1a6b5a;
    --accent-strong: #155248;
    --tint-ink: #0d3d33;
    --teal-tint: #e8f3f0;
    --teal-tint-ink: #e8f3f0;
    --lime-600: #96b35f;
    --lime-tint: #f3f7e9;
    --terra-500: #c97d2a;
    --terra-tint: #fdf3e7;
    --ok: #2a7a4a;
    --ok-tint: #edf7f2;
    --warn: #c97d2a;
    --warn-tint: #fdf3e7;
    --danger: #b84040;
    --danger-tint: #fdf0f0;
    --info: #1a6b5a;
    --info-tint: #e8f3f0;
    --shadow-card: 0 1px 2px rgb(26 26 26 / 0.06), 0 4px 16px rgb(26 26 26 / 0.07);
    --shadow-pop: 0 2px 6px rgb(26 26 26 / 0.1), 0 12px 32px rgb(26 26 26 / 0.14);
  }
}

/* Сцена: тёмный контекст для голосового режима (включается классом). */
.stage-scope {
  --surface: var(--stage-bg);
  --text: var(--stage-text);
}

/* Скрытие: универсальное, перекрывает display любых компонентов. */
.hidden {
  display: none !important;
}

/* ---------- Базовая типографика и каркас ---------- */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--paper);
  overflow-wrap: break-word;
}

/* Мобильные браузеры: минимум 16px в полях ввода — без системного зума. */
input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 1rem;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  color: var(--accent-strong);
  margin: 0 0 var(--space-4);
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--text-3xl);
}
h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-xl);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-strong);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--lime-tint);
  color: var(--teal-900);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}