/* ============================================================
   БАЗА — Design Tokens
   Colors, typography, spacing, radii, shadows, motion
   ============================================================ */

/* ----- Fonts (Google Fonts — both have full Cyrillic) ----- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ COLORS ============ */

  /* Kiwi / Lime — primary accent (the client reference) */
  --kiwi-50:  #F4FBDB;
  --kiwi-100: #E8F7B0;
  --kiwi-200: #DCF285;
  --kiwi-300: #D2EE60;
  --kiwi-400: #C8E84A;   /* primary brand lime */
  --kiwi-500: #B5D52E;
  --kiwi-600: #94B11A;
  --kiwi-700: #6F870F;
  --kiwi-800: #4A5C0A;
  --kiwi-900: #2A3408;

  /* Olive / Ink — depth and body */
  --ink-900: #0E0F0A;     /* primary text */
  --ink-800: #1A1C12;     /* dark surfaces */
  --ink-700: #2A2D1E;
  --ink-600: #3D412C;
  --ink-500: #5A5F45;
  --ink-400: #7A7F62;     /* muted text */
  --ink-300: #A3A88A;
  --ink-200: #C9CCB5;
  --ink-100: #E6E7DA;
  --ink-50:  #F2F3EA;

  /* Paper — backgrounds */
  --paper:    #FFFFFF;
  --bone:     #F7F5EE;    /* warm off-white, primary bg */
  --bone-2:   #EFEDE3;    /* slightly deeper for layering */
  --line:     #E5E3D8;    /* hairline borders */
  --line-2:   #D8D6C8;

  /* Semantic */
  --positive: #6F870F;    /* growth, ROI, profit (olive-green) */
  --warn:     #D97706;    /* warnings, attention */
  --danger:   #B91C1C;    /* errors */
  --info:     #2B5BB8;    /* neutral info (used sparingly) */

  /* Semantic surfaces */
  --bg:           var(--bone);
  --bg-elevated:  var(--paper);
  --bg-inverse:   var(--ink-900);
  --bg-accent:    var(--kiwi-400);
  --bg-accent-soft: var(--kiwi-100);

  /* Semantic text */
  --fg:           var(--ink-900);
  --fg-2:         var(--ink-600);   /* secondary */
  --fg-3:         var(--ink-400);   /* tertiary / muted */
  --fg-inverse:   var(--bone);
  --fg-on-accent: var(--ink-900);   /* lime is light, dark text reads best on it */

  /* ============ TYPOGRAPHY ============ */
  --font-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale — display (Bricolage, tight) */
  --t-hero:    clamp(56px, 8vw, 120px);   /* "ВКРАДИ" energy — page hero */
  --t-display: clamp(40px, 5vw, 72px);    /* large section openers */
  --t-h1:      clamp(36px, 4vw, 56px);
  --t-h2:      clamp(28px, 3vw, 40px);
  --t-h3:      clamp(22px, 2.2vw, 28px);
  --t-h4:      20px;
  --t-h5:      17px;

  /* Body */
  --t-lead:    20px;     /* opening paragraphs */
  --t-body:    16px;     /* default */
  --t-small:   14px;
  --t-micro:   12px;     /* labels, captions */

  /* Numeric — for calculator outputs */
  --t-num-xl:  clamp(48px, 6vw, 80px);
  --t-num-lg:  36px;
  --t-num-md:  24px;

  /* Line height */
  --lh-tight:  0.95;
  --lh-snug:   1.1;
  --lh-base:   1.5;
  --lh-loose:  1.65;

  /* Letter spacing */
  --ls-tight:   -0.03em;     /* big display */
  --ls-snug:    -0.015em;    /* headings */
  --ls-normal:  0;
  --ls-wide:    0.04em;      /* eyebrow labels */
  --ls-wider:   0.12em;      /* all-caps micro labels */

  /* ============ SPACING (8pt base) ============ */
  --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:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 120px;
  --s-13: 160px;

  /* ============ RADII ============ */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-pill: 999px;

  /* ============ BORDERS ============ */
  --border-hair: 1px solid var(--line);
  --border-soft: 1px solid var(--line-2);
  --border-ink:  1px solid var(--ink-900);

  /* ============ SHADOWS ============ */
  /* Soft, subtle — the design uses borders + flat color more than shadows */
  --shadow-sm:  0 1px 2px rgba(20, 24, 8, 0.04);
  --shadow-md:  0 4px 16px rgba(20, 24, 8, 0.06), 0 1px 2px rgba(20, 24, 8, 0.04);
  --shadow-lg:  0 16px 48px rgba(20, 24, 8, 0.10), 0 4px 12px rgba(20, 24, 8, 0.04);
  --shadow-lime: 0 8px 32px rgba(149, 178, 26, 0.25);
  --shadow-press: inset 0 2px 4px rgba(20, 24, 8, 0.08);

  /* ============ MOTION ============ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  400ms;
  --dur-page:  600ms;

  /* ============ LAYOUT ============ */
  --container:  1240px;
  --container-wide: 1440px;
  --gutter:     clamp(20px, 4vw, 48px);
}

/* ============================================================
   SEMANTIC RESETS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TYPE PRIMITIVES (semantic tags)
   ============================================================ */
.t-hero, .hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: 1.3;
  margin: 0;
}

h5, .t-h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h5);
  line-height: 1.3;
  margin: 0;
}

p, .t-body {
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.t-lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}

.t-small { font-size: var(--t-small); line-height: 1.5; }
.t-micro { font-size: var(--t-micro); line-height: 1.4; }

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--fg-3);
}

.t-num {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

.t-num-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--t-num-xl); line-height: 1; letter-spacing: var(--ls-tight); font-feature-settings: 'tnum' 1; }
.t-num-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--t-num-lg); line-height: 1; font-feature-settings: 'tnum' 1; }
.t-num-md { font-family: var(--font-display); font-weight: 600; font-size: var(--t-num-md); line-height: 1.1; font-feature-settings: 'tnum' 1; }

/* Color helpers */
.fg          { color: var(--fg); }
.fg-2        { color: var(--fg-2); }
.fg-3        { color: var(--fg-3); }
.fg-kiwi     { color: var(--kiwi-600); }
.fg-on-accent { color: var(--fg-on-accent); }
.bg-bone     { background: var(--bone); }
.bg-paper    { background: var(--paper); }
.bg-kiwi     { background: var(--kiwi-400); }
.bg-ink      { background: var(--ink-900); color: var(--fg-inverse); }

/* Highlight — the "ВКРАДИ" effect: lime block behind text */
.t-highlight {
  background: var(--kiwi-400);
  padding: 0.05em 0.25em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}