/* ============================================================
   Mila Design System — tokens & base components
   Источник: Figma design system Mila (Colors / Typography / Spacing /
   Radius / Shadows / Buttons / Text Input / Select / Switch / Checkbox /
   Segmented Control / Slider / Calendar / Progress), выгружено вручную.

   Как читать этот файл человеку: смотри design-library.md — там те же
   токены с объяснением, что они значат.
   Правила использования: смотри design-system.md.

   Подключение в прототип:
   <link rel="stylesheet" href="/design/assets/css/tokens.css">
   (или относительный путь, если прототип лежит не в корне проекта)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');

:root {
  /* ---- Colors: Gray (нейтральный, текст/фон/бордеры) ---- */
  --gray-0: #EEF5FF; --gray-1: #E2E7EF; --gray-2: #C6CCD6; --gray-3: #A9B1BE; --gray-4: #8D97A7;
  --gray-5: #7C889A; --gray-6: #738095; --gray-7: #616E82; --gray-8: #546276; --gray-9: #45546B;

  /* ---- Colors: Red (danger / error) ---- */
  --red-0: #FFF5F5; --red-1: #FFE3E3; --red-2: #FFC9C9; --red-3: #FFA8A8; --red-4: #FF8787;
  --red-5: #FF6B6B; --red-6: #FA5252; --red-7: #F03E3E; --red-8: #E03131; --red-9: #C92A2A;

  /* ---- Colors: Indigo (основной акцент бренда) ---- */
  --indigo-0: #EBF1FF; --indigo-1: #D6DFFC; --indigo-2: #ADBDEF; --indigo-3: #8098E4; --indigo-4: #5B78DA;
  --indigo-5: #496AD6; --indigo-6: #355BD3; --indigo-7: #264BBB; --indigo-8: #1E43A9; --indigo-9: #0F3996;

  /* ---- Colors: Blue (второй, приглушённый синий) ---- */
  --blue-0: #F1F2F9; --blue-1: #DFE2EB; --blue-2: #BCC2D9; --blue-3: #96A0C8; --blue-4: #7784B9;
  --blue-5: #6372B0; --blue-6: #5868AD; --blue-7: #495898; --blue-8: #3F4E89; --blue-9: #263159;

  /* ---- Colors: Green ----
     В исходном Figma-экспорте значения Green 0-9 буквально совпадают
     с Blue 0-9 — похоже, палитра ещё не заполнена дизайнером.
     Временно приравниваем к Blue, чтобы не выдумывать свои цвета.
     Когда в Figma появятся настоящие значения — обновить здесь. */
  --green-0: var(--blue-0); --green-1: var(--blue-1); --green-2: var(--blue-2); --green-3: var(--blue-3); --green-4: var(--blue-4);
  --green-5: var(--blue-5); --green-6: var(--blue-6); --green-7: var(--blue-7); --green-8: var(--blue-8); --green-9: var(--blue-9);

  --white: #FFFFFF;
  --black: #000000;
  --black-70: rgba(0,0,0,0.7);

  /* ---- Spacing ---- */
  --spacing-xxs: 2px; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px;
  --spacing-lg: 16px; --spacing-xl: 24px; --spacing-xxl: 32px;

  /* ---- Radius ---- */
  --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 20px;

  /* ---- Shadows ---- */
  --shadow-s-up: 0 -4px 8px rgba(73,106,214,0.08);
  --shadow-m-up: 0 -4px 8px rgba(73,106,214,0.12);
  --shadow-s-center: 0 0 8px rgba(73,106,214,0.08);
  --shadow-m-center: 0 0 8px rgba(73,106,214,0.12);
  --shadow-s-down: 0 4px 8px rgba(73,106,214,0.08);
  --shadow-m-down: 0 4px 8px rgba(73,106,214,0.12);

  /* ---- Семантические роли (используй их в разметке, а не сырые цвета) ---- */
  --color-primary: var(--indigo-5);
  --color-primary-hover: var(--indigo-6);
  --color-danger: var(--red-6);
  --color-danger-hover: var(--red-7);
  --color-text: var(--gray-9);
  --color-text-muted: var(--gray-5);
  --color-border: var(--gray-2);
  --color-bg: var(--gray-0);
  --color-surface: var(--white);
}

* { box-sizing: border-box; }
body {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
}

/* ============================================================
   Typography (Onest)
   ============================================================ */
.h1 { font-size: 30px; line-height: 32px; font-weight: 600; margin: 0; }
.h2 { font-size: 24px; line-height: 30px; font-weight: 600; margin: 0; }
.h3 { font-size: 22px; line-height: 26px; font-weight: 600; margin: 0; }
.subtitle1 { font-size: 18px; line-height: 20px; font-weight: 600; margin: 0; }
.subtitle2 { font-size: 16px; line-height: 20px; font-weight: 600; margin: 0; }
.subtitle3 { font-size: 14px; line-height: 18px; font-weight: 600; margin: 0; }
.subtitle4 { font-size: 13px; line-height: 14px; font-weight: 600; margin: 0; }
.body1 { font-size: 16px; line-height: 22px; font-weight: 400; margin: 0; }
.body2 { font-size: 14px; line-height: 22px; font-weight: 400; margin: 0; }
.caption1 { font-size: 12px; line-height: 18px; font-weight: 400; margin: 0; color: var(--color-text-muted); }
.caption2 { font-size: 10px; line-height: 16px; font-weight: 400; margin: 0; color: var(--color-text-muted); }

