/* ──────────────────────────────────────────────────────────────────
   Luvva Design System — colors & typography
   Source of truth: Luvva.fig (pages: design system + 11 marketing screens)
   ────────────────────────────────────────────────────────────────── */

/* Outfit + Inter — loaded from Google Fonts as working substitutes
   (figma uses Outfit Black/ExtraBold and Inter Regular/Medium/Bold/Italic).
   If the brand has licensed font files, drop them into ./fonts/ and override. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ─── Brand colors (from /page/03-Color-Palette) ─────────────── */
  --luvva-cobalt:      #001178;   /* Primary / Accent — Cobalt Blue */
  --luvva-near-black:  #121214;   /* Text / Details — Near Black */
  --luvva-off-white:   #FBFBFB;   /* Page background */
  --luvva-white:       #FFFFFF;   /* Cards, on-cobalt text */

  /* Cobalt scale — used for the gradient panel on screen 6 */
  --luvva-cobalt-100:  #001178;
  --luvva-cobalt-90:   #00127E;
  --luvva-cobalt-80:   #001283;
  --luvva-cobalt-70:   #001389;
  --luvva-cobalt-60:   #00138F;
  --luvva-cobalt-50:   #001494;
  --luvva-cobalt-40:   #00149A;
  --luvva-cobalt-30:   #0015A0;
  --luvva-cobalt-20:   #1447E6;   /* lighter accent (rarely used) */

  /* Neutral / surface scale */
  --luvva-neutral-50:  #FBFBFB;
  --luvva-neutral-100: #F5F5F5;
  --luvva-neutral-200: #E8E8E8;   /* the muted "diamond" background shape fill */
  --luvva-neutral-300: #C9C9C9;   /* design-system canvas grey */
  --luvva-neutral-400: #5E5E62;
  --luvva-neutral-500: #4A5565;   /* body grey copy */
  --luvva-neutral-700: #364153;   /* secondary text */
  --luvva-neutral-900: #101828;   /* dark headings inside cards */

  /* Tinted fills */
  --luvva-tint-blue-50:  #EFF6FF;   /* "Фишка рынка" callout fill */
  --luvva-tint-blue-100: #DBEAFE;   /* hairline strokes */
  --luvva-tint-mint-100: #DDF9F1;

  /* ─── Semantic foreground / background ────────────────────────── */
  --bg:           var(--luvva-off-white);
  --bg-elevated: var(--luvva-white);
  --bg-canvas:   var(--luvva-neutral-200);  /* large diamond motif fills */
  --bg-inverse:  var(--luvva-cobalt);

  --fg:          var(--luvva-near-black);
  --fg-muted:    var(--luvva-neutral-500);
  --fg-subtle:   var(--luvva-neutral-700);
  --fg-accent:   var(--luvva-cobalt);
  --fg-on-cobalt: var(--luvva-white);

  --border:        var(--luvva-neutral-200);
  --border-strong: var(--luvva-cobalt);
  --border-hairline: var(--luvva-tint-blue-100);

  /* ─── Type system ─────────────────────────────────────────────── */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (figma observed: 96 / 52 / 32 / 24 / 20 / 18 / 16 / 14 / 11) */
  --text-display:  96px;   /* "Кто мы?" hero in About */
  --text-h1:       52px;   /* page H1 — "Growth-маркетинг…", "Каналы продвижения" */
  --text-h2:       32px;   /* unused at 32 in current screens; reserved */
  --text-h3:       24px;   /* sub-heads, body-large */
  --text-h4:       20px;   /* card titles, lead paragraphs */
  --text-h5:       18px;   /* list-item bold labels */
  --text-body:     16px;   /* default body */
  --text-small:    14px;   /* meta, callout body */
  --text-eyebrow:  11px;   /* uppercased, +2px tracking */

  /* Line heights */
  --lh-display: 1.0;       /* figma: 100% on H1 / display */
  --lh-tight:   1.15;
  --lh-body:    1.55;
  --lh-loose:   1.625;     /* 32.5px / 20px on the cobalt list panel */

  /* Letter spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-eyebrow:  0.18em;   /* 2px on 11px */

  /* ─── Spacing (8-pt; key stops 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;   /* page gutter on 1280-wide layouts */
  --space-9: 96px;
  --space-10: 128px;

  /* ─── Radii ───────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;   /* "Фишка рынка" callout */
  --radius-lg: 16px;   /* primary card radius */
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-icon: 26px; /* squircle icon container */

  /* ─── Shadows (lifted directly from figma) ────────────────────── */
  --shadow-card:
      0px 4px 6px -4px rgba(0,0,0,0.1),
      0px 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-elevated:
      0px 8px 10px -6px rgba(0,0,0,0.1),
      0px 20px 25px -5px rgba(0,0,0,0.1);

  /* ─── Layout ──────────────────────────────────────────────────── */
  --page-width: 1280px;
  --page-gutter: 64px;
  --content-max: 1152px;   /* page-width minus 2 × gutter */
}

/* ─── Semantic element styles ─────────────────────────────────── */
html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { font-size: var(--text-body); line-height: var(--lh-body); margin: 0; }

.luvva-display, .display {
  font-family: var(--font-display);
  font-weight: 900;        /* Outfit Black */
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-accent);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-accent);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-h1);   /* shares scale with H1 in this system */
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-accent);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--lh-tight);
  color: var(--fg-accent);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-h5);   /* 18 / 28 */
  line-height: 1.55;
  color: var(--luvva-neutral-900);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-small);
  line-height: 1.43;
  color: var(--luvva-neutral-900);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0;
}

.body-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-h4);
  line-height: 1.4;
  color: var(--fg);
}

.body-muted {
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-eyebrow);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.5;
}

.italic-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Big stat numbers — "60+", "280+", "1500+" */
.stat-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg-accent);
}

/* Hairline left-border accent (figma uses a 6px cobalt bar beside lead copy) */
.lead-accent {
  border-left: 6px solid var(--luvva-cobalt);
  padding-left: 18px;
}