/* ==========================================================================
   РУСИННОМЕД — Дизайн-токены (assets/css/tokens.css)
   Тематика: Медицинские инновации, биомедтехнологии и дерматология
   Единый источник правды для цветовой схемы, типографики и компонентов
   ========================================================================== */

:root {
  /* ========================================================================
     1. БАЗОВАЯ ПАЛИТРА: МЕДИЦИНСКИЕ ИННОВАЦИИ И БИОМЕДТЕХ
     ======================================================================== */

  /* Основной высокотехнологичный клинический синий */
  --color-primary: #1d68bd;
  --color-primary-dark: #124c8f;
  --color-primary-hover: #1656a0;
  --color-primary-light: #e8f2fc;
  --color-primary-subtle: #f0f6fd;
  --color-primary-glow: rgba(29, 104, 189, 0.25);

  /* Биотехнологический акцентный цвет (бирюза / медицинский тил) */
  --color-accent: #0d9488;
  --color-accent-dark: #0f766e;
  --color-accent-hover: #0b7c72;
  --color-accent-light: #f0fdfa;
  --color-accent-subtle: #ccfbf1;
  --color-accent-glow: rgba(13, 148, 136, 0.25);

  /* Темные структурные оттенки (чистый клинический графит вместо глухого черного) */
  --color-dark: #0f1c24;
  --color-dark-surface: #172833;
  --color-dark-subtle: #243b4a;

  /* Текстовая шкала */
  --color-text: #2d3b45;
  --color-text-secondary: #52636f;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  --color-text-inverse: #ffffff;

  /* Фоновые поверхности и подложки */
  --color-white: #ffffff;
  --color-light: #f4f7f9;
  --color-surface: #ffffff;
  --color-surface-subtle: #f4f8fa;
  --color-surface-hover: #eaf1f7;
  --color-header-bg: #ffffff;
  --color-footer-bg: #0f1c24;

  /* Разделители и контуры */
  --color-border: #e2e8f0;
  --color-border-subtle: #eef2f6;
  --color-border-strong: #cbd5e1;
  --color-border-focus: #1d68bd;

  /* ========================================================================
     2. СПЕЦИАЛЬНЫЕ ТОКЕНЫ: ДЕРМАТОЛОГИЯ И БАРЬЕРНЫЙ УХОД ЗА КОЖЕЙ
     (Регенерация эпидермиса, пантенол, церамиды, гидратация, защита)
     ======================================================================== */

  /* Основной регенеративный оттенок (пантеноловый коралл / физиологический восстанавливающий) */
  --color-dermo-primary: #c25e3f;
  --color-dermo-primary-dark: #9c4328;
  --color-dermo-primary-hover: #ad5033;
  --color-dermo-primary-light: #fdf2ed;
  --color-dermo-primary-subtle: #fae4da;
  --color-dermo-primary-glow: rgba(194, 94, 63, 0.22);

  /* Гидратация и аква-барьер (физиологическая влага / осмопротекция) */
  --color-dermo-secondary: #0d828a;
  --color-dermo-secondary-dark: #096066;
  --color-dermo-secondary-light: #eaf6f7;
  --color-dermo-secondary-subtle: #cdecee;

  /* Липидный и церамидный комплекс (золотисто-янтарный барьерный комплекс) */
  --color-dermo-ceramide: #c68a4c;
  --color-dermo-ceramide-dark: #a46d34;
  --color-dermo-ceramide-light: #fcf6ed;
  --color-dermo-ceramide-subtle: #faebd6;

  /* Противовоспалительный и успокаивающий экстрактный оттенок */
  --color-dermo-calm: #4d7a68;
  --color-dermo-calm-light: #eef5f1;

  /* Дерматологические поверхности (мягкий алебастровый крем / текстура эмульсии) */
  --color-dermo-surface: #fdfbf9;
  --color-dermo-surface-tint: #f8f2eb;
  --color-dermo-surface-alt: #f4ece4;
  --color-dermo-border: #ebdcd2;
  --color-dermo-border-subtle: #f5ebe3;

  /* Градиенты дерматологических секций и карточек */
  --gradient-dermo-hero: linear-gradient(135deg, #fdfbf9 0%, #f7eee7 50%, #eaf4f4 100%);
  --gradient-dermo-card: linear-gradient(180deg, #ffffff 0%, #fdfbf9 100%);
  --gradient-dermo-badge: linear-gradient(135deg, #c25e3f 0%, #d97a5b 100%);
  --gradient-dermo-barrier: linear-gradient(90deg, #c25e3f 0%, #c68a4c 50%, #0d828a 100%);

  /* Градиенты медицинских инноваций */
  --gradient-hero: linear-gradient(135deg, #f8fafc 0%, #edf4fc 100%);
  --gradient-card: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --gradient-accent: linear-gradient(135deg, #1d68bd 0%, #0d9488 100%);

  /* ========================================================================
     3. СЕМАНТИЧЕСКИЕ И КЛИНИЧЕСКИЕ СТАТУСЫ (СТАТУС ИССЛЕДОВАНИЙ / РЕЕСТР)
     ======================================================================== */
  --color-success: #15803d;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;

  --color-warning: #b45309;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;

  --color-danger: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fecaca;

  --color-info: #0284c7;
  --color-info-bg: #f0f9ff;
  --color-info-border: #bae6fd;

  /* ========================================================================
     4. ТИПОГРАФИКА
     ======================================================================== */
  --font-display: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Golos Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  /* Адаптивная шкала размеров (Fluid Typography Clamps) */
  --text-2xs: 0.6875rem;                                           /* 11px */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);          /* 12-13px */
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);          /* 14-15px */
  --text-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);            /* 16-17px */
  --text-lg: clamp(1.125rem, 1.07rem + 0.35vw, 1.25rem);           /* 18-20px */
  --text-xl: clamp(1.35rem, 1.25rem + 0.5vw, 1.55rem);             /* 21-25px */
  --text-2xl: clamp(1.65rem, 1.45rem + 1vw, 2rem);                 /* 26-32px */
  --text-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.65rem);                /* 32-42px */
  --text-hero: clamp(2.35rem, 1.95rem + 2.2vw, 3.25rem);           /* 37-52px */

  /* Толщина шрифта */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Межстрочные интервалы */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Трекинг (Letter-spacing) */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ========================================================================
     5. ПРОСТРАНСТВЕННАЯ СЕТКА И ОТСТУПЫ
     ======================================================================== */
  --space-3xs: 0.125rem;  /* 2px */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4.5rem;    /* 72px */
  --space-4xl: 6rem;      /* 96px */

  /* Максимальная ширина контейнеров */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-max: 1280px;

  /* ========================================================================
     6. СКРУГЛЕНИЯ И ГРАНИЦЫ
     ======================================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 3px;

  /* ========================================================================
     7. ТЕНИ И ГЛУБИНА (МЕДИЦИНСКАЯ ЧИСТОТА И МИКРОСВЕЧЕНИЕ)
     ======================================================================== */
  --shadow-xs: 0 1px 2px rgba(15, 28, 36, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 28, 36, 0.06), 0 1px 2px rgba(15, 28, 36, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 28, 36, 0.08), 0 2px 4px rgba(15, 28, 36, 0.04);
  --shadow-lg: 0 10px 25px rgba(15, 28, 36, 0.1), 0 4px 10px rgba(15, 28, 36, 0.04);
  --shadow-xl: 0 20px 35px rgba(15, 28, 36, 0.12), 0 6px 15px rgba(15, 28, 36, 0.06);

  --shadow-glow-medical: 0 0 20px rgba(29, 104, 189, 0.25);
  --shadow-glow-accent: 0 0 20px rgba(13, 148, 136, 0.25);
  --shadow-glow-dermo: 0 0 20px rgba(194, 94, 63, 0.22);

  /* ========================================================================
     8. АНИМАЦИИ И ПЕРЕХОДЫ
     ======================================================================== */
  --ease-clinical: cubic-bezier(0.2, 0, 0, 1);
  --transition-fast: 0.15s ease-in-out;
  --transition: all 0.25s ease-in-out;
  --transition-slow: 0.4s ease-in-out;

  /* ========================================================================
     9. КОМПОНЕНТНЫЕ ТОКЕНЫ
     ======================================================================== */
  --header-height: 72px;
  --topbar-height: 38px;
  --card-padding: 1.75rem;
  --btn-padding-y: 0.75rem;
  --btn-padding-x: 1.5rem;
  --input-height: 48px;
}