/* ==========================================================================
   Умное тело — любимое дело · Design Tokens
   Visual language: sky-blue gradients + warm amber accents +
   handwritten Bad Script highlights on a white canvas.
   ========================================================================== */

/* ---- Fonts
   Open Sans: LOCAL brand-uploaded variable files in fonts/
   Montserrat / Bad Script / Inter: Google Fonts (no brand files uploaded yet) */
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/OpenSans-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"),
       url("fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: "Caveat";
  src: url("Caveat-VariableFont_wght.ttf") format("truetype-variations"),
       url("Caveat-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------ */
  /* COLOR — base palette                                                */
  /* ------------------------------------------------------------------ */

  /* Brand blue (primary — used for hero gradients, headings, links) */
  --blue-50:  rgb(245, 250, 254);
  --blue-100: rgb(238, 247, 255);
  --blue-150: rgb(232, 245, 255);
  --blue-200: rgb(212, 237, 255);
  --blue-250: rgb(207, 234, 255);
  --blue-300: rgb(188, 225, 255);
  --blue-400: rgb(107, 189, 255);
  --blue-500: rgb(42, 165, 255);   /* signature accent */
  --blue-600: rgb(12, 152, 255);
  --blue-700: rgb(0, 120, 220);

  /* Amber (CTA / highlight — the "hand-drawn" marker-style emphasis) */
  --amber-50:  rgb(255, 248, 212);
  --amber-100: rgb(255, 240, 156);
  --amber-200: rgb(255, 224, 152);
  --amber-300: rgb(252, 202, 81);
  --amber-400: rgb(253, 181, 12);  /* primary amber CTA */
  --amber-500: rgb(220, 155, 19);
  --amber-600: rgb(184, 105, 21);

  /* Warm browns / bronzes (module numerals, accents on earthy sections) */
  --bronze-100: rgb(239, 224, 132);
  --bronze-200: rgb(228, 197, 100);
  --bronze-300: rgb(219, 174, 74);
  --bronze-400: rgb(164, 108, 39);
  --bronze-500: rgb(165, 69, 28);
  --bronze-600: rgb(123, 42, 16);
  --bronze-700: rgb(79, 26, 14);

  /* Neutrals */
  --ink:     rgb(53, 61, 71);  /* body text */
  --ink-soft: rgb(139, 139, 139);
  --line:    rgb(193, 193, 193);
  --surface: rgb(255, 255, 255);
  --surface-tinted: rgb(250, 250, 250);
  --black: rgb(0, 0, 0);

  /* ------------------------------------------------------------------ */
  /* COLOR — semantic                                                    */
  /* ------------------------------------------------------------------ */
  --fg:          var(--ink);
  --fg-muted:    var(--ink-soft);
  --fg-inverse:  var(--surface);
  --fg-accent:   var(--blue-500);

  --bg:          var(--surface);
  --bg-soft:     var(--blue-50);
  --bg-tinted:   var(--blue-100);

  --brand:       var(--blue-500);
  --brand-deep:  var(--blue-600);
  --brand-soft:  var(--blue-300);

  --cta:         var(--amber-400);
  --cta-hover:   var(--amber-500);
  --cta-fg:      var(--surface);

  --border:      var(--line);
  --border-soft: var(--blue-200);

  /* ------------------------------------------------------------------ */
  /* GRADIENTS — the brand's signatures                                  */
  /* ------------------------------------------------------------------ */
  --grad-hero:    linear-gradient(rgb(107,189,255) 0%, rgb(42,165,255) 47%, rgb(12,152,255) 100%);
  --grad-sky:     linear-gradient(rgb(188,225,255) 0%, rgb(102,187,255) 100%);
  --grad-pale:    linear-gradient(rgb(245,250,254) 0%, rgb(207,234,255) 100%);
  --grad-paper:   linear-gradient(rgb(255,255,255) 0%, rgb(232,245,255) 100%);

  /* ------------------------------------------------------------------ */
  /* TYPOGRAPHY                                                          */
  /* ------------------------------------------------------------------ */
  --font-display: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-body:    "Open Sans", system-ui, -apple-system, sans-serif;
  --font-ui:      "Montserrat", system-ui, -apple-system, sans-serif;
  --font-script:  "Caveat", cursive;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — matches the Figma: 80 / 64 / 40 / 32 / 24 / 20 / 18 / 16 / 14 */
  --fs-hero:   80px;    /* page hero, rare */
  --fs-h1:     64px;
  --fs-h2:     40px;
  --fs-h3:     32px;
  --fs-h4:     24px;
  --fs-h5:     20px;
  --fs-lead:   18px;    /* intro paragraphs, feature labels */
  --fs-body:   16px;
  --fs-sm:     14px;    /* list items, secondary */
  --fs-xs:     12px;

  --lh-tight:  1.0;     /* big hero */
  --lh-snug:   1.2;
  --lh-normal: 1.3;     /* body copy — the Figma standard */
  --lh-relaxed: 1.4;    /* long reads */

  /* ------------------------------------------------------------------ */
  /* SHAPE                                                                */
  /* ------------------------------------------------------------------ */
  --radius-sm:   8px;    /* buttons, small chips, inline boxes */
  --radius-md:   11px;   /* small cards */
  --radius-lg:   16px;   /* standard card */
  --radius-xl:   20px;   /* marker-style pill (around hand-drawn text) */
  --radius-full: 9999px;

  /* ------------------------------------------------------------------ */
  /* ELEVATION                                                            */
  /* ------------------------------------------------------------------ */
  --shadow-glow:  0 4px 38px 0 rgb(255 255 255 / 0.9);   /* white halo on hero */
  --shadow-card:  0 2px 8px 0 rgb(42 165 255 / 0.08), 0 12px 32px -12px rgb(12 152 255 / 0.16);
  --shadow-lift:  0 8px 24px -8px rgb(12 152 255 / 0.25);

  /* ------------------------------------------------------------------ */
  /* SPACING (8pt)                                                        */
  /* ------------------------------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Standard card padding */
  --card-padding: 36px;
}

/* ============================================================== */
/* SEMANTIC TYPE RULES                                             */
/* ============================================================== */

html { color: var(--fg); background: var(--bg); }
body { font-family: var(--font-display); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-inverse);
  opacity: 0.9;
}
p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0 0 1em 0;
}
.body-sm { font-size: var(--fs-sm); }
.lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
}
.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
  font-size: 1.2em;
}
.muted { color: var(--fg-muted); }
em, .italic { font-family: var(--font-body); font-style: italic; }

/* ============================================================== */
/* BRAND HELPERS                                                    */
/* ============================================================== */

/* "Marker pill" — the amber hand-drawn pill wrapping script text */
.marker-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--radius-xl);
  background: var(--cta);
  color: var(--cta-fg);
  font-family: var(--font-script);
  font-size: var(--fs-h4);
  line-height: 1;
  transform: rotate(-3deg);
}

/* Standard card */
.card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  box-shadow: var(--shadow-card);
}

/* Gradient blue hero card */
.card-hero {
  border-radius: var(--radius-lg);
  background: var(--grad-hero);
  color: var(--fg-inverse);
  padding: var(--card-padding);
}

/* Amber feature card */
.card-amber {
  border-radius: var(--radius-lg);
  background: var(--cta);
  color: var(--fg-inverse);
  padding: var(--card-padding);
}

/* Pale blue card (quote, info, secondary) */
.card-pale {
  border-radius: var(--radius-lg);
  background: var(--grad-pale);
  color: var(--fg);
  padding: var(--card-padding);
}