/* Дизайн-токени: підключайте перед style.css та іншими листами стилів */
:root {
  --container: 1200px;
  --header-h: 76px;

  --inner-page-banner-height: calc(72vh + var(--header-h));
  --inner-page-banner-min-height: calc(520px + var(--header-h));

  /* Спокійніша палітра фону (менше синього, більше м'якого світла) */
  --bg: #f9fafb;
  --bg-2: #f2f5f7;
  --bg-3: #eceef0;
  --bg-4: #e2e5e9;
  --bg-5: #d1d5db;

  --surface: rgba(255, 255, 255, 0.85);
  --surface-2: rgba(255, 255, 255, 0.96);
  --card: rgba(255, 255, 255, 0.88);
  --card-border: rgba(
    152,
    131,
    131,
    0.15
  ); /* Використовуємо тон футболки для меж */

  --text: #1e293b; /* Глибокий антрацит */
  --muted: #475569;
  --soft: #94a3b8;

  /* Brand colors (Заспокоєний синій + колір футболки) */
  --brand: #334e5e; /* Стриманий синьо-сірий */
  --brand-2: #5c8195; /* М'який акцентний */
  --brand-3: #8ba8b9; /* Світлий димчастий */
  --brand-deep: #1e2f3a;
  /* Бірюзовий з градієнта футера (той самий ритм, що й primary-кнопка) — для h2 */
  --text-h2: rgb(11, 74, 95);

  --brand-glow: rgba(92, 129, 149, 0.18);
  --brand-glow-2: rgba(139, 168, 185, 0.12);

  /* М’які кольорові акценти для фонів секцій */
  --bg-spot-mint: rgba(17, 166, 184, 0.14);
  --bg-spot-mint-soft: rgba(17, 166, 184, 0.09);
  --bg-spot-teal: rgba(12, 78, 99, 0.07);
  --bg-spot-warm: rgba(152, 131, 131, 0.14);

  /* АКЦЕНТ ФУТБОЛКИ (rgb 152 131 131) */
  --shirt-tone: rgb(152, 131, 131);
  --warm-glow: rgba(152, 131, 131, 0.2);
  --warm-glow-2: rgba(152, 131, 131, 0.32);

  --danger: #ef4444;

  --radius-sm: 10px;
  --radius: 10px;
  --radius-lg: 10px;

  /* Полегшені тіні для більшого простору */
  --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 15px 35px -5px rgba(152, 131, 131, 0.1);

  --grid-gap: 20px;
  --font: "Manrope", system-ui, -apple-system, sans-serif;
  /* Заголовки та акцентні підписи — геометричний гротеск */
  --font-heading: "Montserrat", system-ui, -apple-system, sans-serif;
}