/* ============================================================
   ДИЗАЙН-СИСТЕМА + МИКРОВЗАИМОДЕЙСТВИЯ (аддитивный слой)
   Подключается ПОСЛЕ style.css. Ничего в логике не меняет — только
   токены, плавные переходы, hover/active/focus и анимации появления.
   Уважает prefers-reduced-motion.
   ============================================================ */
:root {
  /* Пространство (8-пиксельная сетка) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  /* Радиусы */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  /* Тени (мягкие, многослойные) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.22);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.34);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.4);
  /* Кривые движения (в духе Framer Motion) */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.14s;
  --dur-base: 0.24s;
  --dur-slow: 0.36s;
  /* Кольцо фокуса (доступность) */
  --focus-ring: 0 0 0 2px var(--bg-secondary, #14161b), 0 0 0 4px var(--accent, #6ab8ee);
}

/* ---- Базовые keyframes ---- */
@keyframes mo-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mo-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  60% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes mo-pulse {
  0% {
    opacity: 0.55;
    transform: scale(0.992);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---- Кнопки тулбара: плавный hover, тактильный press, фокус ---- */
.tool-btn,
.btn-soft,
.dropdown-item,
.seg-chip,
.panel-tab,
.mgr-chip,
.card-tab {
  transition:
    background var(--dur-base) var(--ease-smooth),
    border-color var(--dur-base) var(--ease-smooth),
    color var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.tool-btn:hover,
.btn-soft:hover {
  transform: translateY(-1px);
}
.tool-btn:active,
.btn-soft:active,
.seg-chip:active,
.mgr-chip:active,
.card-tab:active {
  transform: translateY(0) scale(0.96);
}
.tool-btn:focus-visible,
.btn-soft:focus-visible,
.seg-chip:focus-visible,
.panel-tab:focus-visible,
.card-tab:focus-visible,
.mgr-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---- Сегмент-кнопки (узоры/рамки/выравнивание) ---- */
.seg-chip:hover {
  transform: translateY(-1px);
  border-color: var(--border-light, #3a3f47);
}
.seg-chip.active {
  box-shadow: var(--shadow-1);
}

/* ---- Карточки превью (стили/версии/иконки/палитры) ---- */
.styles-card,
.version-card,
.library-item,
.palette-item,
.preset-card {
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-smooth),
    border-color var(--dur-base) var(--ease-smooth),
    background var(--dur-base) var(--ease-smooth);
}
.styles-card:hover,
.version-card:hover,
.preset-card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: var(--shadow-2);
}
.library-item:hover,
.palette-item:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-1);
}
.library-item:active,
.palette-item:active {
  transform: scale(0.96);
}

/* ---- Вкладки левой панели ---- */
.panel-tab:hover {
  transform: translateY(-1px);
}

/* ---- Переключатель режимов: подчёркивание активного ---- */
#card-switcher .card-tab {
  position: relative;
}
#card-switcher .card-tab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, #6ab8ee);
  transform: translateX(-50%);
  transition:
    width var(--dur-base) var(--ease-spring),
    opacity var(--dur-base) var(--ease-smooth);
  opacity: 0;
}
#card-switcher .card-tab.active::after {
  width: 60%;
  opacity: 1;
}

/* ---- Превью карты: лёгкий «материал» ---- */
#main-canvas {
  transition: box-shadow var(--dur-slow) var(--ease-smooth);
  box-shadow: var(--shadow-3);
}

/* ---- Инспектор: плавная смена содержимого ---- */
#inspector-content.mo-swap {
  animation: mo-fade-up var(--dur-base) var(--ease-out) both;
}

/* ---- Утилиты появления (включаются из 16-motion.js) ---- */
.mo-enter {
  animation: mo-fade-up var(--dur-slow) var(--ease-spring) both;
}
.mo-pop {
  animation: mo-pop-in var(--dur-slow) var(--ease-spring) both;
}

/* ============================================================
   ДОСТУПНОСТЬ (UI/UX Pro Max · приоритет 1–2)
   ============================================================ */
/* Экранным дикторам — скрытый, но озвучиваемый текст */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Убираем 300ms-задержку тапа и случайный зум на интерактиве */
.tool-btn,
.btn-soft,
.dropdown-item,
.seg-chip,
.panel-tab,
.mgr-chip,
.card-tab,
.library-item,
.palette-item,
button {
  touch-action: manipulation;
}
/* Достаточные тач-цели на сенсорных экранах (Apple 44 / Material 48) */
@media (pointer: coarse) {
  .tool-btn,
  .card-tab,
  .panel-tab,
  .seg-chip,
  .mgr-chip,
  .dropdown-item {
    min-height: 44px;
  }
  /* Мелкие иконочные кнопки — расширяем hit-area до тач-минимума */
  .layer-visibility,
  .layer-lock,
  .cmyk2-btn,
  .uploaded-item-remove,
  .hist-iconbtn,
  .slider-step {
    min-width: 40px;
    min-height: 40px;
  }
  .cmyk2-track {
    min-height: 32px;
  }
  /* Поля ввода ≥16px — браузер iOS не делает авто-зум при фокусе */
  .cmyk2-val,
  .color-hex-input,
  .ai-input,
  .type-search,
  .cmd-input,
  .mgr-search input,
  input[type='text'],
  input[type='number'],
  textarea {
    font-size: 16px;
  }
}
/* Skip-link — переход к холсту с клавиатуры */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 8px 14px;
  border-radius: var(--r-sm, 6px);
  background: var(--accent, #6ab8ee);
  color: #06121f;
  font-size: var(--fs-base);
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ============================================================
   P3 PERFORMANCE · скелетоны и индикаторы загрузки
   ============================================================ */
@keyframes mo-shimmer {
  0% {
    background-position: -160% 0;
  }
  100% {
    background-position: 160% 0;
  }
}
/* Скелетон-плейсхолдер для миниатюр, пока они генерируются */
.preset-preview:empty,
.version-noimg {
  background-image: linear-gradient(
    100deg,
    var(--bg-tertiary, #1c1f24) 30%,
    var(--border-light, #3a3f47) 50%,
    var(--bg-tertiary, #1c1f24) 70%
  );
  background-size: 220% 100%;
  animation: mo-shimmer 1.2s var(--ease-smooth) infinite;
  border-radius: var(--r-sm, 6px);
}
/* Спиннер (для тостов «Генерируем…») */
@keyframes mo-spin {
  to {
    transform: rotate(360deg);
  }
}
.mo-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: mo-spin 0.7s linear infinite;
  opacity: 0.85;
  flex: 0 0 auto;
}

/* ============================================================
   P6 ТИПОГРАФИКА · читаемость вспомогательного текста
   ============================================================ */
.styles-sub,
.mgr-count,
.mgr-empty,
.gamut-warning,
.slider-label-text {
  line-height: 1.5;
}

/* ============================================================
   P8 ФОРМЫ И ОБРАТНАЯ СВЯЗЬ · фокус и состояния полей
   ============================================================ */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent, #6ab8ee) !important;
}
.color-hex-input:invalid,
input[type='number']:invalid {
  border-color: #e74c3c !important;
}
.color-hex-input,
.slider-label-value,
input[type='text'],
input[type='number'] {
  transition:
    border-color var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth);
}

/* ---- Уважение к настройке «меньше движения» ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}