/* ============================================================
   Invest Lithuania — Webfonts
   TT Hoves (TypeType) — the brand's primary & only typeface.
   Three weights are licensed/shipped: Light, Medium, DemiBold.
   ============================================================ */

@font-face {
  font-family: "TT Hoves";
  src: url("../fonts/TTHoves-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Hoves";
  src: url("../fonts/TTHoves-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Hoves";
  src: url("../fonts/TTHoves-DemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Invest Lithuania — Color tokens
   Source: "IL web naujas blokų dizainas 2026" spec sheet.
   ============================================================ */

:root {
  /* ---- Brand greens (primary identity) ---- */
  --il-green-900: #195236; /* primary dark green — logo, headings, primary buttons */
  --il-green-500: #1b8f45; /* bright green — accent, logo dots, hover */

  /* ---- Accent / data palette (section backgrounds, charts, facts) ---- */
  --il-blue-200:  #afd4e4; /* sky blue */
  --il-blue-100:  #cfe5ef; /* pale blue */
  --il-lime-500:  #a7be39; /* olive lime */
  --il-lime-200:  #dce5b0; /* pale lime — block background */
  --il-yellow-400:#ffd700; /* signal yellow — hero CTA / highlights / block bg */

  /* ---- Neutrals ---- */
  --il-black:      #121212; /* primary text */
  --il-gray-500:   #6b7280; /* secondary text */
  --il-gray-300:   #b4b5c0; /* borders, disabled */
  --il-lavender-200:#e1e1eb; /* hairlines, subtle fills */
  --il-gray-100:   #efeff4; /* subtle surface */
  --il-white:      #ffffff;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */

  /* Text — brand rule: text is ONLY #121212 (on light/tinted surfaces) or
     #FFFFFF (on the two greens). No gray, no green text. */
  --text-primary:   var(--il-black);
  --text-secondary: var(--il-black);  /* was gray — now #121212 per text rule */
  --text-brand:     var(--il-black);  /* green reserved for icons/accents, not text */
  --text-on-dark:   var(--il-white);
  --text-link:      var(--il-black);
  --text-link-hover: var(--il-green-500);

  /* Brand */
  --brand-primary: var(--il-green-900);
  --brand-accent:  var(--il-green-500);

  /* ---- Section background options (full-bleed blocks) ----
     Spec: #afd4e4 · #ffffff · #a7be39 · #efeff4 (+ dark green) */
  --surface-page:    var(--il-white);
  --surface-subtle:  var(--il-gray-100);   /* #efeff4 */
  --surface-blue:    var(--il-blue-200);    /* #afd4e4 */
  --surface-lime:    var(--il-lime-500);    /* #a7be39 */
  --surface-brand:   var(--il-green-900);
  --surface-muted:   var(--il-lavender-200);

  /* ---- Additional block / card background options ----
     Spec block palette also includes these softer tints */
  --surface-blue-soft: var(--il-blue-100);  /* #cfe5ef */
  --surface-lime-soft: var(--il-lime-200);  /* #dce5b0 */
  --surface-yellow:    var(--il-yellow-400);/* #ffd700 */

  /* Borders & lines */
  --border-subtle: var(--il-lavender-200);
  --border-strong: var(--il-gray-300);

  /* Buttons */
  --btn-primary-bg:        var(--il-green-900);
  --btn-primary-bg-hover:  var(--il-green-500);
  --btn-primary-fg:        var(--il-white);
  --btn-secondary-fg:      var(--il-black);
  --btn-secondary-border:  var(--il-green-900);
  --btn-secondary-bg-hover:rgba(25, 82, 54, 0.2); /* #195236 @ 20% — fill only; outline/text/chevron stay as rest state */
  --btn-secondary-fg-hover:var(--il-black);
  --btn-hero-bg:           var(--il-yellow-400);
  --btn-hero-bg-hover:     var(--il-green-500);  /* #1B8F45 */
  --btn-hero-fg:           var(--il-black);
  --btn-hero-fg-hover:     var(--il-white);

  /* Focus ring */
  --focus-ring: var(--il-green-500);
}

/* ============================================================
   Invest Lithuania — Typography tokens
   Typeface: TT Hoves. Scale from the 2026 web spec.
   Headings use Medium (H1–H4) / DemiBold (H5).
   Body ("Paragraph") + Tooltip use Light.
   Values below are DESKTOP; mobile sizes given as --*-m.
   ============================================================ */

:root {
  /* Families */
  --font-sans: "TT Hoves", "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Weights */
  --fw-light: 300;    /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-demibold: 600; /* @kind font */

  /* ---- Type scale: size / line-height (desktop) ---- */
  --h1-size: 60px;    --h1-lh: 72px;    --h1-size-m: 36px; --h1-lh-m: 44px;
  --h2-size: 44px;    --h2-lh: 54px;    --h2-size-m: 30px; --h2-lh-m: 38px;
  --h3-size: 32px;    --h3-lh: 40px;    --h3-size-m: 24px; --h3-lh-m: 32px;
  --h4-size: 24px;    --h4-lh: 32px;    --h4-size-m: 20px; --h4-lh-m: 28px;
  --h5-size: 20px;    --h5-lh: 28px;    --h5-size-m: 20px; --h5-lh-m: 28px;

  --p1-size: 24px;    --p1-lh: 36px;    --p1-size-m: 20px; --p1-lh-m: 30px;
  --p2-size: 20px;    --p2-lh: 28px;    --p2-size-m: 16px; --p2-lh-m: 24px;
  --p3-size: 18px;    --p3-lh: 27px;    --p3-size-m: 14px; --p3-lh-m: 22px;
  --tooltip-size: 12px; --tooltip-lh: 16px;

  /* Letter spacing — TT Hoves is set tight on large display sizes */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-normal: 0;
}

/* ============================================================
   Type helper classes — apply the scale directly.
   Mobile sizes kick in below 768px.
   ============================================================ */

.il-h1, .il-h2, .il-h3, .il-h4, .il-h5 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.il-h1 { font-weight: var(--fw-medium); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--tracking-display); }
.il-h2 { font-weight: var(--fw-medium); font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--tracking-heading); }
.il-h3 { font-weight: var(--fw-medium); font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--tracking-heading); }
.il-h4 { font-weight: var(--fw-medium); font-size: var(--h4-size); line-height: var(--h4-lh); }
.il-h5 { font-weight: var(--fw-demibold); font-size: var(--h5-size); line-height: var(--h5-lh); }

.il-p1, .il-p2, .il-p3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  color: var(--text-primary);
  margin: 0;
  text-wrap: pretty;
}
.il-p1 { font-size: var(--p1-size); line-height: var(--p1-lh); }
.il-p2 { font-size: var(--p2-size); line-height: var(--p2-lh); }
.il-p3 { font-size: var(--p3-size); line-height: var(--p3-lh); }

