/* все цвета, отступы и тени — только тут, дальше по коду переменные */

:root {
  /* Сайт всегда тёмный (не подстраивается под системную тему) — без этого нативные
     выпадающие списки (<select>), чекбоксы и т.п. рисуются браузером в светлой ОС-теме
     поверх тёмной страницы (реальный баг, задача пользователя 2026-09-05: "выпадающие
     списки не соответствуют стилю сайта"). Chromium/Firefox сами перекрашивают эти
     элементы под тёмную схему, если знают, что страница тёмная. */
  color-scheme: dark;
  /* --- Фирменный тёмный фон (тёплый, с винным подтоном) --- */
  --color-bg-abyss: #050406; /* фон страницы */
  --color-bg-deep: #0a0608; /* основная секция */
  --color-bg-space: #100a0d; /* чередующаяся секция */
  --color-surface: #150d10; /* карточка */
  --color-surface-2: #1e1218; /* приподнятая карточка */
  --color-line: rgba(231, 137, 174, 0.12); /* волосной бордер с розовым подтоном */
  --color-line-strong: rgba(231, 137, 174, 0.3);

  /* --- Акценты: тёмно-красно-розовая гамма --- */
  --color-accent-pink: #d75f8b; /* фирменная роза: иконки, мелкий UI */
  --color-accent-pink-soft: #ed8caf; /* розовый для текста/ссылок на тёмном */
  --color-accent-bright: #e979a4; /* яркая роза для крупных заголовков */
  --color-accent-cranberry: #b94770; /* начало градиента кнопок */
  --color-accent-wine: #7d2448; /* конец градиента кнопок */
  --color-wine-deep: #5d1834; /* глубокие тени и подложки */
  --color-accent-gold: #fcd34d; /* золотой контрастный акцент: фокус, бейджи, звёзды, код */
  --color-accent-code: #eec27a; /* код, технические пометки — тёплое золото */
  --color-on-accent: #ffffff; /* текст на розовом градиенте */
  --color-mint: #79d7a4; /* успех */
  --color-danger: #fb7185; /* ошибки и деструктивные действия */

  /* --- Текст --- */
  --color-text: #f7f4f5;
  --color-text-soft: #c6bdc4;
  --color-text-muted: #a79ca2;
  --color-text-on-dark-dim: #786f74; /* только крупный/второстепенный UI-текст */
  --color-link-visited: #c08497;

  /* --- Градиенты и свечения (hex тоже живут только тут) --- */
  --gradient-primary: linear-gradient(135deg, #b94770 0%, #7d2448 100%); /* кнопки, бейджи */
  --gradient-text: linear-gradient(120deg, #f2a5c2 0%, #d75f8b 55%, #b94770 100%); /* крупный текст */
  --gradient-soft: linear-gradient(135deg, rgba(215, 95, 139, 0.16), rgba(125, 36, 72, 0.12) 55%, rgba(252, 211, 77, 0.05));
  --gradient-page: radial-gradient(1100px 620px at 82% -10%, rgba(153, 42, 84, 0.22), transparent 60%),
    radial-gradient(820px 500px at 6% 2%, rgba(93, 24, 52, 0.26), transparent 55%),
    radial-gradient(760px 480px at 50% 110%, rgba(125, 36, 72, 0.14), transparent 60%),
    linear-gradient(180deg, #0a0608 0%, #050406 100%);
  --glow-pink: 0 0 24px rgba(215, 95, 139, 0.4);
  --glow-pink-soft: 0 14px 38px rgba(153, 42, 84, 0.22);
  --glow-gold: 0 0 18px rgba(252, 211, 77, 0.28);
  --shadow-card: 0 24px 64px rgba(2, 1, 2, 0.55);
  --shadow-pop: 0 32px 90px rgba(2, 1, 2, 0.6);

  /* --- Кнопки --- */
  --color-btn-bg: #141014;
  --color-btn-border: #3a2b32;
  --color-btn-primary-border: #c95c83;
  --color-btn-ghost-bg: rgba(13, 11, 13, 0.78);
  --color-btn-ghost-border: #342b30;

  /* --- Типографика --- */
  --font-display: 'Singularity Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Singularity Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif; /* только отзывы-цитаты */
  --font-mono: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, 'DejaVu Sans Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl: clamp(1.9rem, 1.5rem + 1.8vw, 2.5rem);
  --text-hero: clamp(2.5rem, 1.8rem + 2.6vw, 3.625rem);

  --leading-tight: 1.15;
  --leading-title: 1.2;
  --leading-body: 1.55;

  /* --- Сетка отступов (8px, мелочь — 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-gap: clamp(3.5rem, 7vw, 7.5rem);

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 76px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
}