:root {
  /* Шрифты */
  --main-font: "Inter-Variable", "Arial", sans-serif;
  --accent-font: "PressStart2P", "Arial", sans-serif;
  
  --text-weight: 410;
  --title-weight: 715;
  
  --font-size: 18px;
  --font-size-card-label: 14px;
  --button-font-size: 14px;

  /* Основная палитра */
  --color: #000000;
  --shadow-color: #ffffff;
  --background-color: #ffffff;
  --accent-color: #000000; /* Цвет для focus-visible */
  
  /* Цвета сердечка */
  --heart-contour-color: var(--color); /* Привязываем к основному цвету */
  --heart-sparks-color: #ff0000;

  /* Состояния кнопок */
  --button-text-color: #ffffff; /* Цвет текста при наведении (инверсия) */

  /* Адаптивные размеры (DRY: рассчитываем один раз) */
  --page-width: clamp(375px, 16.29rem + 30.52vw, 700px);
  --card-list-width: clamp(375px, 16.285rem + 30.516vw, 700px); /* Синхронизируем с шириной страницы */
  
  --header-title-font-size: clamp(3.063rem, 2.71rem + 1.502vw, 4.063rem);
  --header-subtitle-font-size: clamp(0.875rem, 0.677rem + 0.845vw, 1.438rem);

  /* Фон */
  --background-image: repeating-linear-gradient(
      to right,
      #d3d3d3 0 2px,
      transparent 2px 4px
    ),
    repeating-linear-gradient(to bottom, #d3d3d3 0 2px, transparent 2px 4px),
    linear-gradient(to bottom, #e7e7e7 0.01%, #1a1a1a 100%);
    
  /* Анимация */
  --transition-duration: 0.5s;
}