/* ============================================================
   Ипотека.Центр Design System — colors & type
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Basis Grotesque Pro — наборный (тексты, UI). woff2 первым (компактнее, поддержка
   во всех современных браузерах включая Яндекс), ttf как fallback. */
@font-face { font-family: 'Basis Grotesque Pro'; src: url('../fonts/BasisGrotesquePro-Regular.woff2') format('woff2'), url('../fonts/BasisGrotesquePro-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Basis Grotesque Pro'; src: url('../fonts/BasisGrotesquePro-Medium.woff2') format('woff2'), url('../fonts/BasisGrotesquePro-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Basis Grotesque Pro'; src: url('../fonts/BasisGrotesquePro-Bold.woff2') format('woff2'), url('../fonts/BasisGrotesquePro-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---- Brand colors (фактические из логотипа) ---- */
  --ic-purple: #6139E0;            /* primary accent — фиолетовый из знака ИЦ */
  --ic-purple-600: #5028C9;        /* hover */
  --ic-purple-700: #3F1FA8;        /* press */
  --ic-purple-100: #E8E0FE;        /* tint bg */
  --ic-purple-50: #F4F0FF;
  --ic-navy: #092852;              /* основной brand-navy из вордмарка */
  --ic-navy-2: #0E3268;
  --ic-navy-deep: #061B3A;         /* для dark surfaces / hero */

  /* ---- Surfaces (light) ---- */
  --ic-bg: #FFFFFF;
  --ic-bg-alt: #EEEFF4;            /* cream — секции-разделители */
  --ic-bg-tinted: #F5F7FB;
  --ic-surface: #FFFFFF;
  --ic-surface-elev: #FFFFFF;

  /* ---- Surfaces (dark) — навигированы под navy из логотипа ---- */
  --ic-dark: #061B3A;              /* hero / dark mode (navy-deep) */
  --ic-dark-2: #092852;
  --ic-dark-3: #143A6E;

  /* ---- Foreground ---- */
  --ic-fg: #092852;                /* brand navy для всего основного текста */
  --ic-fg-muted: #5A6577;
  --ic-fg-soft: #8A95A8;
  --ic-fg-on-dark: #EEEFF4;
  --ic-fg-on-dark-muted: #9AA4B8;

  /* ---- Border ---- */
  --ic-border: #D7DCE6;
  --ic-border-strong: #B9C2D2;
  --ic-border-on-dark: rgba(255, 255, 255, 0.08);
  --ic-border-on-dark-strong: rgba(255, 255, 255, 0.16);

  /* ---- Brand accent (secondary) ---- */
  --ic-lime: #A9F651;       /* акцентный лайм */
  --ic-cyan: #15A3F2;       /* акцентный голубой */
  --ic-navy: #092852;       /* фирменный синий — alias for --ic-dark */

  /* ---- Semantic ---- */
  --ic-success: #1F8A5B;
  --ic-success-bg: #E8F4EE;
  --ic-warning: #C98A14;
  --ic-warning-bg: #FBF2DE;
  --ic-danger: #D14D3F;
  --ic-danger-bg: #FBEAE7;
  --ic-info: #2A6FDB;
  --ic-info-bg: #E8F0FB;

  /* ---- Bank-brand neutrals (для карточек банков) ---- */
  --ic-sber: #21A038;
  --ic-vtb: #0A2973;
  --ic-alfa: #EF3124;
  --ic-tinkoff: #FFDD2D;
  --ic-domrf: #00204D;
  --ic-gazprom: #0079C2;

  /* ---- Type ---- */
  --ic-font-display: 'Onest', 'Basis Grotesque Pro', system-ui, sans-serif;
  --ic-font-body: 'Basis Grotesque Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ic-font-system: Verdana, system-ui, sans-serif;  /* для Word/PPT/email */
  --ic-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Текучая типографика: и заголовки, и тело масштабируются под viewport.
     Принципиально важно: либо clamp всю шкалу, либо ничего — иначе при широком
     экране большие display-токены «улетают», а body/UI остаются мелкими, и
     получается визуальная диспропорция. */
  --ic-fs-display-1: clamp(48px, 5vw,    88px);
  --ic-fs-display-2: clamp(36px, 4vw,    64px);
  --ic-fs-h1:        clamp(32px, 3vw,    48px);
  --ic-fs-h2:        clamp(26px, 2.4vw,  36px);
  --ic-fs-h3:        clamp(20px, 1.6vw,  24px);
  --ic-fs-h4:        clamp(18px, 1.2vw,  22px);
  /* На широких экранах кап body/UI-токенов поднят, чтобы UI-текст
     (composer, suggest-карточки, банки, trust) не выглядел мелким на фоне
     крупного hero-заголовка. */
  --ic-fs-body-lg:   clamp(17px, 1.3vw + 10px, 26px);
  --ic-fs-body:      clamp(15px, 1.1vw + 8px,  22px);
  --ic-fs-body-sm:   clamp(13px, 1vw + 7px,    18px);
  --ic-fs-caption:   clamp(12px, 0.9vw + 6px,  16px);
  --ic-fs-micro:     clamp(11px, 0.7vw + 5px,  14px);

  --ic-lh-display: 1.05;
  --ic-lh-heading: 1.15;
  --ic-lh-body: 1.45;

  --ic-fw-regular: 400;
  --ic-fw-medium: 500;
  --ic-fw-semibold: 600;
  --ic-fw-bold: 700;
  --ic-fw-black: 800;

  --ic-tracking-display: -0.02em;
  --ic-tracking-heading: -0.01em;
  --ic-tracking-body: 0;
  --ic-tracking-caps: 0.04em;

  /* ---- Spacing scale (4px base) ---- */
  --ic-space-1: 4px;
  --ic-space-2: 8px;
  --ic-space-3: 12px;
  --ic-space-4: 16px;
  --ic-space-5: 24px;
  --ic-space-6: 32px;
  --ic-space-7: 48px;
  --ic-space-8: 64px;
  --ic-space-9: 96px;
  --ic-space-10: 128px;
  --ic-space-11: 160px;

  /* ---- Radius ---- */
  --ic-r-sm: 8px;
  --ic-r-md: 12px;
  --ic-r-lg: 20px;
  --ic-r-xl: 28px;
  --ic-r-2xl: 36px;
  --ic-r-pill: 999px;

  /* ---- Shadows ---- */
  --ic-shadow-1: 0 1px 2px rgba(9, 40, 82, 0.04);
  --ic-shadow-2: 0 1px 2px rgba(9, 40, 82, 0.04), 0 8px 24px -6px rgba(9, 40, 82, 0.08);
  --ic-shadow-3: 0 2px 4px rgba(9, 40, 82, 0.04), 0 24px 48px -12px rgba(9, 40, 82, 0.12);
  --ic-shadow-purple: 0 8px 24px -6px rgba(97, 57, 224, 0.32);

  /* ---- Layout ---- */
  --ic-container: 1280px;
  --ic-gutter: 24px;

  /* ---- Motion ---- */
  --ic-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ic-dur-fast: 120ms;
  --ic-dur: 200ms;
  --ic-dur-slow: 320ms;
}

/* ============================================================
   Semantic element styles — reach for these instead of raw vars
   ============================================================ */

.ic-h1, h1.ic, [data-ic="h1"] {
  font-family: var(--ic-font-display);
  font-size: var(--ic-fs-h1);
  line-height: var(--ic-lh-heading);
  font-weight: var(--ic-fw-bold);
  letter-spacing: var(--ic-tracking-heading);
  color: var(--ic-fg);
  text-wrap: balance;
}

.ic-h2 { font: var(--ic-fw-bold) var(--ic-fs-h2)/var(--ic-lh-heading) var(--ic-font-display); letter-spacing: var(--ic-tracking-heading); color: var(--ic-fg); }
.ic-h3 { font: var(--ic-fw-semibold) var(--ic-fs-h3)/var(--ic-lh-heading) var(--ic-font-display); color: var(--ic-fg); }
.ic-h4 { font: var(--ic-fw-semibold) var(--ic-fs-h4)/var(--ic-lh-heading) var(--ic-font-display); color: var(--ic-fg); }

.ic-display-1 {
  font: var(--ic-fw-bold) var(--ic-fs-display-1)/var(--ic-lh-display) var(--ic-font-display);
  letter-spacing: var(--ic-tracking-display);
  color: var(--ic-fg);
  text-wrap: balance;
}
.ic-display-2 {
  font: var(--ic-fw-bold) var(--ic-fs-display-2)/var(--ic-lh-display) var(--ic-font-display);
  letter-spacing: var(--ic-tracking-display);
  color: var(--ic-fg);
}

.ic-body { font: var(--ic-fw-regular) var(--ic-fs-body)/var(--ic-lh-body) var(--ic-font-body); color: var(--ic-fg); }
.ic-body-lg { font: var(--ic-fw-regular) var(--ic-fs-body-lg)/var(--ic-lh-body) var(--ic-font-body); color: var(--ic-fg); }
.ic-body-sm { font: var(--ic-fw-regular) var(--ic-fs-body-sm)/var(--ic-lh-body) var(--ic-font-body); color: var(--ic-fg-muted); }
.ic-caption { font: var(--ic-fw-medium) var(--ic-fs-caption)/1.4 var(--ic-font-body); color: var(--ic-fg-muted); letter-spacing: var(--ic-tracking-caps); text-transform: uppercase; }

.ic-mono { font-family: var(--ic-font-mono); font-feature-settings: "tnum"; }
.ic-num  { font-feature-settings: "tnum", "ss01"; font-variant-numeric: tabular-nums; }

/* ============================================================
   Buttons (используются в UI kits)
   ============================================================ */

.ic-btn {
  --bg: var(--ic-purple);
  --fg: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ic-space-2);
  padding: 14px 22px;
  border-radius: var(--ic-r-pill);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid transparent;
  font: var(--ic-fw-semibold) var(--ic-fs-body)/1 var(--ic-font-display);
  letter-spacing: var(--ic-tracking-heading);
  cursor: pointer;
  transition: background var(--ic-dur) var(--ic-ease), transform var(--ic-dur-fast) var(--ic-ease), box-shadow var(--ic-dur) var(--ic-ease);
  user-select: none;
}
.ic-btn:hover { --bg: var(--ic-purple-600); }
.ic-btn:active { transform: scale(0.98); --bg: var(--ic-purple-700); }
.ic-btn--ghost { --bg: transparent; --fg: var(--ic-fg); border-color: var(--ic-border-strong); }
.ic-btn--ghost:hover { --bg: var(--ic-bg-alt); }
.ic-btn--dark { --bg: var(--ic-dark); --fg: #fff; }
.ic-btn--dark:hover { --bg: var(--ic-dark-2); }
.ic-btn--sm { padding: 10px 16px; font-size: var(--ic-fs-body-sm); }
.ic-btn--lg { padding: 18px 28px; font-size: var(--ic-fs-body-lg); }