/* ============================================================
   Design tokens — источник: /home/claude/geomarketing-site/design-system.md
   Не редактировать значения тут без синхронизации с design-system.md
   ============================================================ */

:root {
  /* Brand — цветовая схема "Глубокий тил + коралл" (решение пользователя
     2026-09-18, вариант 2 из предпросмотра test-design-color-2.html — принят
     как постоянная схема всего сайта, заменяет прежнюю "тёмно-синий + коралл"). */
  --color-primary-ink: #0F2A2E;
  --color-signal-blue: #1FA7C9;
  --color-signal-blue-8: rgba(31, 167, 201, 0.08);
  --color-accent-coral: #FF5A3C;
  --color-accent-coral-hover: #E8482C;
  --color-accent-coral-active: #CE3A20;
  --color-map-teal: #0FB5A6;
  --color-map-teal-10: rgba(15, 181, 166, 0.10);

  /* Neutrals */
  --color-neutral-900: #14161A;
  --color-neutral-600: #5B6472;
  --color-neutral-300: #D8DCE3;
  --color-neutral-100: #F4F6F9;
  --color-white: #FFFFFF;

  /* Semantic */
  --color-success: #1FA971;
  --color-warning: #E8A438;
  --color-error: #E2483C;
  --color-error-8: rgba(226, 72, 60, 0.08);

  /* Surfaces */
  --color-bg: var(--color-white);
  --color-surface: var(--color-neutral-100);
  --color-surface-raised: var(--color-white);
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-600);
  --color-border: var(--color-neutral-300);

  /* Shadows */
  --shadow-card: 0 4px 20px rgba(15, 42, 46, 0.06);
  --shadow-card-hover: 0 8px 28px rgba(15, 42, 46, 0.10);
  --shadow-focus: 0 0 0 3px rgba(31, 167, 201, 0.25);
  --shadow-focus-error: 0 0 0 3px rgba(226, 72, 60, 0.25);

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Spacing (8pt) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 24px;

  /* Fonts */
  --font-heading: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Fluid type scale */
  --text-h1: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
  --text-h3: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
  --text-h4: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-body-lg: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --text-body: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --text-caption: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
}

:root[data-theme="dark"] {
  --color-bg: #0E1116;
  --color-surface: #171B22;
  --color-surface-raised: #1D2230;
  --color-text: #F4F6F9;
  --color-text-muted: #9AA3B2;
  --color-border: #2A3040;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Авто-тёмная тема по prefers-color-scheme отключена (2026-10-07): она была
   доделана наполовину (тёмные заголовки на тёмном фоне) и на части браузеров
   делала текст нечитаемым. Сайт всегда светлый; color-scheme: only light
   также просит браузеры (Chrome Android, Яндекс, Samsung) не затемнять страницу
   принудительно. */
:root { color-scheme: only light; }

/* ---- Bootstrap variable bridge: перенаправляем токены дизайн-системы
   в переменные Bootstrap 5.3, чтобы не пересобирать Sass ---- */
:root {
  --bs-primary: var(--color-signal-blue);
  --bs-primary-rgb: 31, 167, 201;
  --bs-secondary: var(--color-text-muted);
  --bs-success: var(--color-success);
  --bs-success-rgb: 31, 169, 113;
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-error);
  --bs-danger-rgb: 226, 72, 60;
  --bs-light: var(--color-surface);
  --bs-dark: var(--color-primary-ink);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-2xl: var(--radius-2xl);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-link-color: var(--color-signal-blue);
  --bs-link-hover-color: var(--color-accent-coral-hover);
  --bs-heading-color: var(--color-primary-ink);
  --bs-box-shadow: var(--shadow-card);
}