/* ==========================================================================
   LEVITA - Т-Банк одностраничник. Дизайн-токены.
   Строго 4 цвета канона + производные через прозрачность графита.
   База: projects/studio-landing/design (канон-версия), бренд: business/shared/brand.
   ========================================================================== */
:root {
  /* --- Палитра (4 канона + производные золота, как в studio-landing) --- */
  --white:      #ffffff;
  --graphite:   #101a25;
  --black:      #000000;
  --gold:       #eec95c;   /* золото-ЗАЛИВКА (кнопки, плашки; на графите - текст) */
  --gold-deep:  #c9a830;   /* золото-ТЕКСТ на светлом (читаемое) */
  --gold-hover: #e2bd4f;   /* золото чуть темнее - ховер главной кнопки */

  /* --- Роли --- */
  --bg:            var(--white);
  --surface-dark:  var(--graphite);
  --tint:          #f7f5f1;
  --ink:           var(--graphite);
  --ink-muted:     rgba(16,26,37,.6);
  --hairline:      rgba(16,26,37,.12);
  --hairline-str:  rgba(16,26,37,.28);
  --on-dark:       #ffffff;
  --on-dark-muted: rgba(255,255,255,.72);
  --on-dark-line:  rgba(255,255,255,.16);
  --error:         #C0392B;

  /* --- Шрифты --- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Spectral', Georgia, 'Times New Roman', serif;

  /* --- Типо-шкала --- */
  --fs-display: clamp(34px, 4.6vw, 50px);
  --fs-h1:      clamp(30px, 5vw, 42px);
  --fs-h2:      clamp(27px, 4.6vw, 36px);
  --fs-h3:      22px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-xs:      13px;
  --lh-head:    1.12;
  --lh-body:    1.6;
  --track-caps: .18em;

  /* --- Отступы (шаг 4px) --- */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px;
  --s-32:32px; --s-40:40px; --s-48:48px; --s-64:64px; --s-80:80px; --s-96:96px;

  /* --- Геометрия --- */
  --r-pill:  9999px;
  --r-card:  12px;
  --r-field: 8px;
  --r-img:   14px;
  --gold-border: 3px;
  --shadow:      0 4px 16px rgba(16,26,37,.08);
  --shadow-lift: 0 8px 28px rgba(16,26,37,.12);
  --tap: 44px;

  /* --- Раскладка --- */
  --page-x: 20px;
  --maxw:   1160px;
  --sec-y:  clamp(56px, 9vw, 104px);

  /* --- Движение --- */
  --dur:  200ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (min-width: 1024px) {
  :root { --page-x: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto !important; }
}