:root {
  /* === FONT === */
  --font-family: "Inter", sans-serif;

  /* === PRIMARY COLORS === */
  --primary: #E53935;
  --primary-dark: #C62828;
  --primary-light: #FFCDD2;

  /* === ACCENT COLORS === */
  --accent: #00BCD4;
  --accent-dark: #0097A7;
  --accent-light: #B2EBF2;

  /* === SECONDARY COLORS === */
  --secondary: #7B1FA2;
  --secondary-dark: #4A0072;
  --secondary-light: #E1BEE7;

  /* === INFO / STATUS === */
  --info: #00E5FF;
  --info-dark: #0098A3;
  --info-light: #CCF5FF;

  --success: #13d527;          /* kept as‑is */
  --success-dark: #00ae11;
  --success-light: #eafbe7;

  --warning: #FFC107;
  --warning-dark: #FFA000;
  --warning-light: #FFECB3;

  --danger: #E53935;
  --danger-dark: #C62828;
  --danger-light: #FFCDD2;

  /* === NEUTRALS === */
  --black: #000000;
  --dark-1: #424242;
  --dark-2: #575757;
  --dark-3: #707070;
  --gray-1: #9E9E9E;
  --gray-2: #BDBDBD;
  --gray-3: #E0E0E0;
  --gray-4: #EEEEEE;
  --light-1: #F5F5F5;
  --light-2: #FAFAFA;
  --light-3: #FFFFFF;
  --white: #FFFFFF;

  /* === GRADIENTS === */
  --gradient-1: linear-gradient(180deg, #E53935 0%, #C62828 100%);
  --gradient-2: linear-gradient(180deg, #E53935 13.02%, #00BCD4 85.42%);
  --gradient-3: linear-gradient(180deg, #00BCD4 0%, #E53935 100%);
}

/* ---------- BRAND IN NAVBAR ---------- */
.brand-name {
  font-weight: 700;
  color: var(--white);                    /* белый в тёмной шапке */
  /* адаптивный размер: 1rem → 1.3rem */
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  line-height: 1;
}

.logo {
  width: clamp(36px, 7vw, 60px);          /* 36 px на смартфоне, 60 px на десктопе */
  height: auto;
  display: block;
}

/* Если захочешь уменьшать логотип при прокрутке */
.navbar.scrolled .logo {
  width: clamp(28px, 5vw, 42px);
}

.logo-img {
  width: clamp(40px, 6vw, 56px);
  height: auto;
}

.brand-footer-name {
  font-weight: 700;
  color: var(--black);                     /* чёрный/тёмно-серый под светлый футер */
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1;
}