/*
  Дизайн-токены Metaclinic — единственный источник цветов, шрифтов, отступов
  и радиусов для мобильного приложения и веба. Правила применения —
  в docs/design-system.md.

  Два слоя:
  - примитивы (--palette-*) — просто краски, в компонентах напрямую не используются;
  - семантика (--color-*, --space-*, ...) — «для чего», только их и берут компоненты.
  Так тёмная тема добавится одним блоком переопределений семантики,
  не трогая ни одного компонента.

  Фирменные цвета (фиолетовый логотипа, зелёный) и шрифт Inter заданы ПО,
  остальное сверено с portal.metaclinic.kz (2026-10-11): серые там из палитры Tailwind. При сверке с макетом правится
  только этот файл. Несколько цветов продублированы в нативной части MAUI
  (splash, статус-бар) — там стоит ссылка сюда.
*/

:root {
  /* ---------- Примитивы ---------- */

  --palette-violet-50: #F5EDFF;
  --palette-violet-100: #EBDCFF;
  --palette-violet-500: #BB7CFF; /* цвет логотипа */
  --palette-violet-600: #A46AE7; /* кнопки portal.metaclinic.kz */
  --palette-violet-700: #9050DA;
  --palette-violet-800: #7F44D0;

  --palette-blue-600: #2563EB;

  --palette-teal-50: #E6F4F3;
  --palette-teal-500: #47A9A0; /* фирменный зелёный */
  --palette-teal-600: #3A948C;
  --palette-teal-800: #2E7D76;

  --palette-amber-50: #FFF5DB;
  --palette-amber-500: #F2A10C;
  --palette-orange-400: #F5A623;

  /* Фоны промо-блоков подписки, как в Bubble. */
  --palette-pink-50: #FAE8FB;
  --palette-lavender-100: #DCDDF6;
  --palette-violet-900: #7A2FC9;
  --palette-mint-50: #DCF3EC;
  --palette-sky-100: #C6E6F6;
  --palette-lilac-100: #EBDDFA;
  --palette-orchid-200: #E2B8F2;

  --palette-red-50: #FDECEC;
  --palette-red-500: #EB5757;

  --palette-gray-0: #FFFFFF;
  --palette-gray-25: #F9FAFB;
  --palette-gray-50: #F3F4F6;
  --palette-gray-100: #ECEEF1;
  --palette-gray-200: #E5E7EB;
  --palette-gray-300: #ADB5BD;
  --palette-gray-400: #9CA3AF;
  --palette-gray-500: #6B7280;
  --palette-gray-700: #4B5563;
  --palette-gray-900: #1F2937;

  /* ---------- Цвета: бренд и действия ---------- */

  /* Кнопки и выбранное — тон кнопок portal.metaclinic.kz, на полтона темнее логотипа:
     белый текст на нём читается лучше. Цвет логотипа — --color-brand. */
  --color-primary: var(--palette-violet-600);
  --color-primary-hover: var(--palette-violet-700);
  --color-primary-pressed: var(--palette-violet-800);
  --color-brand: var(--palette-violet-500);
  /* Фон выбранного и «фирменного»: слоты, активный пункт меню, выбранная карточка. */
  --color-primary-subtle: var(--palette-violet-50);
  --color-primary-subtle-hover: var(--palette-violet-100);
  --color-on-primary: var(--palette-gray-0);
  /* Фиолетовый ТЕКСТ на светлом фоне: слоты, активная вкладка, чипы.
     Цвет логотипа светлый, мелкий текст им на белом читается плохо
     (контраст около 2.7:1 при норме 4.5:1), поэтому для текста — тёмный оттенок. */
  --color-primary-text: var(--palette-violet-800);

  --color-link: var(--palette-blue-600);

  /* Вход в звонок и поддержка в WhatsApp. Отдельно от success: это действие, а не статус. */
  --color-call: var(--palette-teal-500);
  --color-call-hover: var(--palette-teal-600);
  --color-on-call: var(--palette-gray-0);

  --color-rating: var(--palette-orange-400);

  /* Промо подписки: фон секции, баннер на главной, тариф «Премиум», корпоративный блок. */
  --color-promo-from: var(--palette-pink-50);
  --color-promo-to: var(--palette-lavender-100);
  /* Баннер у срочных, как в Bubble: мятный → голубой → сиреневый. */
  --color-promo-banner-1: var(--palette-mint-50);
  --color-promo-banner-2: var(--palette-sky-100);
  --color-promo-banner-3: var(--palette-lilac-100);
  --color-promo-glare: rgb(255 255 255 / 0.35);
  /* Тариф «Премиум»: сверху тёмно-фиолетовый, к низу светлеет до сиреневого. */
  --color-promo-strong-from: var(--palette-violet-900);
  --color-promo-strong-to: var(--palette-violet-500);
  --color-promo-strong-end: var(--palette-orchid-200);
  /* «Ленты» на фоне «Премиума»: полупрозрачные голубая и розовая. */
  --color-promo-ribbon-1: color-mix(in srgb, var(--palette-blue-600) 45%, transparent);
  --color-promo-ribbon-2: color-mix(in srgb, var(--palette-pink-50) 55%, transparent);
  /* Подсветка тарифа при наведении. */
  --shadow-promo-hover: 0 8px 28px color-mix(in srgb, var(--palette-violet-500) 35%, transparent);

  /* ---------- Цвета: статусы ---------- */

  /* Заливки и полосы — фирменный зелёный, текст статуса — его тёмный оттенок
     по той же причине, что и у фиолетового. */
  --color-success: var(--palette-teal-500);
  --color-success-text: var(--palette-teal-800);
  --color-success-subtle: var(--palette-teal-50);
  --color-warning: var(--palette-amber-500);
  --color-warning-subtle: var(--palette-amber-50);
  --color-danger: var(--palette-red-500);
  --color-danger-subtle: var(--palette-red-50);
  --color-neutral: var(--palette-gray-500);
  --color-neutral-subtle: var(--palette-gray-100);

  /* ---------- Цвета: текст и поверхности ---------- */

  --color-text: var(--palette-gray-900);
  --color-text-muted: var(--palette-gray-700);
  --color-text-secondary: var(--palette-gray-500);
  --color-text-disabled: var(--palette-gray-400);

  --color-bg: var(--palette-gray-25);
  --color-surface: var(--palette-gray-0);
  --color-field: var(--palette-gray-50); /* на тон темнее фона: поле видно и на карточке, и прямо на странице */
  --color-disabled: var(--palette-gray-100);
  --color-border: var(--palette-gray-200);
  --color-border-strong: var(--palette-gray-300);
  --color-focus-ring: color-mix(in srgb, var(--color-primary) 35%, transparent);
  --color-overlay: rgb(30 38 51 / 0.45);

  /* ---------- Типографика ---------- */

  /* Inter упакован в приложение, подключение — fonts.css. Системный шрифт —
     только на время загрузки файла. */
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

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

  --font-size-caption: 12px;
  --font-size-body: 14px;
  --font-size-field: 16px;  /* 16, а не 14: iOS зумит страницу при фокусе на поле мельче 16px */
  --font-size-title: 20px;  /* заголовок карточки */
  --font-size-h2: 24px;
  --font-size-h1: 28px;

  --line-height-tight: 1.25;
  --line-height-body: 1.5;

  /* ---------- Отступы: шаг 4 ---------- */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ---------- Радиусы ---------- */

  --radius-control: 6px;  /* поля, кнопки, слоты */
  --radius-chip: 8px;
  --radius-card: 12px;    /* карточки и модалки */
  --radius-pill: 999px;

  /* ---------- Размеры ---------- */

  --size-control: 40px;
  --size-control-lg: 48px;
  --size-touch-min: 44px; /* минимальная зона касания на мобилке */
  --size-content-max: 1200px;

  /* ---------- Тени и анимация ---------- */

  --shadow-card: 0 1px 2px rgb(30 38 51 / 0.04);
  --shadow-popover: 0 8px 24px rgb(30 38 51 / 0.12);
  --shadow-modal: 0 16px 48px rgb(30 38 51 / 0.18);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Слои ---------- */

  --z-header: 10;
  --z-drawer: 20;
  --z-modal: 30;
  --z-toast: 40;
}