/* Local Growth OS — лендинг (localgrowthos.ru). Токены портированы из
   ai_docs/design/local-growth-os/landing/_ds/.../tokens/*.css — 1:1 значения,
   .btn/input/select классы написаны заново (в styles.css мокапа их нет — там
   только @import токенов, компоненты стилизуются через JS). См. docs/adr/0006. */

:root {
  --bg: oklch(0.985 0.005 80);
  --bg-elev: oklch(1 0 0);
  --bg-soft: oklch(0.965 0.008 80);
  --bg-muted: oklch(0.945 0.012 82);
  --bg-brand: oklch(0.97 0.012 150);
  --fg: oklch(0.22 0.012 80);
  --fg-muted: oklch(0.46 0.01 80);
  --fg-subtle: oklch(0.62 0.008 80);
  --border: oklch(0.9 0.01 80);
  --border-strong: oklch(0.82 0.012 80);
  --border-focus: oklch(0.55 0.13 155);
  --accent: oklch(0.62 0.13 155);
  --accent-hover: oklch(0.56 0.14 155);
  --accent-soft: oklch(0.94 0.04 155);
  --accent-fg: oklch(0.99 0 0);
  --accent-text: oklch(0.42 0.13 155);
  --danger: oklch(0.58 0.17 28);
  --danger-soft: oklch(0.96 0.025 28);
  --shadow-sm: 0 1px 0 oklch(0 0 0 / 0.04);
  --shadow-md: 0 1px 2px oklch(0 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.05);
  --shadow-lg: 0 1px 0 oklch(0 0 0 / 0.04), 0 24px 48px -12px oklch(0 0 0 / 0.10), 0 8px 24px -8px oklch(0 0 0 / 0.06);

  --radius-base: 10px;
  --radius-xs: calc(var(--radius-base) * 0.4);
  --radius-sm: calc(var(--radius-base) * 0.7);
  --radius-md: var(--radius-base);
  --radius-lg: calc(var(--radius-base) * 1.4);
  --radius-xl: calc(var(--radius-base) * 1.8);

  --d-gap-xs: 6px;
  --d-gap-sm: 10px;
  --d-gap-md: 16px;
  --d-gap-lg: 24px;
  --d-gap-xl: 36px;
  --d-pad-card: 40px;
  --d-input-h: 44px;

  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --text-2xs: 11px;
  --text-xs: 12.5px;
  --text-sm: 13.5px;
  --text-base: 15px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-4xl: 38px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Кнопки — .btn базовый + модификаторы (написаны заново из токенов, в мокапе
   готовых классов нет). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--d-gap-xs);
  height: var(--d-input-h);
  padding: 0 var(--d-gap-lg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--accent-fg);
  text-decoration: none;
}

.btn-secondary {
  background: var(--bg-elev);
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--bg-soft);
  color: var(--fg);
  text-decoration: none;
}

/* Поля формы. */
.field { display: flex; flex-direction: column; gap: var(--d-gap-xs); }

.field-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--fg-muted);
}

.field-input,
.field-select {
  height: var(--d-input-h);
  padding: 0 var(--d-gap-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-base);
}
.field-input:focus,
.field-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-error {
  font-size: var(--text-xs);
  color: var(--danger);
}

/* Hero-слайдер (Task 14a: backend/public/js/landing.js). */
.hero-slider { position: relative; }
.hero-slide[hidden] { display: none; }
.hero-dots { display: flex; gap: var(--d-gap-xs); justify-content: center; }
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--border-strong);
}
.hero-dot.is-active { background: var(--accent); }

/* FAQ-аккордеон. */
.faq-item[hidden] { display: none; }

/* Таб-переключатель #widget-demo. */
.widget-demo-tab[hidden] { display: none; }
.widget-demo-tab-btn {
  background: transparent;
  color: var(--fg-muted);
}
.widget-demo-tab-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
}