:root {
  /* ==========================================================================
     1. Brand Palette (извлечена из оригинального логотипа logo.png)
     ========================================================================== */
  /* Мятно-шалфейный (облачко) */
  --color-mint: #38b291;
  --color-mint-light: #bce7d9;
  --color-mint-hover: #2e967a;
  --color-mint-soft: rgba(56, 178, 145, 0.12);
  --color-mint-border: rgba(56, 178, 145, 0.35);

  /* Теплый коралл / красный (слово "bla") */
  --color-coral: #d34542;
  --color-coral-hover: #bc3734;
  --color-coral-soft: rgba(211, 69, 66, 0.14);
  --color-coral-badge: #e04b48;

  /* Сланцевый индиго (слово "bla") */
  --color-indigo: #2c3e6b;
  --color-indigo-hover: #223258;
  --color-indigo-light: #415a99;

  /* Сланцево-голубой (слово "bla") */
  --color-slate-blue: #6886a9;
  --color-slate-blue-soft: rgba(104, 134, 169, 0.15);

  /* ==========================================================================
     2. Matte Dark Surfaces (High-Density Dark Theme)
     ========================================================================== */
  --bg-main: #141518;               /* Глубокий матовый фон всей страницы */
  --bg-surface: #1e2024;            /* Основные карточки, навбар, блоки */
  --bg-surface-elevated: #282b30;   /* Плашки, выпадающие списки, превью */
  --bg-surface-hover: #2f3238;      /* Состояние hover для интерактивных элементов */
  --bg-surface-active: #35383f;     /* Состояние нажатия */
  --bg-surface-sunken: #0f1012;     /* Углубления, видеоплеер, код */

  /* Строгие одинарные границы (без неона) */
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --border-focus: var(--color-mint);

  /* ==========================================================================
     3. Typography (High Contrast, Enhanced Legibility)
     ========================================================================== */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-primary: #ffffff;          /* Чистый белый для заголовков, цифр и активных элементов */
  --text-normal: #eceef2;           /* Яркий светлый серебристый для основного текста и меню (Контраст 15:1) */
  --text-secondary: #c8cdd7;        /* Выразительный светло-серый для пояснений, подзаголовков, описаний карточек (Контраст 11.5:1) */
  --text-muted: #a4abb8;            /* Четкий мягкий серый для второстепенных меток, счетчиков и копирайтов (Контраст 7.6:1) */
  --text-inverse: #141518;          /* Текст на светлом фоне */

  /* ==========================================================================
     4. Geometry & Radii
     ========================================================================== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* ==========================================================================
     5. Tactile Shadows (Физическая модель глубины)
     ========================================================================== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ==========================================================================
     6. Layout & Transitions
     ========================================================================== */
  --container-max-width: 1200px;
  --container-padding: 24px;
  --header-height: 64px;
  --transition-snappy: 0.12s ease-out;
  --transition-smooth: 0.2s ease;
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
    --header-height: 60px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 16px;
    --header-height: 56px;
  }
}

@media (max-width: 360px) {
  :root {
    --container-padding: 12px;
  }
}