/* variables.css — кольори, шрифти, відступи, тіні (єдині токени дизайну).
   :root = СВІТЛА тема (день). [data-theme="dark"] = ТЕМНА тема (ніч).
   Перемикання — js/theme.js (за часом доби 08:00–18:00 світла, інакше темна). */
:root {
  /* Кольори (синхронізовані з CONFIG.COLORS) */
  --primary: #1B3A6B;
  --primary-light: #2563EB;
  --accent: #F59E0B;
  --accent-green: #10B981;
  --danger: #EF4444;

  --text-dark: #111827;
  --text-gray: #6B7280;
  --bg-light: #F9FAFB;
  --bg-white: #FFFFFF;
  --bg-dark: #111827;

  /* Поверхні, що реагують на тему */
  --surface: #FFFFFF;          /* основний фон body */
  --surface-alt: #F9FAFB;      /* чергові секції */
  --surface-card: #FFFFFF;     /* картки */
  --on-surface: #111827;       /* текст на фоні */
  --on-surface-muted: #6B7280; /* приглушений текст */
  --border-soft: rgba(17,24,39,0.06);
  --header-bg: rgba(255,255,255,0.92);
  --logo-bg: linear-gradient(135deg, #1B3A6B, #0F1F3D); /* підкладка під білий лого */

  /* Градієнти */
  --gradient-hero: linear-gradient(135deg, #1B3A6B 0%, #0F1F3D 100%);
  --gradient-accent: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);

  /* Типографіка */
  --font-head: 'Exo 2', 'Inter', system-ui, sans-serif;   /* заголовки H1–H3 */
  --font-main: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif; /* body/нав/форми */
  --fs-h1: clamp(2.4rem, 5vw, 4rem);
  --fs-h2: clamp(1.8rem, 3.5vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-body: clamp(1rem, 1.4vw, 1.125rem);
  --lh-body: 1.65;

  /* Відступи / контейнер */
  --container: 1200px;
  --gap: 1.5rem;
  --section-py: clamp(3.5rem, 8vw, 6rem);

  /* Радіуси і тіні */
  --radius: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.10);
  --shadow-lg: 0 16px 48px rgba(17, 24, 39, 0.16);

  /* Переходи */
  --transition: 0.3s ease;

  /* Z-index */
  --z-header: 1000;
  --z-chatbot: 1100;
  --z-overlay: 2000;
}

/* ── ТЕМНА ТЕМА (ніч) ── */
[data-theme="dark"] {
  --surface: #0c1626;
  --surface-alt: #0f1f3d;
  --surface-card: #16233b;
  --on-surface: #e8edf5;
  --on-surface-muted: #9fb0c9;
  --border-soft: rgba(255,255,255,0.08);
  --header-bg: rgba(12,22,38,0.92);
  --logo-bg: transparent; /* у темряві білий лого видно без підкладки */
  --bg-light: #0f1f3d;
  --primary: #6aa3ff; /* світліший синій для заголовків на темному */
}

/* Плавний перехід при зміні теми */
body, .header, .card, section, .footer { transition: background var(--transition), color var(--transition); }