/* =============================================================
   DESIGN-SYSTEM.CSS — Дизайн-система ЛекСправка
   Токены, типографика, утилиты
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   1. ДИЗАЙН-ТОКЕНЫ (CSS Custom Properties)
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Цветовая палитра ── */

  /* Основной синий (доверие, медицина) */
  --clr-primary-50:  #EFF6FF;
  --clr-primary-100: #DBEAFE;
  --clr-primary-200: #BFDBFE;
  --clr-primary-300: #93C5FD;
  --clr-primary-400: #60A5FA;
  --clr-primary-500: #3B82F6;
  --clr-primary-600: #2563EB;
  --clr-primary-700: #1D4ED8;
  --clr-primary-800: #1E40AF;
  --clr-primary-900: #1E3A8A;

  /* Дополнительный — мятный/зелёный (здоровье) */
  --clr-teal-50:  #F0FDFA;
  --clr-teal-100: #CCFBF1;
  --clr-teal-200: #99F6E4;
  --clr-teal-300: #5EEAD4;
  --clr-teal-500: #14B8A6;
  --clr-teal-600: #0D9488;
  --clr-teal-700: #0F766E;
  --clr-teal-800: #115E59;

  /* Нейтральные серые */
  --clr-gray-50:  #F8FAFC;
  --clr-gray-100: #F1F5F9;
  --clr-gray-200: #E2E8F0;
  --clr-gray-300: #CBD5E1;
  --clr-gray-400: #94A3B8;
  --clr-gray-500: #64748B;
  --clr-gray-600: #475569;
  --clr-gray-700: #334155;
  --clr-gray-800: #1E293B;
  --clr-gray-900: #0F172A;

  /* Семантические */
  --clr-success:       #10B981;
  --clr-success-light: #D1FAE5;
  --clr-success-dark:  #065F46;

  --clr-warning:       #F59E0B;
  --clr-warning-light: #FEF3C7;
  --clr-warning-dark:  #92400E;

  --clr-danger:       #EF4444;
  --clr-danger-light: #FEE2E2;
  --clr-danger-dark:  #991B1B;

  --clr-info:       #0EA5E9;
  --clr-info-light: #E0F2FE;
  --clr-info-dark:  #075985;

  --clr-purple:       #8B5CF6;
  --clr-purple-light: #EDE9FE;
  --clr-purple-dark:  #4C1D95;

  --clr-orange:       #F97316;
  --clr-orange-light: #FFEDD5;
  --clr-orange-dark:  #7C2D12;

  /* ── Семантические роли ── */
  --bg-page:     #F8FAFF;      /* фон страницы (едва заметный синеватый оттенок) */
  --bg-surface:  #FFFFFF;      /* фон карточек, форм */
  --bg-elevated: #FFFFFF;      /* приподнятые элементы */
  --bg-muted:    #F1F5F9;      /* приглушённый фон */
  --bg-hover:    #F8FAFC;      /* hover-состояние */

  --text-primary:   #1A2235;   /* основной текст */
  --text-secondary: #475569;   /* вторичный текст */
  --text-muted:     #64748B;   /* приглушённый текст */
  --text-disabled:  #94A3B8;   /* недоступный */
  --text-inverse:   #FFFFFF;   /* текст на тёмном фоне */
  --text-link:      #2563EB;   /* цвет ссылок */
  --text-link-hover: #1D4ED8;

  --border-light:  #E2E8F0;    /* лёгкие границы */
  --border-medium: #CBD5E1;    /* средние границы */
  --border-strong: #94A3B8;    /* сильные границы */
  --border-focus:  #2563EB;    /* фокус */

  /* ── Тени ── */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(37, 99, 235, 0.1), 0 0 0 1px rgba(37, 99, 235, 0.08);
  --shadow-dropdown: 0 4px 24px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);

  /* ── Радиусы ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ── Отступы (8px сетка) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Типографика ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose:  1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;

  /* ── Переходы ── */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-индексы ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;

  /* ── Размеры контейнеров ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* ── Высота хедера ── */
  --header-height: 64px;
}

/* ─────────────────────────────────────────────────────────────
   2. БАЗОВЫЕ СТИЛИ
   ───────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-page);
}

/* Ссылки */
a {
  color: var(--text-link);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-link-hover);
}

/* Типографика */
h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-2xl); font-weight: var(--font-bold); }
h3 { font-size: var(--text-xl);  font-weight: var(--font-semibold); }
h4 { font-size: var(--text-lg);  font-weight: var(--font-semibold); }
h5 { font-size: var(--text-base); font-weight: var(--font-semibold); }
h6 { font-size: var(--text-sm);  font-weight: var(--font-semibold); }

@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}

p + p { margin-top: var(--space-4); }

strong { font-weight: var(--font-semibold); }
em { font-style: italic; }

small { font-size: var(--text-sm); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--clr-gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--clr-primary-700);
}

/* ─────────────────────────────────────────────────────────────
   3. УТИЛИТЫ
   ───────────────────────────────────────────────────────────── */

/* Доступность: скрыть визуально, но читается скрин-ридером */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Контейнер */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px) {
  .container { padding-inline: var(--space-6); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--space-8); }
}

/* Текст */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-2xl    { font-size: var(--text-2xl); }
.text-muted  { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary-color { color: var(--clr-primary-600); }

.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }

.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Цвета фона */
.bg-primary-50  { background-color: var(--clr-primary-50); }
.bg-teal-50     { background-color: var(--clr-teal-50); }
.bg-muted       { background-color: var(--bg-muted); }
.bg-surface     { background-color: var(--bg-surface); }

/* Flex */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }

/* Grid */
.grid { display: grid; }

/* Отступы */
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

/* Ширина */
.w-full { width: 100%; }

/* Радиус */
.rounded     { border-radius: var(--radius-md); }
.rounded-full { border-radius: var(--radius-full); }

/* Тень */
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-md   { box-shadow: var(--shadow-md); }

/* Разделитель */
.divider {
  height: 1px;
  background: var(--border-light);
  border: none;
  margin-block: var(--space-4);
}

/* Скрытый на мобильных */
.hide-mobile { display: none; }

@media (min-width: 768px) {
  .hide-mobile { display: initial; }
  .hide-desktop { display: none; }
}