/* ============================================================
   Buttons — variants: filled / light / subtle / white / chat
   types: primary (default) / danger (add class .danger)
   sizes: .btn-lg / .btn-sm
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs);
  font-family: 'Onest', sans-serif; font-weight: 400; border: none; cursor: pointer;
  border-radius: var(--radius-xl); transition: background .15s, opacity .15s;
}
.btn-lg { font-size: 16px; line-height: 26px; padding: 9px 24px; }
.btn-sm { font-size: 12px; line-height: 16px; padding: 6px 16px; }
.btn:disabled { cursor: not-allowed; }

.btn-filled { background: var(--color-primary); color: var(--white); }
.btn-filled:hover { background: var(--color-primary-hover); }
.btn-filled:disabled { background: var(--gray-2); color: var(--gray-5); }

.btn-light { background: var(--indigo-1); color: var(--indigo-6); }
.btn-light:hover { background: var(--indigo-2); }
.btn-light:disabled { background: var(--gray-1); color: var(--gray-4); }
.btn-light.danger { background: var(--red-1); color: var(--red-7); }
.btn-light.danger:hover { background: var(--red-2); }

.btn-subtle { background: transparent; color: var(--indigo-6); padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.btn-subtle:hover { background: var(--indigo-0); }
.btn-subtle:disabled { color: var(--gray-4); }

.btn-white { background: var(--white); color: var(--indigo-6); box-shadow: var(--shadow-s-center); }
.btn-white.danger { color: var(--red-7); }
.btn-white:disabled { color: var(--gray-4); }

.btn-chat { background: var(--blue-4); color: var(--white); font-size: 14px; line-height: 20px; padding: 8px 16px; }
.btn-chat:hover { background: var(--blue-5); }

/* ============================================================
   Cards / surfaces
   ============================================================ */
.card { background: var(--color-surface); border-radius: var(--radius-l); padding: var(--spacing-lg); box-shadow: var(--shadow-s-down); }

/* ============================================================
   Text Input
   ============================================================ */
.input-wrap { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.input-label { font-size: 14px; font-weight: 600; }
.input-desc { font-size: 12px; color: var(--color-text-muted); }
.input {
  font-family: 'Onest', sans-serif; font-size: 16px; padding: 12px 16px;
  border-radius: var(--radius-m); border: 1px solid var(--color-border); background: var(--white);
  outline: none; width: 100%;
}
.input:focus { border-color: var(--color-primary); }
.input.error { border-color: var(--color-danger); }
.input:disabled { background: var(--gray-0); color: var(--gray-4); }
.input-caption { font-size: 12px; color: var(--color-text-muted); }
.input-caption.error { color: var(--color-danger); }

/* ============================================================
   Select — визуально как input + выпадающий список
   ============================================================ */
.select { position: relative; }
.select-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-m);
  box-shadow: var(--shadow-m-down); overflow: hidden; z-index: 10;
}
.select-item { padding: 10px 16px; font-size: 14px; cursor: pointer; }
.select-item:hover { background: var(--indigo-0); }

/* ============================================================
   Switch
   ============================================================ */
.switch { display: inline-flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; }
.switch-track {
  width: 40px; height: 24px; border-radius: 999px; background: var(--gray-2);
  position: relative; transition: background .15s; flex-shrink: 0;
}
.switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--white); transition: transform .15s;
}
.switch.on .switch-track { background: var(--color-primary); }
.switch.on .switch-track::after { transform: translateX(16px); }
.switch-label { font-size: 14px; }
.switch-caption { font-size: 12px; color: var(--color-text-muted); }

/* ============================================================
   Checkbox
   ============================================================ */
.checkbox {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.checkbox.checked { background: var(--color-primary); border-color: var(--color-primary); color: var(--white); }
.checkbox.error { border-color: var(--color-danger); }
.checkbox.disabled { background: var(--gray-0); border-color: var(--gray-2); cursor: not-allowed; }

/* ============================================================
   Segmented Control
   ============================================================ */
.segmented { display: inline-flex; background: var(--gray-0); border-radius: var(--radius-xl); padding: 2px; }
.segmented-item { padding: 6px 16px; font-size: 12px; border-radius: var(--radius-xl); color: var(--color-text-muted); cursor: pointer; }
.segmented-item.active { background: var(--white); color: var(--color-primary); box-shadow: var(--shadow-s-center); }
.segmented-item.disabled { color: var(--gray-3); cursor: not-allowed; }

/* ============================================================
   Slider
   ============================================================ */
.slider { width: 100%; accent-color: var(--color-primary); }

/* ============================================================
   Progress bar
   ============================================================ */
.progress { height: 6px; border-radius: 999px; background: var(--indigo-1); overflow: hidden; }
.progress.md { height: 8px; }
.progress-fill { height: 100%; background: var(--indigo-6); border-radius: 999px; }

/* ============================================================
   Calendar day cell (для .card-календарей)
   ============================================================ */
.cal-day { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 13px; cursor: pointer; }
.cal-day:hover { background: var(--indigo-0); }
.cal-day.selected { background: var(--color-primary); color: var(--white); }
.cal-day.disabled { color: var(--gray-3); cursor: not-allowed; }