/* ============================================================
   Radio «Віра Life» — Design Tokens
   Кольори витягнуті семплюванням з макетів (див. CONTENT/чат).
   ============================================================ */
:root {
  /* --- Brand --- */
  --navy-900: #16294a;   /* найтемніший синій — заголовки */
  --navy-800: #1f3967;   /* основний темно-синій (з макета) */
  --navy-600: #233e98;   /* яскравий синій — акценти/лого */
  --navy-500: #2f4fb0;

  --red-600:  #c1121f;   /* брендовий червоний (з #B40418) */
  --red-700:  #9e0e19;   /* hover */
  --red-500:  #e2696c;   /* світлий червоний (декор) */

  /* --- Neutrals --- */
  --white:    #ffffff;
  --bg:       #ffffff;
  --bg-soft:  #f7f7f9;   /* секції/картки */
  --bg-soft2: #eff0f4;
  --line:     #e7e7ee;   /* розділювачі/бордери */
  --ink:      #1c2333;   /* основний текст */
  --ink-soft: #56607a;   /* другорядний текст */
  --ink-mute: #8a93a8;   /* підписи/плейсхолдери */

  /* --- Accents mapped to roles --- */
  --primary:      var(--red-600);
  --primary-ink:  var(--white);
  --heading:      var(--navy-800);

  /* --- Typography --- */
  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero:   clamp(2.6rem, 6.2vw, 4.6rem);
  --fs-h1:     clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-h2:     clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-h3:     1.15rem;
  --fs-lead:   clamp(1rem, 1.4vw, 1.2rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-eyebrow:0.8rem;

  /* --- Spacing scale (8px) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* --- Layout --- */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  /* --- Radius --- */
  --r-sm: 8px;  --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* --- Elevation --- */
  --shadow-sm: 0 2px 8px rgba(22, 41, 74, .06);
  --shadow-md: 0 12px 30px rgba(22, 41, 74, .10);
  --shadow-lg: 0 24px 60px rgba(22, 41, 74, .16);

  /* --- Motion --- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .25s;
}