/*
 * invese-ui design tokens: taken from the Invese Figma file
 * (figma.com/design/jV4asTZkhnEXnQYmUKei5V, page "Home" 5:2). Every value maps to a Figma style.
 * Fonts (Google Fonts):
 *   <link href="https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..600&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
 */

:root {
  /* ---------- colors (Figma style names in comments) ---------- */
  --inv-brand: #18aa87;        /* Brand: primary buttons, the green blocks in the CTA */
  --inv-brand-hover: #139474;  /* derived: brand hover */
  --inv-forest: #0b4a45;       /* Bg: dark section background (services, contact, CTA) */
  --inv-ink: #084134;          /* Heading Text Colours: every heading, labels, icons */
  --inv-black: #161616;        /* Gray 1: dark buttons, footer background */
  --inv-body: #596160;         /* Gray 2: body copy, nav links */
  --inv-muted: #797d7c;        /* Gray 3: placeholders, footer links, "/ 05" */
  --inv-line: #d5d5d5;         /* Gray 4: hairlines (0.5px) in forms, quotes, blog meta */
  --inv-off: #f8f8f8;          /* Off-White 01: tinted panels, chips, stat tiles, case section */
  --inv-off-2: #ebebeb;        /* Off-White 02: dividers, outlined square button */
  --inv-white: #ffffff;        /* Pure White */

  /* ---------- type ---------- */
  --inv-display: "TikTok Sans", ui-sans-serif, system-ui, sans-serif;  /* headings, numbers */
  --inv-text: "Inter", ui-sans-serif, system-ui, sans-serif;           /* body, UI */

  /* ---------- layout ---------- */
  --inv-max: 1280px;           /* content width (160px side margins at 1600) */
  --inv-section: 148px;        /* space above every section */
  --inv-title-gap: 60px;       /* section title → content */
  --inv-pill: 45px;            /* buttons are the ONLY rounded shapes (plus avatars) */

  /* ---------- motion ---------- */
  --inv-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---------- type roles: Figma text styles, exact (all headings weight 400, no tracking) ----------
 * TikTok Sans MUST be loaded with its opsz axis (see the font link above). Without it Google
 * serves the 12pt text cut, which is ~10% wider than Figma and breaks every headline. */
.inv-h1 { font: 400 64px/1.08  var(--inv-display); }   /* Typography/Heading/H1 */
.inv-h2 { font: 400 48px/1.167 var(--inv-display); }   /* H2: every section title, big stat */
.inv-h4 { font: 400 32px/1.25  var(--inv-display); }   /* H4: card titles, stat values, form title */
.inv-h5 { font: 400 24px/1.333 var(--inv-display); }   /* H5: feature rows, quotes, blog titles */
.inv-h6 { font: 400 20px/1.2   var(--inv-display); }   /* H6: service tiles, footer headings, contact info */
.inv-body { font: 400 16px/1.5 var(--inv-text); }      /* Supporting/Body/Regular */
.inv-body-strong { font: 600 16px/1.13 var(--inv-text); } /* Supporting/Body/SemiBold */
.inv-caption { font: 400 13px/1.48 var(--inv-text); }  /* Supporting/Caption/Regular */

/* ---------- responsive steps ---------- */
@media (max-width: 1100px) {
  :root { --inv-section: 112px; --inv-title-gap: 48px; }
  .inv-h2 { font-size: 40px; }
}
@media (max-width: 640px) {
  :root { --inv-section: 80px; --inv-title-gap: 36px; }
  .inv-h1 { font-size: 42px; }
  .inv-h2 { font-size: 34px; }
  .inv-h4 { font-size: 26px; }
  .inv-h5 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}

/* Tailwind v4: utilities like bg-inv-forest, text-inv-ink, font-inv-display */
@theme inline {
  --color-inv-brand: var(--inv-brand);
  --color-inv-forest: var(--inv-forest);
  --color-inv-ink: var(--inv-ink);
  --color-inv-black: var(--inv-black);
  --color-inv-body: var(--inv-body);
  --color-inv-muted: var(--inv-muted);
  --color-inv-line: var(--inv-line);
  --color-inv-off: var(--inv-off);
  --color-inv-off-2: var(--inv-off-2);
  --font-inv-display: var(--inv-display);
  --font-inv-text: var(--inv-text);
}