/* =============================================================================
   ДИЗАЙН-СИСТЕМА — переменные проекта (сайт + кабинет + раздел врача)
   -----------------------------------------------------------------------------
   Основа — дизайн-система Classical внутренней панели практики.
   Подключать ПОСЛЕ styles.css самой системы:

     <link rel="stylesheet" href="_ds/classical-.../styles.css">
     <link rel="stylesheet" href="дизайн-система.css">

   Ниже — полный набор значений, на которых собраны экраны. Хардкодить цвета,
   шрифты и размеры в разметке нельзя: только var(--…).

   Правила, зашитые в систему:
   • обводки вместо заливки — кнопки контурные, карточки без фона;
   • жирное начертание не используется: максимум — 600 для мелких заголовков,
     крупный текст ставится нормальным начертанием;
   • красный только для ошибок — через --state-alert;
   • медиазапросов нет: адаптивность на flex-wrap и clamp().
   ========================================================================== */

:root {
  /* --- Цвет: роли ------------------------------------------------------- */
  --color-bg: #f3f2f2;          /* фон страницы */
  --color-surface: #eae9e9;     /* мат под фотографией, редкие подложки */
  --color-text: #201f1d;        /* основной текст */
  --color-accent: #b68235;      /* акцент: обводки, подчёркивания, цифры */
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* --- Цвет: нейтральная шкала ----------------------------------------- */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;   /* границы неактивных элементов */
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;   /* подписи */
  --color-neutral-700: #605d5d;   /* второй уровень текста */
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* --- Цвет: акцентная шкала ------------------------------------------- */
  --color-accent-100: #fff3e4;    /* заливка выбранного окна в календаре */
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;    /* обводка активной карточки, акцент на тёмном */
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;    /* нажатое состояние */
  --color-accent-700: #7d5411;    /* акцентный текст размером с абзац */
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  /* --- Состояния -------------------------------------------------------- */
  --state-alert: #9c3a2b;         /* ЕДИНСТВЕННОЕ место, где допустим красный:
                                     ошибки ввода, закрытая дата, отмена,
                                     деструктивные действия */
  --state-alert-line: color-mix(in srgb, #9c3a2b 40%, transparent);

  /* --- Тёмная подложка ------------------------------------------------- */
  --color-ink: #1a1815;           /* блок закрытого клуба: тон ниже neutral-900 */

  /* --- Шрифты ----------------------------------------------------------- */
  --font-heading: "Cormorant Garamond", system-ui, serif;
  --font-body: "Lora", system-ui, serif;
  --font-heading-weight: 600;     /* потолок для интерфейсных заголовков */
  --font-display-weight: 400;     /* крупные заголовки — нормальное начертание */
  --font-numeric: 'tnum';         /* табличные цифры: время, суммы, даты */

  /* --- Размеры текста (адаптив без медиазапросов) ----------------------- */
  --text-display: clamp(42px, 7vw, 82px);   /* имя врача на первом экране */
  --text-h1: clamp(28px, 4.4vw, 52px);
  --text-h2: clamp(26px, 7vw, 34px);        /* заголовки экранов кабинета */
  --text-h3: clamp(20px, 2.4vw, 27px);
  --text-body: 16px;
  --text-small: 15px;
  --text-caption: 13px;                     /* подписи, надзаголовки */
  --line-body: 1.7;
  --line-heading: 1.12;
  --tracking-kicker: 0.16em;                /* надзаголовки капслоком */

  /* --- Отступы (шаг 1,15×) --------------------------------------------- */
  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;
  --pad-page: clamp(20px, 5vw, 56px);       /* поля страницы сайта */
  --pad-screen: clamp(20px, 6vw, 40px);     /* поля экрана кабинета */
  --section-gap: clamp(32px, 6vw, 80px);

  /* --- Радиусы и тени --------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* --- Размеры интерфейса ---------------------------------------------- */
  --tap-min: 44px;                          /* минимальная зона нажатия */
  --lk-max-width: 560px;                    /* колонка кабинета */
  --doc-max-width: 760px;                   /* колонка раздела врача */
  --site-max-width: 1180px;
  --fade-width: 56px;                       /* затухание правого края вкладок */
}

/* Базовые правила страницы — общие для трёх файлов. */
html, body { margin: 0; padding: 0; height: auto; background: var(--color-bg); }
#dc-root, #dc-root > .sc-host { height: auto !important; min-height: 100%; }

body {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-body);
}

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); }
a:active { color: var(--color-accent-800); }
*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent-200); }

/* Прокручиваемые вкладки на телефоне: тонкая полоса вместо системной. */
::-webkit-scrollbar { height: 4px; width: 4px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-300); }