/* ============================================================
   IBEX DESIGN SYSTEM — Colors & Type
   Forrás: ibex/new/css/style.css (átemelve és kiegészítve)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Fraunces:opsz,wght,SOFT@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Színek: márkapaletta (tengeri vibe) ---------- */
  --navy:       #0b1f3a;  /* mély tengerkék — fő háttér, footer, nav */
  --ocean:      #1a4a7c;  /* középmély kék — linkek, breadcrumb */
  --teal:       #0d7377;  /* zöldes-türkiz — fő akcent, gomb, badge */
  --teal-light: #14a9b0;  /* világos türkiz — hover, kiemelés */
  --sky:        #87ceeb;  /* halvány égkék — illusztratív */
  --sand:       #f5e6c8;  /* meleg homokszín — info dobozok */
  --sand-dark:  #e8d5a3;  /* sötétebb homok — borderek */
  --white:      #ffffff;

  /* ---------- Szövegszínek ---------- */
  --text:       #1e2d3d;  /* fő szövegszín */
  --text-muted: #5a6e82;  /* másodlagos szöveg, captionek */
  --text-on-dark: rgba(255, 255, 255, 0.88);
  --text-on-dark-muted: rgba(255, 255, 255, 0.6);

  /* ---------- Szemantikus háttér ---------- */
  --bg-page:    #ffffff;  /* fő tartalom háttér */
  --bg-soft:    #f4f7fa;  /* szekció háttér (utak, hírek listák) */
  --bg-softer:  #f8f9fb;  /* finom kártya háttér */
  --bg-dark:    #0b1f3a;  /* sötét szekciók */

  /* ---------- Border & divider ---------- */
  --border:        #eaeff5;
  --border-strong: #d0dae8;

  /* ---------- Sugarak ---------- */
  --radius-sm:  6px;
  --radius:     8px;     /* alapértelmezett */
  --radius-md:  12px;    /* kártyák */
  --radius-lg:  20px;    /* badge-ek, pill */
  --radius-pill: 32px;   /* CTA gombok */
  --radius-full: 50%;    /* avatarok */

  /* ---------- Árnyékok ---------- */
  --shadow-xs: 0 2px 10px rgba(11, 31, 58, 0.06);
  --shadow-sm: 0 2px 12px rgba(11, 31, 58, 0.08);
  --shadow:    0 4px 24px rgba(11, 31, 58, 0.18);
  --shadow-lg: 0 8px 32px rgba(11, 31, 58, 0.15);
  --shadow-cta: 0 4px 20px rgba(13, 115, 119, 0.5);
  --shadow-cta-hover: 0 8px 28px rgba(13, 115, 119, 0.6);

  /* ---------- Térközök (8px alap) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Konténer szélességek ---------- */
  --container:        1100px;
  --container-narrow: 900px;
  --container-text:   800px;

  /* ---------- Animáció ---------- */
  --transition: 0.3s ease;
  --transition-fast: 0.18s ease;
  --transition-slow: 0.4s ease;

  /* ---------- Tipográfia: család ---------- */
  --font-sans: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* hero brand + címek — meleg, naplós */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;   /* idézetek, hosszú olvasás */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Tipográfia: méret skála ---------- */
  --fs-xs:   0.78rem;   /* badge, label, microcopy (~12.5px) */
  --fs-sm:   0.85rem;   /* secondary text, breadcrumb (~13.6px) */
  --fs-base: 1rem;      /* body (16px) */
  --fs-md:   1.05rem;   /* lead body */
  --fs-lg:   1.15rem;   /* card title */
  --fs-xl:   1.3rem;    /* section title small */
  --fs-2xl:  1.5rem;    /* section title */
  --fs-3xl:  1.8rem;    /* page subtitle */
  --fs-4xl:  2.6rem;    /* hero title */
  --fs-hero: clamp(3rem, 10vw, 6rem); /* főoldali brand */

  /* ---------- Tipográfia: súlyok ---------- */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --fw-black:    900;

  /* ---------- Sortávolság, betűköz ---------- */
  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.5;
  --lh-relax:  1.7;   /* body alapértelmezett */
  --lh-loose:  1.8;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.07em;
  --ls-uppercase: 0.08em;
  --ls-brand:  0.06em;
}

/* ============================================================
   Szemantikus tipográfia (h1, h2, p, code, ...) helper class-okként
   Az új designban inline definíciók vannak; itt egy konzisztens
   szemantikus változatot kínálunk, hogy újrahasználható legyen.
   ============================================================ */

.t-hero-brand {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--white);
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
}

.t-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, var(--fs-4xl));
  font-weight: 600;
  font-variation-settings: "opsz" 72, "SOFT" 80;
  line-height: var(--lh-tight);
  color: var(--white);
  letter-spacing: -0.005em;
}

.t-hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--text-on-dark);
}

.t-section-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  color: var(--navy);
  line-height: var(--lh-tight);
}

.t-h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--navy);
}

/* h2 a story-ban: bal oldali türkiz csík */
.t-h2-accented {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--navy);
  border-left: 4px solid var(--teal);
  padding-left: var(--space-4);
}

.t-card-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--navy);
}

.t-body {
  font-size: var(--fs-base);
  line-height: var(--lh-relax);
  color: var(--text);
}

.t-body-justify {
  font-size: var(--fs-base);
  line-height: var(--lh-relax);
  color: var(--text);
  text-align: justify;
  hyphens: auto;
}

.t-muted {
  color: var(--text-muted);
}

.t-caption {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
}

.t-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  color: var(--text-muted);
}

.t-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--teal);
}

.t-link {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--teal-light);
  transition: color var(--transition);
}
.t-link:hover { color: var(--ocean); }