/* ========================================================================
   Iceberg Split — Design Tokens · V1
   Источник правды для цветов, типографики, теней, отступов и радиусов.
   Все компоненты используют ТОЛЬКО эти переменные.
   ======================================================================== */

:root {
  /* ─── Brand · Ledge Blue ─────────────────────────────────────────────── */
  --color-brand-50:  #F4F8FE;
  --color-brand-100: #E6EEFB;
  --color-brand-200: #C4D5F4;
  --color-brand-300: #9BB6EB;
  --color-brand-400: #6E96DF;
  --color-brand-500: #477AD3;  /* primary · from logo */
  --color-brand-600: #3463BD;
  --color-brand-700: #2A4F9C;
  --color-brand-800: #213E7B;
  --color-brand-900: #19305F;

  /* ─── Navy · Dark surfaces ───────────────────────────────────────────── */
  --color-navy-700: #232F4D;
  --color-navy-800: #18233F;
  --color-navy-900: #0F1A33;

  /* ─── Neutrals · Slate ───────────────────────────────────────────────── */
  --color-white:     #FFFFFF;
  --color-slate-50:  #F8FAFC;
  --color-slate-100: #F1F4F8;
  --color-slate-200: #E2E7EE;
  --color-slate-300: #C9D1DE;
  --color-slate-400: #94A0B5;
  --color-slate-500: #647389;
  --color-slate-600: #455168;
  --color-slate-700: #2E3A50;
  --color-slate-800: #1C2638;
  --color-slate-900: #0F1A33;

  /* ─── Semantic ───────────────────────────────────────────────────────── */
  --color-success: #0FB97A;
  --color-warning: #E0A82E;
  --color-error:   #DC4646;

  /* ─── Surfaces ───────────────────────────────────────────────────────── */
  --surface-app:     var(--color-white);
  --surface-soft:    var(--color-slate-50);
  --surface-card:    var(--color-white);
  --surface-dark:    var(--color-navy-900);
  --surface-brand:   var(--color-brand-500);

  /* ─── Text ───────────────────────────────────────────────────────────── */
  --text-primary:    var(--color-navy-900);
  --text-secondary:  var(--color-slate-600);
  --text-muted:      var(--color-slate-500);
  --text-on-dark:    var(--color-white);
  --text-on-brand:   var(--color-white);

  /* ─── Borders ────────────────────────────────────────────────────────── */
  --border-soft:    var(--color-slate-200);
  --border-default: var(--color-slate-300);
  --border-strong:  var(--color-slate-400);
  --border-on-dark: rgba(255, 255, 255, 0.10);

  /* ─── Typography · Families ──────────────────────────────────────────── */
  --font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Allison', 'Caveat', 'Brush Script MT', cursive;

  /* ─── Typography · Letter spacing ────────────────────────────────────── */
  --ls-display: -0.5px;   /* Согласовано с правилом бренда */
  --ls-heading: -0.3px;
  --ls-body:     0px;
  --ls-eyebrow:  1.5px;   /* для small-caps надписей */

  /* ─── Typography · Scale ─────────────────────────────────────────────── */
  --fs-eyebrow:    12px;
  --fs-caption:    13px;
  --fs-body-sm:    14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-h5:         20px;
  --fs-h4:         24px;
  --fs-h3:         32px;
  --fs-h2:         44px;
  --fs-h1:         56px;
  --fs-display:    72px;

  /* ─── Typography · Weight ────────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* ─── Typography · Line height ───────────────────────────────────────── */
  --lh-tight:    1.05;
  --lh-snug:     1.20;
  --lh-normal:   1.50;
  --lh-relaxed:  1.70;

  /* ─── Spacing · 4-pt grid ────────────────────────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ─── Radii ──────────────────────────────────────────────────────────── */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* ─── Shadows · Soft, blur-heavy, 8% navy on white ───────────────────── */
  --shadow-soft-xs: 0 1px  2px  rgba(15, 26, 51, 0.04);
  --shadow-soft-sm: 0 4px  16px rgba(15, 26, 51, 0.06);
  --shadow-soft-md: 0 16px 40px rgba(15, 26, 51, 0.08);
  --shadow-soft-lg: 0 32px 72px rgba(15, 26, 51, 0.08);
  --shadow-soft-xl: 0 48px 120px rgba(15, 26, 51, 0.08);
  --shadow-brand-glow: 0 32px 64px rgba(71, 122, 211, 0.18);
  --shadow-focus-ring: 0 0 0 4px rgba(71, 122, 211, 0.18);

  /* ─── Container widths ───────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* ─── Motion ─────────────────────────────────────────────────────────── */
  --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: 250ms;
  --duration-slow: 400ms;

  /* ─── Z-index ────────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   900;
}

/* ========================================================================
   Base reset
   ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-app);
  font-feature-settings: 'cv11', 'ss01';  /* Inter: чуть более «живые» цифры и a */
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; }

img, svg { display: block; }

/* ========================================================================
   Typography utilities
   ======================================================================== */

.t-display {
  font-size: var(--fs-display); font-weight: var(--fw-black);
  letter-spacing: var(--ls-display); line-height: var(--lh-tight);
}
.t-h1 {
  font-size: var(--fs-h1); font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display); line-height: var(--lh-tight);
}
.t-h2 {
  font-size: var(--fs-h2); font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-display); line-height: var(--lh-tight);
}
.t-h3 {
  font-size: var(--fs-h3); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading); line-height: var(--lh-snug);
}
.t-h4 {
  font-size: var(--fs-h4); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading); line-height: var(--lh-snug);
}
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-normal); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--text-muted); }
.t-eyebrow {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--color-brand-600);
}
.t-script {
  font-family: var(--font-script); font-weight: 400;
  letter-spacing: 0; line-height: 1;
}
.t-muted { color: var(--text-muted); }
.t-secondary { color: var(--text-secondary); }