/* ============================================================
   variables.css — дизайн-токены проекта

   Палитра «Премиальный статус»:
     60% — #111111 глубокий графит, база: атмосфера закрытого клуба
     30% — #2A2A2A тёмно-серые панели и #FFFFFF контрастный текст
     10% — #D4AF37 матовое золото и #C0C0C0 платина, строго дозированно
     светлый остров — #F1EFEA, цвет дорогой премиальной бумаги
   ============================================================ */

:root {
  /* ---------- База ---------- */
  --ink: #111111;        /* фон страницы */
  --panel: #181818;      /* подложка секций для ритма внутри тёмного */
  --panel-2: #2a2a2a;    /* карточки и блоки внутри тёмных секций */
  --white: #ffffff;      /* основной текст на тёмном — 19:1 */
  --paper: #f1efea;      /* светлый остров: премиальная бумага */

  /* ---------- Акценты ----------
     Золото на графите даёт 9.1:1 — читается даже мелким текстом.
     На светлой бумаге то же золото даёт 1.8:1, поэтому для
     светлых секций есть отдельный тёмный оттенок --gold-text (5.3:1). */
  --gold: #d4af37;       /* кнопки, цифры, тонкие линии */
  --gold-soft: #e8c766;  /* hover и блики на золоте */
  --gold-deep: #9a7a24;  /* границы золотых элементов: 3.5:1 к бумаге, 4.7:1 к графиту */
  --gold-text: #7a5f16;  /* золото для текста на светлой бумаге */
  --platinum: #c0c0c0;   /* второй акцент: платина, 10.5:1 на графите */

  /* ---------- Текст ---------- */
  --muted: #a8a29a;      /* вторичный текст на графите — 7.5:1 */
  --muted-dark: #5a554d; /* вторичный текст на бумаге — 6.4:1 */

  /* ---------- Линии и поверхности ---------- */
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.2);
  --line-paper: rgba(17, 17, 17, 0.12);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --gold-veil: rgba(212, 175, 55, 0.12);

  /* ---------- Типографика ---------- */
  --font-display: "Unbounded", "Manrope", system-ui, -apple-system, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-h1: clamp(38px, 5.6vw, 72px);
  --fs-h2: clamp(28px, 4vw, 48px);
  --fs-h3: clamp(22px, 2.4vw, 30px);
  --fs-h4: 19px;
  --fs-lede: clamp(17px, 1.6vw, 20px);
  --fs-body: 17px;
  --fs-sm: 15px;
  --fs-xs: 13px;

  --lh-display: 1.08;
  --lh-body: 1.6;
  --ls-display: -0.02em;
  --ls-h3: -0.01em;
  --ls-caps: 0.12em;   /* разрядка для мелких капсом подписей */

  /* ---------- Spacing: шаг кратен 8 ---------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 80px;
  --s-9: 96px;
  --s-10: 120px;

  /* ---------- Сетка ---------- */
  --container: 1200px;
  --columns: 12;
  --gutter: 24px;
  --grid-gap: var(--s-4);
  --section-y: var(--s-10);
  --header-h: 88px;
  --header-h-stuck: 64px;

  /* ---------- Радиусы (16–28px) ---------- */
  --r-s: 16px;
  --r-m: 20px;
  --r-l: 24px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Тени ----------
     На графите мягкие тени не читаются, поэтому их всего две:
     плотная под картой и золотое свечение под кнопкой.
     Глубину держат разница фонов панелей и подсветка золотом. */
  --shadow-card: 0 44px 80px -32px rgba(0, 0, 0, 0.85);
  --shadow-cta: 0 14px 30px -14px rgba(212, 175, 55, 0.45);

  /* ---------- Движение ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 200ms;
  --dur-mid: 320ms;
  --dur-slow: 520ms;

  /* ---------- Слои ---------- */
  --z-content: 1;
  --z-header: 100;
  --z-menu: 200;

  /* ---------- Карты ----------
     Дебетовая — золото, для путешествий — платина,
     кредитная — матовый чёрный с золотой линией.
     --card-fg задаёт цвет текста на самой карте. */
  --card-debit: radial-gradient(125% 125% at 15% 0%, #efd177 0%, #c9a233 44%, #7d6119 100%);
  --card-travel: radial-gradient(125% 125% at 88% 8%, #eaeaea 0%, var(--platinum) 45%, #7c7c7c 100%);
  --card-credit: radial-gradient(130% 120% at 0% 0%, #2f2f2f 0%, #171717 55%, #0a0a0a 100%);
}

/* Планшет и мобайл: отступы секций 56–72px, чуть уже поля */
@media (max-width: 767px) {
  :root {
    --section-y: var(--s-7);
    --gutter: 20px;
    --grid-gap: var(--s-3);
    --header-h: 72px;
    --header-h-stuck: 60px;
  }
}