/* ========================================
   Roomix.pro - CSS Variables (Дизайн-система)
   ======================================== */

:root {
  /* ===== Основные цвета ===== */
  --color-background: #F5F0E8;      /* Тёплый бежевый фон */
  --color-background-alt: #EDE8DF;  /* Чуть темнее для чередования секций */

  /* ===== Текст ===== */
  --color-text-primary: #1B3A5D;    /* Тёмно-синий — основной текст и заголовки */
  --color-text-secondary: #4A6380;  /* Приглушённый синий — вторичный текст */
  --color-text-muted: #7A8A9A;      /* Серо-синий — подписи, мелкий текст */

  /* ===== Акценты ===== */
  --color-accent: #C9A227;          /* Золотой/охра — основной акцент */
  --color-accent-hover: #B8922A;    /* Золотой темнее — hover состояния */
  --color-accent-light: #E8D59A;    /* Светло-золотой — фоны акцентных блоков */

  /* ===== Дополнительные ===== */
  --color-blue-accent: #2E5C8A;     /* Синий акцент для ссылок */
  --color-green: #2D8F6F;           /* Зелёный для позитивных элементов */
  --color-red: #C94A4A;             /* Красный для "ложных путей" */

  /* ===== UI элементы ===== */
  --color-border: #D4CFC4;          /* Границы */
  --color-card-bg: #FFFFFF;         /* Фон карточек */
  --color-shadow: rgba(27, 58, 93, 0.08); /* Тени */

  /* ========================================
     Типографика
     ======================================== */

  /* Шрифты */
  --font-heading: 'Playfair Display', 'Georgia', serif;  /* Заголовки */
  --font-body: 'Inter', 'Segoe UI', sans-serif;          /* Основной текст */
  --font-mono: 'JetBrains Mono', monospace;              /* Код/технические термины */

  /* Размеры (fluid typography) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);    /* 12-14px */
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);       /* 14-16px */
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);      /* 16-18px */
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);       /* 18-20px */
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);      /* 20-24px */
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);         /* 24-32px */
  --text-3xl: clamp(1.875rem, 1.4rem + 2.4vw, 2.5rem);     /* 30-40px */
  --text-4xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);      /* 36-56px */

  /* Line-height */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter-spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;

  /* ========================================
     Отступы и сетка
     ======================================== */

  /* Spacing scale (8px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 5rem;     /* 80px */
  --space-16: 8rem;     /* 128px */

  /* Container */
  --container-max: 1200px;
  --container-padding: clamp(1rem, 5vw, 3rem);

  /* Section spacing */
  --section-padding-y: clamp(4rem, 8vw, 8rem);

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ========================================
     Тени и эффекты
     ======================================== */

  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 4px 12px var(--color-shadow);
  --shadow-lg: 0 8px 24px var(--color-shadow);
  --shadow-xl: 0 16px 48px var(--color-shadow);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}