:root {
  /* Цвет — фон и поверхности (тёмная тема по умолчанию) */
  --color-bg: #0A1F19;
  --color-bg-muted: #0E2921;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-solid: #FAFAF8;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.22);

  /* Цвет — текст на тёмном фоне страницы */
  --color-ink: #F3F6F1;
  --color-ink-secondary: rgba(243, 246, 241, 0.72);
  --color-ink-muted: rgba(243, 246, 241, 0.52);
  --color-on-dark: #F3F6F1;

  /* Цвет — текст на светлых непрозрачных поверхностях (модалка, поля форм) */
  --color-ink-on-surface: #12161C;
  --color-ink-on-surface-secondary: #545B54;
  --color-ink-on-surface-muted: #6B7268;
  --color-bg-muted-on-surface: #F1F4EB;
  --color-border-on-surface: #E3E7DC;
  --color-border-on-surface-strong: #CBD3BE;

  /* Бренд */
  --color-secondary: #015BAF;
  --color-secondary-dark: #013E78;
  --color-secondary-tint: #E5EFF9;
  --color-accent: #4FA3E8;

  /* Семантика */
  --color-success: #2F9E44;
  --color-error: #D92D20;
  --color-focus-ring: #4FA3E8;

  /* Градиент — фирменный "Jade Horizon", как в hero, переиспользуется в каждом блоке */
  --gradient-hero: linear-gradient(180deg, #14453A 0%, #1B5C4C 20%, #257E68 46%, #4CA085 66%, #86B8D6 100%);
  /* Тот же "Jade Horizon", но по диагонали — дефолтный градиент тёмных блоков (кроме hero) */
  --gradient-industries: linear-gradient(115deg, #14453A 0%, #1B5C4C 20%, #257E68 44%, #4CA085 70%, #86B8D6 100%);
  /* Тот же "Jade Horizon" для градиентного текста (background-clip: text) на светлом фоне */
  --gradient-brand-text: linear-gradient(90deg, #1B5C4C 0%, #257E68 33%, #4CA085 67%, #86B8D6 100%);
  --pattern-grid-v: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  --pattern-grid-h: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

  /* Нежный светлый градиент для блока "Скрепка в цифрах" + "Банки-партнёры" */
  --gradient-light: linear-gradient(135deg, #FFFFFF 0%, #FBFDFF 55%, #F7FBFE 100%);
  /* Средний тон градиента hero (стоп 46%) — акцент для крупных цифр статистики */
  --color-gradient-mid: #257E68;

  /* Типографика */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-text: 'Manrope', system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
  --fs-2xl: clamp(1.625rem, 1.45rem + 0.85vw, 2.125rem);
  --fs-3xl: clamp(2rem, 1.7rem + 1.4vw, 2.75rem);
  --fs-4xl: clamp(2.5rem, 2rem + 2.4vw, 3.75rem);

  --lh-heading: 1.14;
  --lh-body: 1.6;
  --ls-caps: 0.06em;

  /* Отступы — шкала 8pt (+ 4px для тонкой настройки) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-4-5: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* Радиусы */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 999px;

  /* Тени */
  --shadow-sm: 0 1px 2px rgba(18, 22, 28, 0.05), 0 1px 1px rgba(18, 22, 28, 0.03);
  --shadow-md: 0 12px 28px -12px rgba(18, 22, 28, 0.16);
  --shadow-lg: 0 32px 64px -20px rgba(18, 22, 28, 0.22);
  --shadow-focus: 0 0 0 3px rgba(1, 91, 175, 0.35);

  /* Движение */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;

  /* Контейнер */
  --container-max: 1360px;
  --container-padding: clamp(0.5rem, 1.25vw, 1.25rem);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}