/* ==========================================================================
   Design Tokens: Baikal Medical Business Forum 2019 (БМБФ-2019)
   Проект: Частная медицина — Байкальский Медицинский Бизнес-Форум в Иркутске
   Домен: bmbf2019.ru
   Организатор: СРО «Национальная ассоциация медицинских организаций»
   Оператор: Коммуникационное агентство PR-Clever
   Эстетика: Корпоративное здравоохранение, медицинский менеджмент,
             байкальская лазурь, чистый клинический белый и кардио-акцент.
   Header & Footer:
     --color-header-bg: #FFFFFF (бесшовная стыковка с подложкой логотипа)
     --color-footer-bg: #12334C (глубокий байкальский индиго / med-900)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. TYPOGRAPHY (Шрифтовые стеки и иерархия)
     ------------------------------------------------------------------------ */
  /* Акцентные заголовки деловых форумов и саммитов */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Основной высокочитаемый текст деловой программы, докладов и статей */
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Моноширинный шрифт: тайминг программы, суммы тарифов, даты, контакты */
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Начертания (Font Weights) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Межстрочные интервалы (Line Heights) */
  --leading-none: 1.0;
  --leading-tight: 1.25;      /* Заголовки h1-h3 (leading-tight) */
  --leading-snug: 1.375;
  --leading-normal: 1.5;      /* Базовый ритм (1.5) */
  --leading-relaxed: 1.625;   /* Параграфы и лиды (leading-relaxed) */

  /* Трекинг (Letter Spacing) */
  --tracking-tight: -0.025em; /* Заголовки форума (tracking-tight) */
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;   /* Метки и капс-бейджи (tracking-wider) */
  --tracking-caps: 0.08em;

  /* Адаптивная типографическая шкала (Fluid Type Scale на базе clamp) */
  --text-2xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);    /* 11 - 12px: метки, даты, капс-теги */
  --text-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.8125rem);      /* 12 - 13px: сноски, тайминги */
  --text-sm: clamp(0.8438rem, 0.8rem + 0.25vw, 0.9063rem);    /* 13.5 - 14.5px: списки, карточки */
  --text-base: clamp(0.9688rem, 0.92rem + 0.25vw, 1.0313rem); /* 15.5 - 16.5px: основной текст */
  --text-md: clamp(1.0938rem, 1.02rem + 0.35vw, 1.1875rem);   /* 17.5 - 19px: лид-параграфы */
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem);       /* 20 - 22px: подзаголовки h4 */
  --text-xl: clamp(1.4375rem, 1.3rem + 0.75vw, 1.6875rem);    /* 23 - 27px: карточки h3, цены */
  --text-2xl: clamp(1.75rem, 1.55rem + 1.1vw, 2.1875rem);     /* 28 - 35px: разделы h2 */
  --text-3xl: clamp(2.1875rem, 1.85rem + 1.75vw, 2.875rem);   /* 35 - 46px: заголовки страниц h1 */
  --text-hero: clamp(2.75rem, 2.2rem + 3.0vw, 4.25rem);       /* 44 - 68px: главный баннер форума */

  /* ------------------------------------------------------------------------
     2. COLOR PALETTE (Фирменная медицинская палитра)
     ------------------------------------------------------------------------ */

  /* Baikal Medical Teal & Navy (Система оттенков med-50 — med-900) */
  --color-med-50: #EEF6FB;    /* Ледяной байкальский фон секций (rgb 238 246 251) */
  --color-med-100: #D8EAF5;   /* Мягкие плашки, фон бейджей, разделители (rgb 216 234 245) */
  --color-med-200: #B0D3E8;   /* Бордеры карточек тарифов (rgb 176 211 232) */
  --color-med-300: #7DB4D6;   /* Акцентные линии, подчеркивания ссылок (rgb 125 180 214) */
  --color-med-400: #4A8FC0;   /* Вторичные ссылки и ховеры рамок (rgb 74 143 192) */
  --color-med-500: #2B73A6;   /* Байкальская лазурь, градиент логотипа (rgb 43 115 166) */
  --color-med-600: #215F8C;   /* Подзаголовки, hover названия (rgb 33 95 140) */
  --color-med-700: #1A4F76;   /* ОСНОВНОЙ ФИРМЕННЫЙ: кнопки, заглавные цифры (rgb 26 79 118) */
  --color-med-800: #16405F;   /* Глубокий темно-синий: промо-баннер, hover кнопок (rgb 22 64 95) */
  --color-med-900: #12334C;   /* Чернильно-синий: подвал сайта, заголовки секций (rgb 18 51 76) */

  /* Primary Brand Aliases */
  --color-primary: var(--color-med-700);
  --color-primary-hover: var(--color-med-800);
  --color-primary-dark: var(--color-med-900);
  --color-primary-light: var(--color-med-500);

  /* Vitality Pulse Red (Кардио-акцент для горячих конверсий и акций) */
  --color-pulse-50: #FEF2F2;
  --color-pulse-100: #FEE2E2;
  --color-pulse-200: #FECACA; /* Тени shadow-red-200 */
  --color-pulse: #D0181F;     /* Кнопка регистрации, бейдж «Спецпредложение для двоих» */
  --color-pulse-hover: #B91C1C;
  --color-pulse-dark: #991B1B;

  /* Accent Aliases */
  --color-accent: var(--color-pulse);
  --color-accent-hover: var(--color-pulse-hover);
  --color-accent-glow: rgba(208, 24, 31, 0.25);

  /* Baikal Nature & Green Accent (Природный хвойный акцент из favicon.svg) */
  --color-baikal-green: #43830B;
  --color-baikal-green-dark: #2D7D46;
  --color-baikal-green-light: #EBF4E5;

  /* Slate Scale (Высококонтрастные нейтральные тона для текста и разделителей) */
  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;

  /* Семантические роли текста */
  --color-text-main: var(--color-slate-700);        /* Базовый читаемый текст body */
  --color-text-title: var(--color-med-900);        /* Заголовки секций h1-h2 */
  --color-text-subtitle: var(--color-slate-800);   /* Заголовки карточек h3 */
  --color-text-paragraph: var(--color-slate-600);  /* Основные параграфы */
  --color-text-muted: var(--color-slate-500);      /* Второстепенные описания */
  --color-text-subtle: var(--color-slate-400);     /* Навигационные хлебные крошки */
  --color-text-brand: var(--color-med-700);        /* Ссылки и акцентные числа */
  --color-text-brand-hover: var(--color-med-800);
  --color-text-inverse: #FFFFFF;                   /* Белый текст на контрастном фоне */
  --color-text-inverse-subtle: var(--color-med-100);
  --color-text-inverse-muted: rgba(176, 211, 232, 0.8);

  /* Зоны Header и Footer */
  --color-header-bg: #FFFFFF;                      /* Чистый белый, 100% совпадение с фоном логотипа */
  --color-footer-bg: var(--color-med-900);         /* Глубокий морской индиго #12334C */

  /* ------------------------------------------------------------------------
     3. SURFACES & BORDERS (Поверхности и рамки)
     ------------------------------------------------------------------------ */
  --surface-base: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-subtle: var(--color-slate-50);
  --surface-brand-subtle: var(--color-med-50);
  --surface-contrast: var(--color-med-800);
  --surface-dark: var(--color-med-900);

  /* Границы и разделители */
  --border-subtle: var(--color-slate-100);
  --border-default: var(--color-slate-200);
  --border-strong: var(--color-slate-300);
  --border-med-light: var(--color-med-100);
  --border-med: var(--color-med-200);
  --border-med-strong: var(--color-med-300);
  --border-brand: var(--color-med-700);
  --border-brand-dark: var(--color-med-800);

  /* ------------------------------------------------------------------------
     4. SPACING & LAYOUT (Сетка, отступы и контейнеры)
     ------------------------------------------------------------------------ */
  --space-3xs: 0.25rem;  /* 4px */
  --space-2xs: 0.375rem; /* 6px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.25rem;   /* 20px */
  --space-xl: 1.5rem;    /* 24px */
  --space-2xl: 2rem;     /* 32px */
  --space-3xl: 2.5rem;   /* 40px */
  --space-4xl: 3rem;     /* 48px */
  --space-5xl: 3.5rem;   /* 56px */
  --space-6xl: 5rem;     /* 80px */

  /* Максимальная ширина контейнеров */
  --container-max: 72rem;     /* 1152px (max-w-6xl форума) */
  --container-prose: 48rem;   /* 768px (max-w-3xl для текстовых колонок) */
  --container-narrow: 42rem;  /* 672px */
  --gutter: clamp(1rem, 0.75rem + 1.25vw, 2rem);

  /* ------------------------------------------------------------------------
     5. RADII (Геометрические скругления)
     ------------------------------------------------------------------------ */
  --radius-xs: 4px;      /* Четкие микро-плашки */
  --radius-sm: 6px;      /* Поля ввода и переключатели */
  --radius-md: 8px;      /* Кнопки действий (rounded-lg) */
  --radius-lg: 12px;     /* Иконки логотипа и партнеров (rounded-xl) */
  --radius-xl: 16px;     /* Карточки секций, тарифов и новостей (rounded-2xl) */
  --radius-2xl: 24px;    /* Промо-панели и hero-блоки (rounded-3xl) */
  --radius-pill: 9999px; /* Капс-бейджи, индикаторы дат (rounded-full) */

  /* ------------------------------------------------------------------------
     6. ELEVATION & SHADOWS (Глубина и мягкие тени)
     ------------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-pulse: 0 10px 15px -3px rgba(208, 24, 31, 0.25), 0 4px 6px -4px rgba(208, 24, 31, 0.15);
  --shadow-glow-med: 0 0 0 3px rgba(26, 79, 118, 0.2);

  /* ------------------------------------------------------------------------
     7. TRANSITIONS & TIMING (Переходы и микро-анимации)
     ------------------------------------------------------------------------ */
  --ease-medical: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-medical);
  --transition-base: 250ms var(--ease-medical);
  --transition-smooth: 400ms var(--ease-medical);

  /* ------------------------------------------------------------------------
     8. Z-INDEX SYSTEM (Слои интерфейса)
     ------------------------------------------------------------------------ */
  --z-base: 1;
  --z-sticky: 50;        /* Шапка сайта sticky top-0 */
  --z-dropdown: 60;
  --z-modal-backdrop: 100;
  --z-modal: 110;
  --z-tooltip: 200;
}

/* --------------------------------------------------------------------------
   SPACING & GAP UTILITIES (Предотвращение слипания карточек и секций)
   -------------------------------------------------------------------------- */
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
}

.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-14 { gap: 3.5rem; }
.gap-16 { gap: 4rem; }