/* CSS Переменные */
:root {
  /* Цвета */
  --primary-color: #000;
  --secondary-color: #fff;
  --accent-color: #767676;
  --light-gray: #f0f0f0;
  --medium-gray: #999;
  --dark-gray: #414141;
  --border-color: #d0d0d0;
  --font-color: #141414;
  --light-bg: #f5f5f3;
  --medium-bg: #e3e3e3;
  --dark-bg: #141414;

  /* Размеры шрифтов */
  --font-size-xs: 0.625rem; /* 10px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-md: 1.125rem; /* 18px */
  --font-size-lg: 1.25rem; /* 20px */
  --font-size-xl: 1.375rem; /* 22px */
  --font-size-xxl: 1.5rem; /* 24px */
  --font-size-h1: 2.875rem; /* 46px */
  --font-size-h2: 2.25rem; /* 36px */
  --font-size-h3: 1.625rem; /* 26px */
  --font-size-h4: 1.5rem; /* 24px */
  --font-line-height: 1.5;

  /* Отступы */
  --spacing-xs: 0.3125rem; /* 5px */
  --spacing-sm: 0.625rem; /* 10px */
  --spacing-md: 0.9375rem; /* 15px */
  --spacing-lg: 1.25rem; /* 20px */
  --spacing-xl: 1.56rem; /* 25px */
  --spacing-xxl: 1.875rem; /* 30px */
  --spacing-xxxl: 2.5rem; /* 40px */

  /* Радиусы */
  --border-radius-sm: 0.3125rem; /* 5px */
  --border-radius-md: 0.625rem; /* 10px */
  --border-radius-lg: 1.56rem; /* 25px */

  /* Размеры */
  --container-max-width: 1880px;
  --content-max-width: 1670px;
  --block-inside-width: 1372px;
  --fixed-height: 65px;

  /* Переходы */
  --transition-fast: 200ms ease;
  --transition-normal: 400ms ease;
  --transition-slow: 750ms ease;

  /* Тени */
  --shadow-light: 0 2px 10px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-heavy: 0 8px 40px rgba(0,0,0,0.2);

  /* Градиенты */
  --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--light-gray));

  /* Темы */
  --theme-bg: var(--secondary-color);
  --theme-text: var(--font-color);
  --theme-accent: var(--primary-color);
}

/* Темная тема */
[data-theme="dark"] {
  --primary-color: #fff;
  --secondary-color: #141414;
  --accent-color: #aaa;
  --light-gray: #333;
  --medium-gray: #666;
  --dark-gray: #ccc;
  --border-color: #555;
  --font-color: #fff;
  --light-bg: #222;
  --medium-bg: #333;
  --dark-bg: #000;

  --theme-bg: var(--secondary-color);
  --theme-text: var(--font-color);
  --theme-accent: var(--primary-color);
}