/* ─────────────────────────────────────────────────────────────
   Igor Kosolapov — Design System
   Foundations: colors + type
   ───────────────────────────────────────────────────────────── */

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

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg:            #141414;   /* page background, "noir" */
  --surface-1:     #1E1E1E;   /* alt background, raised wells */
  --surface-2:     #292929;   /* default card */
  --surface-3:     #373737;   /* secondary card / promo neutral */
  --surface-inv:   #FFFFFF;   /* inverted block (rare) */
  --black:         #000000;   /* deep card / inside dark surface */

  /* ── Brand ────────────────────────────────────────────────── */
  --indigo:        #4947FF;   /* THE accent. CTAs, promo blocks, orbs */
  --indigo-hover:  #5D5BFF;
  --indigo-press:  #3735E6;
  --indigo-soft:   rgba(73, 71, 255, 0.16);

  /* Hero gradient orb: white → indigo */
  --grad-orb: linear-gradient(180deg, #FFFFFF 0%, #4947FF 100%);
  /* Imagery wash (over speaker photos, etc) */
  --grad-indigo-wash: linear-gradient(180deg, rgba(71,74,255,1) 0%, rgba(71,74,255,0.47) 100%);
  /* Bottom-fade protection over photos */
  --grad-protect: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);

  /* ── Text ─────────────────────────────────────────────────── */
  --fg:            #FFFFFF;   /* primary text */
  --fg-2:          #A2A2A2;   /* secondary text, body copy on dark cards */
  --fg-3:          #797979;   /* meta, captions, legal */
  --fg-4:          #595959;   /* lowest tier, "хелпер" muted */
  --fg-on-light:   #000000;   /* text on white pills/buttons */
  --fg-on-indigo:  #FFFFFF;

  /* ── Borders / dividers ───────────────────────────────────── */
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --border-input:  #2E2E2E;

  /* ── Radii ────────────────────────────────────────────────── */
  --r-chip:    9999px;   /* pills, tech badges, avatar */
  --r-pill:    67px;     /* CTA pills */
  --r-card:    20px;     /* default card / button */
  --r-card-lg: 24px;     /* feature card */
  --r-promo:   30px;     /* large promo block */
  --r-hero:    50px;     /* hero wrapper */
  --r-input:   20px;     /* form fields */

  /* ── Spacing scale (8-grid, 4 half-steps) ─────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 80px;
  --s-11: 120px;  /* page side gutter @1400 */
  --s-12: 160px;

  /* ── Shadows (used sparingly — flat by nature) ────────────── */
  --shadow-cta:    0 12px 32px rgba(73, 71, 255, 0.32);
  --shadow-card:   0 2px 0 rgba(0,0,0,0.4);
  --shadow-float:  0 24px 48px rgba(0,0,0,0.5);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --t-fast:    140ms;
  --t-base:    220ms;
  --t-slow:    400ms;

  /* ── Type stack ───────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --letter-tight: -0.01em;   /* used EVERYWHERE */
  --letter-flat:  -0.005em;
  --leading-display: 1.0;    /* lineHeight: 100% on display */
  --leading-tight:   1.1;
  --leading-body:    1.5;
}

/* ── Semantic type tokens ─────────────────────────────────────
   The Figma source uses tight 100% line-heights on display
   sizes and 1.5 on running body. Keep that contract.
   ───────────────────────────────────────────────────────────── */

.h1, h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 48px;
  line-height: var(--leading-display);
  letter-spacing: var(--letter-tight);
  color: var(--fg);
  text-wrap: balance;
}

.h2, h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: var(--leading-display);
  letter-spacing: var(--letter-tight);
  color: var(--fg);
  text-wrap: balance;
}

.h3, h3, .card-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: var(--leading-display);
  letter-spacing: var(--letter-tight);
  color: var(--fg);
}

.lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 32px;
  line-height: var(--leading-tight);
  letter-spacing: var(--letter-tight);
  color: var(--fg);
}

.body, p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: var(--leading-display);
  letter-spacing: var(--letter-tight);
  color: var(--fg);
}

.body-md {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: var(--leading-display);
  letter-spacing: var(--letter-tight);
  color: var(--fg);
}

.body-sm {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: var(--leading-body);
  letter-spacing: var(--letter-tight);
  color: var(--fg);
}

.caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: var(--leading-display);
  letter-spacing: var(--letter-tight);
  color: var(--fg-3);
}

.btn-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--letter-tight);
  text-transform: none;
}

/* uppercase variant used on big CTAs (e.g. "СМОТРЕТЬ БЕСПЛАТНО") */
.btn-label-loud {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: var(--letter-tight);
}

.muted    { color: var(--fg-2); }
.muted-2  { color: var(--fg-3); }
.muted-3  { color: var(--fg-4); }
.accent   { color: var(--indigo); }

/* ── Body reset for full pages ────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  letter-spacing: var(--letter-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}