/* =========================================================
   AeroPic Design System — единый источник токенов
   Подключать первым на всех страницах: <link rel="stylesheet" href="/ap-design.css">
   Инструментальные страницы (compress, convert-*) получают
   эти же переменные через src/styles/main.css (Vite bundle).
   ========================================================= */

/* ── Цвета ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --ap-indigo:       #6366f1;
  --ap-indigo-d:     #4f46e5;
  --ap-violet:       #8b5cf6;
  --ap-indigo-light: rgba(99,102,241,.08);
  --ap-indigo-mid:   rgba(99,102,241,.18);

  /* Текст */
  --ap-text:         #0f172a;
  --ap-text-sub:     #334155;
  --ap-muted:        #64748b;
  --ap-muted2:       #94a3b8;

  /* Поверхности */
  --ap-bg:           #f8faff;
  --ap-card:         #ffffff;
  --ap-subtle:       #f1f5f9;
  --ap-hover:        #eef2ff;
  --ap-border:       #e2e8f0;

  /* Статусы */
  --ap-green:        #10b981;
  --ap-green-bg:     #ecfdf5;
  --ap-green-border: #a7f3d0;
  --ap-warn:         #f59e0b;
  --ap-danger:       #ef4444;

  /* Premium (gold) */
  --ap-gold:         #d97706;
  --ap-gold-bg:      #fffbeb;
  --ap-gold-border:  #fcd34d;

  /* ── Радиусы ─────────────────────────────────────────── */
  --ap-r-xs:   8px;
  --ap-r:      12px;
  --ap-r-md:   16px;
  --ap-r-lg:   20px;
  --ap-r-xl:   24px;
  --ap-r-pill: 999px;

  /* ── Тени ────────────────────────────────────────────── */
  --ap-sh-xs: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --ap-sh-sm: 0 2px 8px rgba(99,102,241,.08), 0 1px 3px rgba(0,0,0,.04);
  --ap-sh-md: 0 4px 16px rgba(99,102,241,.12), 0 2px 6px rgba(0,0,0,.04);
  --ap-sh-lg: 0 8px 32px rgba(99,102,241,.16), 0 2px 8px rgba(0,0,0,.05);
  --ap-sh-xl: 0 20px 60px rgba(99,102,241,.20);

  /* ── Анимации ────────────────────────────────────────── */
  --ap-ease:   .18s cubic-bezier(.4,0,.2,1);
  --ap-ease-s: .32s cubic-bezier(.4,0,.2,1);

  /* ── Типографика ─────────────────────────────────────── */
  --ap-font: 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Градиенты ───────────────────────────────────────── */
  --ap-grad-brand:   linear-gradient(135deg, var(--ap-indigo), var(--ap-violet));
  --ap-grad-bg:      linear-gradient(135deg, rgba(99,102,241,.04), rgba(139,92,246,.04));
  --ap-grad-dark:    linear-gradient(135deg, #1e1b4b, #312e81);
  --ap-grad-premium: linear-gradient(135deg, #fef3c7, #fde68a);
}

/* ── Base reset (применяется когда этот файл подключён) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--ap-font);
  background: var(--ap-bg);
  color: var(--ap-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; }

/* ── Shared utility: gradient text ───────────────────────── */
.ap-grad-text {
  background: var(--ap-grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Shared: premium badge in nav ────────────────────────── */
.ap-premium-active {
  background: var(--ap-green-bg) !important;
  color: #065f46 !important;
  border-color: var(--ap-green-border) !important;
}