/* ───────────────────────────────────────────────────────────────
   Богатая практика — Design Tokens
   Color, type, spacing, radii, shadows.
   Source: Figma file "Богатая практика.fig" + project327684 (Tilda)
   ─────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap&subset=latin,cyrillic');

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── PRIMARY BRAND ─────────────────────────────────────────── */
  --bp-terracotta:      rgb(198, 77, 50);   /* Headings, accents */
  --bp-terracotta-deep: rgb(178, 52, 41);   /* Pressed / deeper variant */
  --bp-teal:            rgb(20, 121, 107);  /* Secondary accent */
  --bp-teal-soft:       rgb(54, 136, 126);  /* Lighter teal */
  --bp-orange:          rgb(235, 122, 56);  /* Pill / button orange */
  --bp-amber:           rgb(235, 164, 62);  /* Module warm */
  --bp-amber-light:     rgb(238, 170, 71);  /* Pale amber backgrounds */

  /* ── NEUTRALS / SAGE ──────────────────────────────────────── */
  --bp-sage:            rgb(215, 215, 198); /* Slide background */
  --bp-sage-mid:        rgb(217, 217, 217);
  --bp-sage-deep:       rgb(200, 201, 196);
  --bp-cream:           rgb(242, 240, 233); /* Web background */
  --bp-cream-warm:      rgb(251, 248, 241);
  --bp-cream-pale:      rgb(243, 240, 231);
  --bp-paper:           rgb(255, 255, 255);

  /* ── INK / TEXT ───────────────────────────────────────────── */
  --bp-ink:             rgb(27, 28, 22);    /* Strong text */
  --bp-ink-soft:        rgb(51, 51, 51);    /* Body */
  --bp-ink-2:           rgb(34, 34, 34);
  --bp-graphite:        rgb(67, 68, 62);
  --bp-graphite-2:      rgb(65, 66, 60);
  --bp-stone:           rgb(125, 126, 121);
  --bp-stone-light:     rgb(131, 132, 127);

  /* ── SEMANTIC ─────────────────────────────────────────────── */
  --bg-page:            var(--bp-cream);
  --bg-slide:           var(--bp-sage);
  --bg-card:            var(--bp-paper);
  --bg-accent-warm:     var(--bp-amber-light);
  --bg-accent-deep:     var(--bp-terracotta);

  --fg-1:               var(--bp-ink);
  --fg-2:               var(--bp-ink-soft);
  --fg-3:               var(--bp-stone);
  --fg-on-deep:         var(--bp-paper);

  --accent-primary:     var(--bp-terracotta);
  --accent-secondary:   var(--bp-teal);
  --accent-warm:        var(--bp-amber);
  --accent-cta:         var(--bp-terracotta);
  --accent-cta-hover:   var(--bp-amber);

  --border-soft:        rgba(27, 28, 22, 0.08);
  --border-paper:       rgb(255, 255, 255);

  /* ── SHADOWS ──────────────────────────────────────────────── */
  --shadow-card:        0 12px 32px -12px rgba(198, 77, 50, 0.18);
  --shadow-soft:        0 4px 16px rgba(65, 66, 60, 0.08);
  --shadow-deep:        0 24px 48px -16px rgba(27, 28, 22, 0.25);

  /* ── RADII ────────────────────────────────────────────────── */
  --r-xs:  8px;
  --r-sm:  16px;
  --r-md:  20px;
  --r-lg:  22px;   /* white pill cards */
  --r-xl:  40px;   /* signature large rounding (portraits, cards) */
  --r-pill: 999px;

  /* ── SPACING ──────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ── FONT FAMILIES ────────────────────────────────────────── */
  --ff-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ── TYPE SCALE (slide / hero) ────────────────────────────── */
  --fs-hero:    110px;  /* web hero, H1 */
  --fs-display: 82px;   /* slide title */
  --fs-h1:      64px;
  --fs-h2:      48px;
  --fs-h3:      36px;
  --fs-h4:      30px;
  --fs-h5:      24px;
  --fs-body:    20px;
  --fs-small:   16px;
  --fs-micro:   12px;

  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-normal:  1.35;
  --lh-loose:   1.55;
}

/* ── SEMANTIC ELEMENT STYLES ──────────────────────────────── */

html, body {
  background: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  color: var(--accent-primary);
  margin: 0;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--accent-primary);
  margin: 0;
}

h3, .h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.eyebrow {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

p, .body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-size: 24px;
  font-weight: 500;
  color: var(--fg-1);
}

.caption {
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

a { color: var(--accent-primary); text-decoration: none; }
a:hover { color: var(--accent-warm); }

/* ── REUSABLE PRIMITIVES ──────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-body);
  padding: 18px 32px;
  border-radius: var(--r-md);
  background: var(--accent-cta);
  color: var(--fg-on-deep);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn:hover { background: var(--accent-cta-hover); color: var(--fg-on-deep); }
.btn--ghost { background: transparent; color: var(--accent-primary); border: 2px solid var(--accent-primary); }
.btn--ghost:hover { background: var(--accent-primary); color: var(--fg-on-deep); }
.btn--teal { background: var(--accent-secondary); }
.btn--teal:hover { background: var(--bp-teal-soft); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bp-paper);
  color: var(--accent-warm);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 20px;
  padding: 14px 28px;
  border-radius: var(--r-lg);
  text-align: center;
}
.pill--teal  { background: var(--accent-secondary); color: var(--fg-on-deep); }
.pill--terra { background: var(--accent-primary);   color: var(--fg-on-deep); }
.pill--amber { background: var(--accent-warm);      color: var(--fg-on-deep); }

.card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  box-shadow: var(--shadow-card);
}
.card--bordered {
  background: transparent;
  border: 4px solid var(--bp-paper);
  border-radius: var(--r-xl);
  padding: var(--s-6);
}
.card--terra {
  background: var(--accent-primary);
  color: var(--fg-on-deep);
  border-radius: var(--r-xl);
  padding: var(--s-7);
}