.il-tooltip-text {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--tooltip-size);
  line-height: var(--tooltip-lh);
}

@media (max-width: 768px) {
  .il-h1 { font-size: var(--h1-size-m); line-height: var(--h1-lh-m); }
  .il-h2 { font-size: var(--h2-size-m); line-height: var(--h2-lh-m); }
  .il-h3 { font-size: var(--h3-size-m); line-height: var(--h3-lh-m); }
  .il-h4 { font-size: var(--h4-size-m); line-height: var(--h4-lh-m); }
  .il-h5 { font-size: var(--h5-size-m); line-height: var(--h5-lh-m); }
  .il-p1 { font-size: var(--p1-size-m); line-height: var(--p1-lh-m); }
  .il-p2 { font-size: var(--p2-size-m); line-height: var(--p2-lh-m); }
  .il-p3 { font-size: var(--p3-size-m); line-height: var(--p3-lh-m); }
}

/* ============================================================
   Invest Lithuania — Spacing, grid, radius & elevation
   Spacing rhythm: a 3px modular grid. Named steps below.
   Grid: 1626 / 12-col / 108px col / 30px gutter (desktop);
         342 / 4-col / 72px col / 18px gutter (mobile).
   Radii — desktop 84 (hero) / 54 / 45 (tabs2) / 27 / 6 (+ pinned 6px corner);
           mobile large 54→36, fact tile 54→24, accordion container 54→0.
   ============================================================ */

