/*
 * Design tokenek (1b Fotós). A színek a design PDF-ből mintavételezve.
 * Lépték: a design 1440 px-es kerete a PDF-ben 1080 egység, tehát px = egység / 0,75. A mobil design 390 px-es
 * kerete 292,5 egység (a mobile/*.png-ken 585 px, 1,5×), a mobil méretek ebből mérve.
 * Töréspontok (média lekérdezésben nem használható változó): 640 / 960 / 1200 px.
 */

/* Betűk: saját hosztolás, nincs Google Fonts hívás. */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/figtree-v9-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
	font-family: "Figtree";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/figtree-v9-latin_latin-ext-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/figtree-v9-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/figtree-v9-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/figtree-v9-latin_latin-ext-700.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto Slab";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/roboto-slab-v36-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto Slab";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/roboto-slab-v36-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto Slab";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/roboto-slab-v36-latin_latin-ext-700.woff2") format("woff2");
}

:root {
	/* Szöveg és sötét felületek */
	--c-navy: #082934;          /* címsorok, logó, sötét gomb/chip, kapcsolat doboz */
	--c-ink: #13252d;           /* menü, címkék, erős UI szöveg */
	--c-text: #24363c;          /* folyószöveg */
	--c-text-2: #33444a;        /* másodlagos lista szöveg */
	--c-muted: #4e5e66;         /* meta, morzsamenü, nyitvatartás */
	--c-muted-2: #64767c;       /* lábléc alsó sor (design: #6a7c82, AA-hoz sötétítve) */
	--c-disabled: #969ea2;

	/* Kékek */
	--c-blue: #1389c1;          /* design kék: ikonok, aktív keret, csúszka */
	--c-blue-strong: #107db0;   /* kék szöveg és kék gomb fehér felirattal (AA kontraszt) */
	--c-blue-bright: #1fa2df;   /* .eu, fotós CTA gomb sötét felirattal, kiválasztott keret */
	--c-blue-ink: #0c4a62;      /* szöveg világoskék alapon, trust sor */

	/* Világos felületek */
	--c-bg: #ffffff;
	--c-surface: #f4f7fa;       /* kártya, mező, táblázat, GYIK */
	--c-sky-50: #f7fbfd;        /* letiltott opció */
	--c-sky-100: #edf6fa;       /* chip, másodlagos gomb, megjegyzés doboz */
	--c-sky-200: #e3f4fb;       /* kiválasztott rádió kártya */
	--c-sky-300: #c6e7f9;       /* csúszka sáv, világos szöveg sötét alapon */
	--c-sky-400: #98d4f2;       /* eyebrow fotón, trust pontok */
	--c-line: #ecefef;          /* elválasztó vonal */
	--c-line-2: #e8f0f2;        /* lépés vonal, inaktív lépés kör */
	--c-line-soft: rgba(8, 41, 52, 0.08); /* sorok felületen */
	--c-control: #aebcc2;       /* üres jelölőnégyzet/rádió keret */
	--c-page-frame: #d3dde1;

	/* Állapotok */
	--c-success: #296a2a;
	--c-success-bg: #e3f5e1;
	--c-error: #c7402e;
	--c-error-ink: #9a2b1f;
	--c-error-bg: #fdece9;
	--c-focus: #107db0;

	/* Betűk */
	--f-head: "Roboto Slab", Rockwell, Georgia, serif;
	--f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* Betűméretek (mobil 390 px → desktop 1440 px) */
	--fs-hero: clamp(2.375rem, 1.55rem + 3.4vw, 4rem);    /* 38 → 64 */
	--fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);        /* 32 → 56 */
	--fs-h2: clamp(1.875rem, 1.4rem + 1.96vw, 3rem);      /* 30 → 48 */
	--fs-h3: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);      /* 24 → 34 */
	--fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);     /* 20 → 28: tartalmi h2 */
	--fs-card: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem); /* 20 → 23: kártya cím */
	--fs-trust: clamp(1rem, 0.85rem + 0.6vw, 1.3125rem);  /* 16 → 21 */
	--fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);  /* 16 → 19 */
	--fs-prose: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);  /* 16 → 18 */
	--fs-body: 1rem;            /* 16 */
	--fs-sm: 0.9375rem;         /* 15: menü, táblázat, kártya leírás */
	--fs-xs: 0.875rem;          /* 14: morzsamenü, lábléc */
	--fs-2xs: 0.8125rem;        /* 13: eyebrow, jelvény, lábléc alsó sor */
	--fs-3xs: 0.75rem;          /* 12: mező címke, nyitvatartás */

	--lh-tight: 1.08;
	--lh-head: 1.22;
	--lh-body: 1.6;
	--lh-prose: 1.78;
	--ls-eyebrow: 0.14em;

	/* Lekerekítés */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 14px;               /* mező, rádió kártya, GYIK, táblázat */
	--r-lg: 20px;               /* fotó kártya, ár kártya */
	--r-xl: 24px;               /* fotós sávok, hero, CTA */
	--r-pill: 999px;

	/* Árnyékok */
	--sh-card: 0 8px 30px rgba(8, 41, 52, 0.07);
	--sh-float: 0 18px 44px rgba(8, 41, 52, 0.14);
	--sh-focus: 0 0 0 3px rgba(31, 162, 223, 0.35);

	/* Térköz skála */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-7: 32px;
	--s-8: 40px;
	--s-9: 48px;
	--s-10: 64px;
	--s-11: 80px;
	--s-12: 96px;
	--s-13: 128px;
	--s-section: clamp(48px, 1.625rem + 5.64vw, 112px); /* 48 (390 px) → 80 (960 px); 960 felett lent */

	/* Konténer: desktopon 1296 px tartalom 72 px oldalsó margóval (1440-es keret) */
	--container: 1296px;
	--gutter: 24px;
	--wide-inset: 12px;         /* fotós sávok a keret szélétől */
	--header-h: 70px;

	/* Mozgás */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--t-fast: 150ms;
}

@media (min-width: 640px) {
	:root {
		--gutter: 32px;
		--wide-inset: 20px;
	}
}

@media (min-width: 960px) {
	:root {
		--gutter: 48px;
		--wide-inset: 32px;
		--s-section: clamp(56px, 4rem + 3vw, 112px); /* 93 (960 px) → 107 (1440 px) */
	}
}

@media (min-width: 1200px) {
	:root {
		--gutter: 72px;
		--wide-inset: 40px;
		--header-h: 88px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 0ms;
	}
}