/* Mind-Board 2.0: токены дизайн-системы. Описание и источники каждого решения: DESIGN.md */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* цвет, светлая тема: Mirotone 5.3.2 (Miro UI Kit, MIT) и мерки холста Miro 08.10.2026 */
  --canvas: #f2f2f2;          /* холст Miro, снят с экрана: острова белые, холст серый */
  --panel: #ffffff;
  --panel-2: #f3f4f6;         /* gray-100 */
  --ink: #1a1b1e;             /* gray-900 */
  --ink-2: #4a4e5e;           /* gray-600 */
  --ink-3: #656b81;           /* gray-500 */
  --line: #e0e1e6;            /* gray-200 */
  --line-2: #ebecf0;          /* gray-150 */
  --hover: #f3f4f6;
  --primary: #3859ff;         /* blue-500, основной синий Miro */
  --primary-ink: #ffffff;
  --primary-soft: #e8ecfc;    /* blue-150 */
  --ai: #7c3aed;              /* фиолетовый ИИ: Miro и MindMap AI, правило двух образцов */
  --ai-ink: #ffffff;
  --ai-soft: #ede9fe;
  --add: #1c8f00;             /* green-500 */
  --add-soft: #eaf6e6;
  --chg: #b97a07;
  --chg-line: #c47f0f;
  --chg-soft: #fff0c5;
  --del: #d8182c;             /* red-500 */
  --del-soft: #fdf2f3;
  --focus-inner: #ffffff;
  --focus-outer: #3859ff;
  --grid-line: rgb(34 36 40 / 0.07);
  --outline: #c1c3cd;         /* gray-300: рамка поля и вторичной кнопки */

  /* шрифт: шкала 1.2 */
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-22: 22px;
  --t-28: 28px;

  /* пространство: шаг 4 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  /* форма: Mirotone radii-50 у кнопок, radii-100 у островов, radii-200 у окон */
  --r-control: 4px;
  --r-island: 8px;
  --r-sheet: 16px;
  --r-pill: 999px;

  /* глубина: рамка и тень вместе не ставятся */
  /* тени Miro: панель 0 2px 4px #22242814, всплывающее 0 2px 8px #2224281f + 0 0 12px #2224280a; кольцо 1 px держит контур на белых темах карты */
  --sh-island: 0 0 0 1px rgb(34 36 40 / 0.08), 0 2px 4px rgb(34 36 40 / 0.08);
  --sh-menu: 0 0 0 1px rgb(34 36 40 / 0.08), 0 2px 8px rgb(34 36 40 / 0.12), 0 0 12px rgb(34 36 40 / 0.04);
  /* возвышение: ключевая тень плюс рассеянная, контур кольцом; размытие не больше 12 px */
  --e1: 0 0 0 1px rgb(34 36 40 / 0.08), 0 1px 2px rgb(34 36 40 / 0.06), 0 3px 8px rgb(34 36 40 / 0.07);
  --e2: 0 0 0 1px rgb(34 36 40 / 0.10), 0 2px 4px rgb(34 36 40 / 0.06), 0 8px 12px -4px rgb(34 36 40 / 0.16);
  --e-ai: 0 0 0 1.5px rgb(124 58 237 / 0.42), 0 2px 4px rgb(34 36 40 / 0.06), 0 8px 12px -4px rgb(124 58 237 / 0.28);
  --btn-hi: inset 0 1px 0 rgb(255 255 255 / 0.22);
  --sh-focus: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-outer);

  /* слои */
  --z-canvas: 0;
  --z-island: 10;
  --z-panel: 20;
  --z-menu: 30;
  --z-sheet: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --z-tip: 70;

  /* движение */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 120ms;
  --d: 180ms;

  /* размеры */
  --btn: 40px;               /* зона нажатия инструмента Miro 40x40 */
  --panel-w: 332px;
  color-scheme: light;
}

:root[data-theme='dark'] {
  /* тёмная: шкала gray Mirotone, острова на ступень светлее холста, кольцо 1 px */
  --canvas: #1a1b1e;          /* gray-900 */
  --panel: #2b2e35;           /* gray-750 */
  --panel-2: #343741;         /* gray-700 */
  --ink: #f3f4f6;
  --ink-2: #c1c3cd;
  --ink-3: #979cab;
  --line: #3f424f;
  --line-2: #343741;
  --hover: #343741;
  --primary: #7a90fe;         /* blue-400 */
  --primary-ink: #101633;
  --primary-soft: #243797;
  --ai: #a78bfa;
  --ai-ink: #1a1b1e;
  --ai-soft: #3b2a6b;
  --add: #65b452;
  --add-soft: #143e09;
  --chg: #f0b44a;
  --chg-line: #f0b44a;
  --chg-soft: #3a2c0f;
  --del: #e56673;
  --del-soft: #3d1a1e;
  --focus-inner: #1a1b1e;
  --focus-outer: #7a90fe;
  --grid-line: rgb(243 244 246 / 0.07);
  --outline: #575c6f;         /* gray-550 */
  --sh-island: 0 0 0 1px rgb(243 244 246 / 0.12), 0 4px 12px rgb(0 0 0 / 0.4);
  --sh-menu: 0 0 0 1px rgb(243 244 246 / 0.14), 0 10px 28px rgb(0 0 0 / 0.55);
  --e1: 0 0 0 1px rgb(243 244 246 / 0.12), 0 1px 2px rgb(0 0 0 / 0.3), 0 3px 8px rgb(0 0 0 / 0.35);
  --e2: 0 0 0 1px rgb(243 244 246 / 0.18), 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 12px -4px rgb(0 0 0 / 0.55);
  --e-ai: 0 0 0 1.5px rgb(167 139 250 / 0.55), 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 12px -4px rgb(167 139 250 / 0.3);
  --btn-hi: inset 0 1px 0 rgb(255 255 255 / 0.14);
  color-scheme: dark;
}

@media (max-width: 760px) {
  :root { --btn: 44px; }
}