/* Общие токены лендинга и демо. Меняются только здесь. */
:root {
  --font: "Onest", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  /* светлая поверхность */
  --bg: #fbfbfd;
  --bg-alt: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;          /* 16.8:1 на --bg */
  --text-2: #6e6e73;        /* 4.9:1 на --bg */
  --text-note: #58585d;     /* 6.5:1 на --bg-alt: подписи и описания внутри карточек */
  --text-3: #86868b;        /* только крупный текст и подписи от 17px */
  --hairline: rgba(0, 0, 0, .08);
  --fill: rgba(0, 0, 0, .04);

  /* акцент и сигналы */
  --accent: #0071e3;        /* белый текст на нём 4.7:1 */
  --accent-hover: #0077ed;
  --link: #0066cc;          /* 5.6:1 на --bg */
  --up: #1a7f37;            /* рост, норма */
  --up-bg: rgba(26, 127, 55, .10);
  --down: #d70015;          /* падение, потери */
  --down-bg: rgba(215, 0, 21, .08);
  --warn: #b25000;
  --warn-bg: rgba(255, 149, 0, .14);

  /* тёмные сцены лендинга (класс .scene-dark) */
  --dark-bg: #000000;
  --dark-surface: #1d1d1f;
  --dark-text: #f5f5f7;
  --dark-text-2: #a1a1a6;
  --dark-hairline: rgba(255, 255, 255, .12);

  /* чат Telegram */
  --bubble-out: #0071e3;
  --bubble-out-text: #ffffff;
  --bubble-in: #e9e9eb;
  --bubble-in-text: #1d1d1f;

  /* форма */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 980px;
  --shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .08);
  --glass: rgba(251, 251, 253, .72);
  --blur: saturate(180%) blur(20px);

  /* типографика: размер / межстрочный / трекинг */
  --t-hero: clamp(44px, 7vw, 80px);
  --t-h2: clamp(34px, 5vw, 56px);
  --t-h3: clamp(24px, 2.6vw, 32px);
  --t-lead: clamp(19px, 1.8vw, 24px);
  --t-body: 17px;
  --t-small: 14px;
  --track-display: -0.022em;

  /* ритм */
  --gutter: 22px;
  --wrap: 980px;
  --wrap-wide: 1200px;
  --section-y: clamp(80px, 11vw, 140px);

  --ease: cubic-bezier(.28, .11, .32, 1);
  --dur: .6s;
}

/* Демо поддерживает тёмную тему системы, лендинг светлый с тёмными сценами */
@media (prefers-color-scheme: dark) {
  .app {
    --bg: #000000;
    --bg-alt: #1c1c1e;
    --surface: #1c1c1e;
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #8e8e93;
    --hairline: rgba(255, 255, 255, .12);
    --fill: rgba(255, 255, 255, .06);
    --accent: #0a84ff;
    --link: #2997ff;
    --up: #30d158;
    --up-bg: rgba(48, 209, 88, .14);
    --down: #ff453a;
    --down-bg: rgba(255, 69, 58, .14);
    --warn: #ff9f0a;
    --warn-bg: rgba(255, 159, 10, .16);
    --glass: rgba(28, 28, 30, .72);
    --shadow: 0 1px 0 rgba(255, 255, 255, .04);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}