/* ============================================================
   МИНПРОД — BRAND LAYER  (загружается ПОСЛЕ app.css)
   ------------------------------------------------------------
   Перекрашивает весь дашборд в фирменный стиль МИНПРОД, не трогая
   разметку: app.css рендерит цвета через переменные var(--color-*),
   а здесь они переопределяются на токены дизайн-системы. Правила в
   :root (вне @layer) перебивают @layer theme из app.css по каскаду —
   пересборка Tailwind НЕ требуется.

   Источник токенов: design/.../tokens/*.css (state-blue → iris-violet
   primary, золотая печать, кулёр-слейт нейтрали, флаговый красный).
   Рекрас — правкой токенов, а не компонентов (принцип дизайн-системы).
   ============================================================ */

/* Фирменные шрифты (Cyrillic-capable, CDN). Оффлайн — деградируют в system-ui. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Onest:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ---------- 1. Перекрас палитры Tailwind на токены МИНПРОД ---------- */

  /* Iris (blue-violet) — ПЕРВИЧНЫЙ акцент. Заменяет teal во всём UI. */
  --color-teal-50:  #f3f1fd;
  --color-teal-200: #d6cef8;
  --color-teal-400: #9d8cea;
  --color-teal-600: #6a4bd6;   /* основное действие, плеер, активные акценты */
  --color-teal-700: #5a3dbf;   /* hover / надписи-эйчборы */

  /* Кулёр-слейт — нейтрали (мягко-холодные, лилово-тонированные). */
  --color-slate-50:  #f6f8fb;
  --color-slate-100: #edf1f6;
  --color-slate-200: #d6dee9;
  --color-slate-300: #b7c2d2;
  --color-slate-400: #8b98ac;
  --color-slate-500: #66748b;
  --color-slate-600: #4c5a70;
  --color-slate-700: #3a4659;
  --color-slate-800: #28303f;
  --color-slate-900: #1f1947;   /* НАМЕРЕННО: тёмные акценты = deep-iris «хром»
                                   (активный таб, акцентный KPI, активные чипы) */

  /* Зелёный — успех / выполнено (заменяет emerald). */
  --color-emerald-50:  #e9f7f0;
  --color-emerald-200: #97dbbb;
  --color-emerald-500: #1e8e5a;
  --color-emerald-600: #16744a;
  --color-emerald-700: #135e3d;

  /* Амбер — внимание / частично. */
  --color-amber-50:  #fbf3e6;
  --color-amber-200: #edc074;
  --color-amber-500: #b9781b;
  --color-amber-600: #95611a;
  --color-amber-700: #784f18;

  /* Флаговый красный — нарушение / риск / удаление (заменяет rose). */
  --color-rose-50:  #fdecec;
  --color-rose-200: #f4abab;
  --color-rose-300: #ed7c7c;
  --color-rose-500: #d32f2f;
  --color-rose-600: #c0282b;
  --color-rose-700: #9c1f24;

  /* State-blue — инфо / реплики менеджера в транскрипте. */
  --color-blue-50:  #edf2ff;
  --color-blue-200: #b4c6ff;
  --color-blue-500: #2e58e8;
  --color-blue-600: #1b50d6;
  --color-blue-700: #163fb0;

  /* gray / neutral (preline, скроллбары, тёмная тема) → в тон кулёр-слейту. */
  --color-gray-100: #edf1f6;
  --color-gray-200: #d6dee9;
  --color-gray-300: #b7c2d2;
  --color-gray-500: #66748b;
  --color-gray-600: #4c5a70;
  --color-gray-800: #28303f;
  --color-gray-900: #1a2230;
  --color-neutral-200: #d6dee9;
  --color-neutral-300: #b7c2d2;
  --color-neutral-400: #8b98ac;
  --color-neutral-500: #66748b;
  --color-neutral-600: #4c5a70;
  --color-neutral-700: #3a4659;
  --color-neutral-800: #28303f;
  --color-neutral-900: #1a2230;

  /* ---------- 2. Шрифты ---------- */
  --font-display: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;  /* заголовки */
  --font-sans:    'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif; /* текст / UI */
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* цифры / ID */
  --font-serif:   'PT Serif', 'Times New Roman', Georgia, serif;  /* «Директива», церемониально */
  /* Tailwind берёт html-шрифт отсюда: */
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);

  /* ---------- 3. Токены дизайн-системы (для кастомных стилей/будущей работы) -- */
  --violet-600: #6a4bd6; --violet-700: #5a3dbf; --violet-950: #241d4e;
  --gold-50: #fbf7ec; --gold-400: #d2a93c; --gold-500: #be9326; --gold-600: #a37c1e; --gold-700: #836218;
  --green-500: #1e8e5a; --amber-400: #db8e1e; --red-500: #d32f2f;
  --color-primary: #6a4bd6; --color-primary-hover: #5a3dbf;
  --color-accent: #be9326;
  --surface-page: #f5f4fb; --surface-card: #ffffff; --surface-chrome: #1f1947;
  --text-strong: #1a2230; --text-default: #28303f; --text-muted: #66748b; --text-subtle: #8b98ac;
  --border-subtle: #ebe8f4; --border-default: #e2def0;
  --gradient-primary: linear-gradient(135deg, #2f5fe6 0%, #6a4bd6 100%);
  --gradient-chrome:  linear-gradient(165deg, #241d54 0%, #1b1640 55%, #211a4d 100%);
  --gradient-page:    radial-gradient(1100px 460px at 100% -8%, #efeafc 0%, rgba(239,234,252,0) 60%);
  --phi: 1.618;

  /* Движение (из tokens/effects.css) — сдержанно, без баунса. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-1: 120ms;  /* hover / press */
  --duration-2: 180ms;  /* default      */
  --duration-3: 260ms;  /* overlays / entrances */
}

/* ---------- 4. Базовые брендовые штрихи ---------- */

/* Лилово-туманный фон страницы + мягкий радиальный wash (Минцифры-регистр). */
html.bg-slate-50, body {
  background-color: #f5f4fb;
}
body {
  background-image: var(--gradient-page);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-feature-settings: 'ss01', 'cv01';
}

/* Заголовки — дисплейный IBM Plex Sans, плотный трекинг. */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* Iris-фокус и брендовое выделение. */
:focus-visible { outline-color: #6a4bd6; }
::selection { background: #e8e4fb; color: #3c2c78; }

/* Брендовый эйчбро/оверлайн (имя .mp-eyebrow — НЕ Tailwind .overline). */
.mp-eyebrow {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Цифры/деньги — табличный моноширинный (sales = numbers). */
.tabular-nums { font-family: var(--font-mono); }

/* ---------- 5. Движение — из дизайн-системы: сдержанно, «entrances only» --------
   Все анимации/переходы только при no-preference; reduced-motion (внизу) глушит. */
@keyframes mp-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mp-pop  { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes mp-rise { from { opacity: 0; transform: translateY(8px) }            to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: no-preference) {
  /* Плавные ховеры/нажатия (по умолчанию переходов на этих элементах нет). */
  a, button, summary, [role="tab"], [data-call], [data-mgr], [data-seg],
  [data-seek], [data-rate], [data-sview], [data-scheme] {
    transition: background-color var(--duration-1) var(--ease-standard),
                border-color     var(--duration-1) var(--ease-standard),
                color            var(--duration-1) var(--ease-standard),
                box-shadow       var(--duration-1) var(--ease-standard),
                transform        var(--duration-1) var(--ease-standard);
  }
  /* Нажатие — сдвиг на 1px вниз (как interactive Card в дизайн-системе). */
  button:active, [data-call]:active, [data-mgr]:active,
  [data-seg]:active, [data-seek]:active { transform: translateY(1px); }

  /* Строки таблиц — плавная подсветка при наведении (Table.jsx). */
  tbody tr { transition: background-color var(--duration-1) var(--ease-standard); }

  /* Модалки (Preline .hs-overlay): подложка — fade, панель — fade + подъём 8px. */
  .hs-overlay-backdrop { animation: mp-fade var(--duration-2) var(--ease-standard); }
  .hs-overlay.open .pointer-events-auto { animation: mp-pop var(--duration-3) var(--ease-out); }

  /* Вход лендинга — один раз на загрузку, только статичные блоки «Обзора». */
  main > header, main > nav { animation: mp-rise var(--duration-3) var(--ease-out) both; }
  #p-overview > * { animation: mp-rise var(--duration-3) var(--ease-out) both; }
  #p-overview > *:nth-child(2) { animation-delay: 40ms }
  #p-overview > *:nth-child(3) { animation-delay: 80ms }
  #p-overview > *:nth-child(4) { animation-delay: 120ms }
  #p-overview > *:nth-child(n+5) { animation-delay: 150ms }
}

/* Доступность: уважать «уменьшить движение». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}