/* CsaládiNet – végleges arculati tokenek / 2026-09-23
   Alap: a felhasználó által feltöltött tokens (3).css.
   Színreferencia: a jóváhagyott bézs sávos nyitólap és cikkoldal.
   BETŰMÉRETEK, SORKÖZÖK, TÉRKÖZÖK, RÁCSSZÉLESSÉGEK ÉS TÖRÉSPONT:
   változatlanok az eredeti fájlhoz képest.
   Ez az assets/css/tokens.css helyére kerül, nem a többi CSS helyett.
   A Quicksand és Inter meglévő betöltését meg kell tartani. */
:root {
  /* Márka */
  --teal-600: #08627E;   /* címek, linkek */
  --teal-700: #035E7A;   /* sötét felületek, gombok */
  --teal-800: #02485D;   /* hover, lábléc */
  --coral-500: #F7573F;  /* díszítő akcentus (nem szövegszín) */
  --coral-600: #DE4028;  /* korall gomb fehér felirattal */

  /* Háttér */
  --white: #FFFFFF;
  --cream-100: var(--beige-100); /* a korábbi mélyebb krém is a közös bézs */
  --cream-50: #FAF7F4;
  --beige-100: #F5EDE3;  /* kiemelt belépők / sávháttér */
  --aqua-100: var(--cream-50); /* régi név, már nem mentaszín */
  --aqua-50: var(--cream-50);  /* régi név, már nem mentaszín */

  /* Szöveg */
  --ink-900: #334655;
  --slate-700: #334655;
  --slate-500: #647188;

  /* Vonalak, hirdetés */
  --hairline: #D6E2E6;
  --ad-bg: var(--cream-50);
  --ad-label: var(--slate-500);

  /* Tipográfia */
  --font-heading: "Quicksand", "Trebuchet MS", sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --fs-body: 17px;
  --fs-lead: 19px;
  --fs-article: 18px;
  --lh-body: 1.65;
  --lh-article: 1.77;
  --fw-heading: 600;     /* címek 600, nem 700 */
  --track-xl: -0.035em;  /* csak 24px feletti címeken */
  --track-l: -0.025em;   /* csak 24px feletti címeken */

  /* Rács */
  --container: 1200px;
  --gutter: 24px;
  --sidebar-width: 320px;
  --article-max: 700px;
  --article-shell: 1120px;
  /* Skin szárnyak a belső tartalomélhez (container/shell − oldalsó padding) */
  --cn-skin-rail: calc(var(--container) - 2 * var(--gutter)); /* 1152 */
  /* Sticky header magasság (~72px) + 1px border – #anchor ugrás (scroll-padding-top) */
  --cn-header-offset: 76px;

  /* Térköz (8pt) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --section-gap: 96px;
  --band-padding: 64px 0;
  --band-gutter: clamp(28px, 5vw, 56px);

  /* Lekerekítés */
  --radius-img: 12px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Árnyék – a végleges minta finom petrol árnyéka */
  --shadow-card: 0 3px 14px rgba(8, 98, 126, 0.035);
  --shadow-hover: 0 4px 16px rgba(8, 98, 126, 0.08);

  /* A jóváhagyott HTML-minta változónevei, közös forrásra kötve.
     Nincs új betűméret vagy elrendezési szabály. */
  --petrol: var(--teal-600);
  --deep: var(--teal-700);
  --paper: var(--white);
  --cream: var(--cream-50);
  --soft: var(--cream-50);
  --round: var(--radius-card);
  --body: var(--font-body);
  --heading: var(--font-heading);

  /* Legacy aliasok (régi var(--pink) / --teal hivatkozások) */
  --pink: var(--coral-500);
  --pink2: var(--coral-600);
  --coral: var(--coral-500);
  --teal: var(--teal-700);
  --teal-dark: var(--teal-800);
  --ink: var(--ink-900);
  --text: var(--slate-700);
  --muted: var(--slate-500);
  --bg: var(--cream-50);
  --card: var(--white);
  --line: var(--hairline);
  --brand: var(--coral-500);
  --green: var(--teal-700);
  --radius: var(--radius-card);
  --max: var(--container);
  --shadow: var(--shadow-card);
  --cn-teal: var(--teal-700);
  --cn-coral: var(--coral-500);
}

@media (max-width: 799px) {
  :root {
    --gutter: 12px;
  }
}