/*
 * Дизайн-система ГСК «Москвич-2»: токены.
 *
 * Здесь собраны базовые значения, из которых строятся и сайт, и конструктор:
 * палитра, типографика, отступы, скругления, тени, анимация и слои.
 * Компоненты используют только семантические токены (--color-*, --space-* и т. д.),
 * а не конкретные цвета. Тема сайта из конструктора переопределяет семантические
 * токены через --theme-*, поэтому смена цвета не требует правки CSS.
 * Описание и примеры: docs/DESIGN_SYSTEM.md и страница /editor/ui-kit/.
 */

@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/andika-400.4c4c5b9be712.woff2") format("woff2");
}

@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/andika-700.aba1fbb77e98.woff2") format("woff2");
}

@font-face {
  font-family: "Pattaya";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/pattaya-400.99f70b0408e6.woff2") format("woff2");
}

:root {
  /* Палитра бренда */
  --blue-900: #0c2f4a;
  --blue-800: #124265;
  --blue-700: #16507b;
  --blue-600: #1e6ca6;
  --blue-500: #2487ce;
  --blue-400: #469fdf;
  --blue-100: #dbeaf7;
  --blue-50: #f3f8fd;
  --sky-500: #00aaff;
  --sky-100: #e0f4ff;

  --gray-900: #1b2430;
  --gray-800: #2c3643;
  --gray-700: #444c57;
  --gray-600: #5f6874;
  --gray-500: #7d8692;
  --gray-400: #a4acb6;
  --gray-300: #cdd3da;
  --gray-200: #e3e7ec;
  --gray-100: #f0f3f6;
  --gray-50: #f8fafc;
  --white: #ffffff;

  --red-600: #c9372c;
  --red-50: #fdecea;
  --green-600: #1f8a4c;
  --green-50: #e8f6ee;
  --amber-600: #b76e00;
  --amber-50: #fff5e0;

  /* Семантические цвета (их переопределяет тема сайта) */
  --color-accent: var(--theme-accent, var(--blue-500));
  --color-accent-strong: var(--blue-600);
  --color-heading: var(--theme-heading, var(--blue-800));
  --color-text: var(--theme-text, var(--gray-700));
  --color-muted: var(--gray-500);
  --color-frame: var(--theme-frame, var(--sky-500));
  --color-bg: var(--theme-bg, var(--white));
  --color-surface: var(--white);
  --color-surface-alt: var(--blue-50);
  --color-border: var(--gray-200);
  --color-danger: var(--red-600);
  --color-success: var(--green-600);
  --color-warning: var(--amber-600);
  --color-focus: #1a73e8;

  /* Типографика */
  --font-sans: var(--theme-font, "Andika", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Pattaya", "Andika", cursive;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: var(--theme-size, 16px);
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 34px;
  --text-4xl: 48px;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

  /* Отступы: шкала с шагом 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Ширина контейнеров */
  --container-narrow: 720px;
  --container-medium: 960px;
  --container-wide: 1200px;
  --gutter: var(--space-4);

  /* Скругления */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Тени */
  --shadow-xs: 0 1px 2px rgba(18, 66, 101, 0.08);
  --shadow-sm: 0 2px 8px rgba(18, 66, 101, 0.08);
  --shadow-md: 0 6px 20px rgba(18, 66, 101, 0.12);
  --shadow-lg: 0 16px 40px rgba(18, 66, 101, 0.18);
  --shadow-card: 10px 10px 20px rgba(0, 0, 0, 0.25);
  --shadow-focus: 0 0 0 3px rgba(26, 115, 232, 0.35);

  /* Анимация */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  /* Слои */
  --z-header: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}

/* Иконки из спрайта */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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