:root {
  /* Основные цвета */
  --main-color: #2366af;
  --alt-color: #76c000;

  /* Радиусы */
  --radius-1: 8px;
  --radius-2: 16px;
  --radius-3: 24px;
  --radius-round: 50%;

  /* Бордеры (ширины) */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  /* Тени */
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.15);   /* базовая */
  --shadow-light: 0 2px 6px rgba(0, 0, 0, 0.1);    /* лёгкая */
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15); /* средняя */
  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.25);  /* тяжёлая */
  --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.2);   /* для hover */
}

/* Радиусы */
.r1 { border-radius: var(--radius-1); }
.r2 { border-radius: var(--radius-2); }
.r3 { border-radius: var(--radius-3); }
.r-round { border-radius: var(--radius-round); }
.r-none { border-radius: 0; }

/* Бордеры по цвету и размеру */
.border-m-sm { border: var(--border-1) solid var(--main-color); }
.border-m-md { border: var(--border-2) solid var(--main-color); }
.border-m-lg { border: var(--border-3) solid var(--main-color); }

.border-a-sm { border: var(--border-1) solid var(--alt-color); }
.border-a-md { border: var(--border-2) solid var(--alt-color); }
.border-a-lg { border: var(--border-3) solid var(--alt-color); }

/* Фоны */
.background-m { background-color: var(--main-color); }
.background-a { background-color: var(--alt-color); }

/* Тени */
.shadow { box-shadow: var(--shadow-base); }
.shadow-l { box-shadow: var(--shadow-light); }
.shadow-m { box-shadow: var(--shadow-medium); }
.shadow-h { box-shadow: var(--shadow-heavy); }
.shadow-none { box-shadow: none; }  /* новая строка */

/* Hover-эффект для всех теней */
.shadow-hover {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.shadow-hover:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}