/* =========================================================
   AeroPic Design System v2 — единый источник токенов
   Подключать первым на всех страницах: <link rel="stylesheet" href="/ap-design.css">
   ========================================================= */

:root {
  /* ── Цвета: Brand (палитра Stripe HDS) ─────────────────── */
  --color-indigo-brand:  #533afd; /* stripe-indigo */
  --color-indigo-dark:   #4527d1; /* затемнённый stripe-indigo, ховеры */
  --color-violet:        #7f7dfc; /* brand-lavender */
  --color-indigo-subtle: rgba(83,58,253,.08);
  --color-indigo-mid:    rgba(83,58,253,.18);
  --color-accent-orange: #ff6118; /* stripe-orange — вторичный акцент */

  /* ── Цвета: Текст ────────────────────────────────────── */
  --color-text-primary:   #061b31; /* deep-navy */
  --color-text-secondary: #273951; /* dark-slate */
  --color-muted-text:     #50617a; /* slate-body */
  --color-subtle-text:    #64748d; /* subdued-heading */
  --color-disabled-text:  #9aa7bb;

  /* ── Цвета: Поверхности ──────────────────────────────── */
  --color-page-background: #f8fafd; /* pale-background */
  --color-card-surface:    #ffffff; /* surface-white */
  --color-subtle-surface:  #e5edf5; /* quiet-surface */
  --color-hover-surface:   #f2f1ff;
  --color-border-default:  #e5edf5; /* quiet-surface */

  /* ── Цвета: Статусы (вне палитры Stripe — сохранены свои) ── */
  --color-green-accent: #10b981;
  --color-green-bg:     #ecfdf5;
  --color-green-border: #a7f3d0;
  --color-warn:         #f59e0b;
  --color-danger:       #ef4444;

  /* ── Цвета: Premium gold (вне палитры Stripe — сохранены свои) ── */
  --color-gold:        #d97706;
  --color-gold-bg:     #fffbeb;
  --color-gold-border: #fcd34d;

  /* ── Радиусы (шкала Stripe HDS: 0/1/4/6/8/16px) ─────────
     Сопоставление по роли элемента, а не по порядку значений —
     у Stripe radius-xl(16px) это «Card corner», а не наибольшее
     число в шкале само по себе. */
  --radius-xs:       4px;  /* мелкие чипы/теги — subtle corner */
  --radius-sm:       8px;  /* кнопки, мелкие карточки — control corner */
  --radius-md:       6px;  /* декоративные вложенные блоки (иконки) — subtle corner */
  --radius-default: 16px;  /* основные карточки (tool-card, blog-card…) — card corner */
  --radius-lg:      16px;  /* крупные карточки — тот же card corner, больше в шкале Stripe нет */
  --radius-pill:   999px;  /* исключение шкалы — форма пилюль/бейджей у AeroPic */

  /* ── Отступы (шкала Stripe HDS, 8px база) ─────────────── */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;
  --space-11: 40px;
  --space-12: 44px;
  --space-13: 64px;
  --space-14: 96px;

  /* ── Тени (шкала Stripe HDS) ───────────────────────────── */
  --shadow-xs:          0px 2px 5px 0px rgba(0,0,0,.1);
  --shadow-sm:          0px 3px 6px 0px rgba(23,23,23,.06);
  --shadow-md:          0px 15px 35px 0px rgba(23,23,23,.08);
  --shadow-lg:          0px 16px 32px 0px rgba(50,50,93,.12);
  --shadow-xl:          0px 20.187px 40.374px -20.187px rgba(0,0,0,.1);
  --shadow-indigo-glow: 0px 6px 20px 0px rgba(127,125,252,.4);

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

  /* ── Типографика (шкала Stripe HDS — sohne-var лицензионный,
       используем Inter с тем же лёгким начертанием и метрикой) ── */
  --font-inter: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;

  /* ── Градиенты ───────────────────────────────────────── */
  --gradient-brand:   linear-gradient(135deg, var(--color-indigo-brand), var(--color-violet));
  --gradient-bg:      linear-gradient(135deg, rgba(83,58,253,.04), rgba(127,125,252,.04));
  --gradient-dark:    linear-gradient(135deg, #061b31, #273951);
  --gradient-premium: linear-gradient(135deg, #fef3c7, #fde68a);
}

/* ── Layout ──────────────────────────────────────────────── */
/*
 * Паттерн: каждая секция страницы оборачивает контент в .container
 *
 *   <section class="hero">
 *     <div class="container"> … </div>
 *   </section>
 *
 * Ширина и отступы одинаковы на всех страницах — менять только здесь.
 */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Base reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-inter);
  background: var(--color-page-background);
  color: var(--color-text-primary);
  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(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

/* ── Marketplace presets ─────────────────────────────────── */
.presets-row { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 4px; }
.preset-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
  background: var(--color-subtle-surface); color: var(--color-muted-text);
  border: 1.5px solid var(--color-border-default); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.preset-btn:hover { background: var(--color-hover-surface); border-color: var(--color-violet); color: var(--color-indigo-dark); }
.preset-btn-active { background: var(--color-hover-surface) !important; border-color: var(--color-indigo-brand) !important; color: var(--color-indigo-dark) !important; }
.preset-icon { font-size: 14px; }
.preset-info {
  font-size: 12px; color: var(--color-indigo-dark); background: var(--color-hover-surface);
  border: 1px solid rgba(83,58,253,.25); border-radius: var(--radius-default);
  padding: 8px 14px; line-height: 1.5;
}
.preset-info.hidden { display: none; }

/* ── Savings counter (compress page) ────────────────────── */
.savings-counter {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 14px 20px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1px solid #a7f3d0; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: #065f46;
  animation: savings-in .3s ease;
}
@keyframes savings-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.savings-icon { font-size: 18px; }
.savings-total { font-size: 12px; font-weight: 500; color: #047857; margin-left: auto; }
.savings-counter.hidden { display: none; }