:root {
  /* ---- Spacing scale — 3px modular grid ----
     Step  1 =  12px  small component gaps: icon–text, tooltip/tag inner
     Step  2 =  18px  tight layout gaps: Accordion items, Carousel dots, grid gutter (mobile)
     Step  3 =  24px  inner card/component spacing; mobile section padding
     Step  4 =  30px  desktop grid gutter (= --grid-gap); standard block content gap
     Step  5 =  36px  mid-range layout: mobile large panel radius (= --radius-lg-m); Carousel arrow size
     Step  6 =  60px  section vertical padding (= --block-pad-y); demo card padding
     Step  7 = 120px  page gutter (= --page-gutter); footer padding                               */
  --space-1:  12px;
  --space-2:  18px;
  --space-3:  24px;
  --space-4:  30px;
  --space-5:  36px;
  --space-6:  60px;
  --space-7: 120px;

  /* ---- Layout grid ----
     Desktop: 1626px content · 12 columns · 108px column · 30px gutter
              (12×108 + 11×30 = 1626).
     Mobile:   342px content ·  4 columns ·  72px column · 18px gutter
              ( 4×72  +  3×18 =  342).
     Note: --grid-col, --grid-col-m, --grid-columns, --grid-columns-m are
     reference values for layout planning; --content-max, --page-gutter,
     --grid-gap and --block-pad-y are the tokens actively used by components. */
  --content-max:    1626px;  /* desktop content width — used on every full-width block */
  --page-gutter:     120px;  /* desktop horizontal page margin */
  --page-gutter-m:    24px;  /* mobile horizontal page margin */
  --grid-col:        108px;  /* desktop column width (reference) */
  --grid-col-m:       72px;  /* mobile column width (reference) */
  --grid-gap:         30px;  /* desktop column gutter — used in multi-col grids */
  --grid-gap-m:       18px;  /* mobile column gutter */
  --grid-columns:       12;  /* @kind other */
  --grid-columns-m:      4;  /* @kind other */

  /* Vertical rhythm between full-width sections. */
  --block-pad-y:    60px;
  --block-pad-y-m:  30px;

  /* ---- Border radius ----
     The brand shape is big and friendly. Three desktop steps plus a signature
     “pinned” corner: large panels keep their TOP-LEFT corner at 6px while the
     other three go to --radius-lg (cards, testimonial: 6/54 54 54; accordion
     items pin both left corners: 6/54 54 6). On mobile the large radius drops
     to --radius-lg-m (36px); fact icon tiles use --radius-sm (24px); the
     accordion container goes square (0) and full-bleed. */
  --radius-xs:   6px;   /* tags · tooltips · inputs · the pinned 6px corner */
  --radius-sm:  24px;   /* fact icon tile (mobile) — JSX uses raw px; token for CSS consumers */
  --radius-md:  27px;   /* buttons (all sizes) · secondary nav CTA */
  --radius-lg:  54px;   /* signature panel: cards · CTA · accordion · media · hero · fact tiles */
  --radius-lg-m: 36px;  /* large panel radius on mobile (54 → 36) — = --space-5 */
  --radius-tab:  45px;  /* Tabs2 desktop panel + tab corners (between md and lg) */
  --radius-xl:   84px;  /* Hero panel desktop only — the largest brand radius */
  --radius-pill: 999px; /* tooltip trigger · tab bars · secondary nav pill */

  /* ---- Shadows ----
   * Surfaces are flat — colour blocks and whitespace provide structure.
   * One shadow token for floating UI elements (e.g. video play button). */
  --shadow-lifted: 0 16px 48px rgba(18, 18, 18, 0.16);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast:  140ms;  /* @kind other */
  --dur-base:  220ms;  /* @kind other */
  --dur-slow:  360ms;  /* @kind other */
}

/* On small screens the grid gutter and page margin shrink to the mobile spec
   (18px gutter, 24px margin). Layout grids that use var(--grid-gap) follow. */
@media (max-width: 680px) {
  :root {
    --grid-gap: var(--grid-gap-m);
    --page-gutter: var(--page-gutter-m);
    --block-pad-y: var(--block-pad-y-m);
  }
}

/* ============================================================
   Invest Lithuania — Base / reset
   Sets the document defaults that the brand assumes everywhere.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--p2-size);
  line-height: var(--p2-lh);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "ss01" 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
a:hover { color: var(--text-link-hover); }

img, svg, video { display: block; max-width: 100%; }

button {
  font-family: inherit;
  cursor: pointer;
}

::selection {
  background: var(--il-green-500);
  color: var(--il-white);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}