/*
 * Avitologia v4 - глубокий нейтральный фон, бирюзовый акцент, без «плашечного» янтаря.
 */
:root {
  --bg: #080a0b;
  --bg-elevated: #0c1014;
  --bg-card: #12161c;
  --bg-card-hover: #161b22;
  --border: rgba(244, 244, 245, 0.07);
  --border-strong: rgba(244, 244, 245, 0.12);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-dim: #0f766e;
  --accent-soft: rgba(45, 212, 191, 0.14);
  --accent-glow: rgba(45, 212, 191, 0.22);
  --warn: #f87171;
  --warn-soft: rgba(248, 113, 113, 0.1);
  --on-accent: #042f2e;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --font: "DM Sans", system-ui, "Segoe UI", sans-serif;
  --font-display: "Syne", system-ui, sans-serif;

  --header-bg: rgba(8, 10, 11, 0.72);
  --header-blur: 18px;
  --shadow-menu: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --tap-highlight: rgba(45, 212, 191, 0.18);
  --selection-bg: rgba(45, 212, 191, 0.35);
  --selection-fg: #042f2e;

  --page-bg-1: rgba(45, 212, 191, 0.06);
  --page-bg-2: rgba(99, 102, 241, 0.05);
  --page-bg-3: rgba(8, 10, 11, 0.92);

  --meta-theme-color: #080a0b;

  /* Высота полосы шапки без safe-area (padding + лого/меню); для отступа main под fixed header */
  --site-header-bar: 4.8125rem;
}

html.theme-light {
  color-scheme: light;
  --bg: #fafaf9;
  --bg-elevated: #f4f4f5;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --border: rgba(24, 24, 27, 0.08);
  --border-strong: rgba(24, 24, 27, 0.14);
  --text: #18181b;
  --muted: #71717a;
  --accent: #0d9488;
  --accent-hover: #14b8a6;
  --accent-dim: #0f766e;
  --accent-soft: rgba(13, 148, 136, 0.12);
  --accent-glow: rgba(13, 148, 136, 0.15);
  --warn: #dc2626;
  --warn-soft: rgba(220, 38, 38, 0.08);
  --on-accent: #f0fdfa;

  --header-bg: rgba(250, 250, 249, 0.82);
  --header-blur: 18px;
  --shadow-menu: 0 20px 50px rgba(24, 24, 27, 0.12);
  --shadow-card: 0 8px 30px rgba(24, 24, 27, 0.08);
  --shadow-card-hover: 0 16px 40px rgba(24, 24, 27, 0.1);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --tap-highlight: rgba(13, 148, 136, 0.15);
  --selection-bg: rgba(13, 148, 136, 0.22);
  --selection-fg: #134e4a;

  --page-bg-1: rgba(13, 148, 136, 0.06);
  --page-bg-2: rgba(99, 102, 241, 0.04);
  --page-bg-3: rgba(250, 250, 249, 0.97);

  --meta-theme-color: #fafaf9;

  --site-header-bar: 4.8125rem;
}