/* YGTLAB tokens.css
   Tek doğruluk kaynağı theme.json'dur (palet, yazı tipi, yazı boyutu, boşluk, settings.custom).
   Bu dosya demo-1 CSS'inin kullandığı değişken adlarını (--bg, --ink, --fs-sm, --page-head-*, ...)
   theme.json'un ürettiği --wp--preset--* / --wp--custom--* değişkenlerine bağlar; site.css kuralları adlar
   değişmeden çalışır. var()'ın ikinci değeri demo-1'deki değerdir (global stil kırıksa görünüm bozulmaz).
   Site Editor > Stiller'de renk/boyut değişince site de değişir. @font-face YOK: theme.json fontFace üretir.
   Demo kaynağı: public/demo-1/style.css :root + palette-4.css (variant 4 sonuç değerleri) + 3b jetonları. */

:root,
.editor-styles-wrapper {
	/* Renk: settings.color.palette (slug ygt-<ad>) */
	--bg: var(--wp--preset--color--ygt-bg, #fff);
	--ink: var(--wp--preset--color--ygt-ink, #202b50);
	--muted: var(--wp--preset--color--ygt-muted, #5b647f);
	--line: var(--wp--preset--color--ygt-line, #dce5f2);
	--accent: var(--wp--preset--color--ygt-accent, #286bd8);
	--purple: var(--wp--preset--color--ygt-purple, #8859cc);
	--panel: var(--wp--preset--color--ygt-panel, #f0f5fc);
	--inverse: var(--wp--preset--color--ygt-inverse, #fff);
	--c-error: var(--wp--preset--color--ygt-danger, #b3261e);
	--c-call: var(--wp--preset--color--ygt-call, #1f4fb0);
	--c-wa: var(--wp--preset--color--ygt-wa, #0f7a40);

	/* Yazı: settings.typography.fontSizes (demo --fs-*) */
	--fs-xs: var(--wp--preset--font-size--ygt-xs, 14px);
	--fs-sm: var(--wp--preset--font-size--ygt-sm, 15px);
	--fs-base: var(--wp--preset--font-size--ygt-base, 16px);
	--fs-md: var(--wp--preset--font-size--ygt-md, 17px);
	--fs-nav: var(--wp--preset--font-size--ygt-nav, 15.5px);
	--lh-body: var(--wp--custom--lh-body, 1.65);

	/* Ortak bileşen jetonları: settings.custom */
	--callbar-h: var(--wp--custom--calbar-h, 68px);
	--chip-h: var(--wp--custom--chip-h, 34px);
	--field-gap: var(--wp--custom--field-gap, 20px);
	--radius-ui: var(--r-sm);

	/* Tek token seti (demo style.css :root ile aynı değerler): kontrol yüksekliği, radius, harf aralığı, odak, kapsayıcı */
	--ctl-h: var(--wp--custom--ctl-h, 48px);
	--ctl-h-sm: var(--wp--custom--ctl-h-sm, 40px);
	--tap: var(--wp--custom--tap, 44px);
	--r-xs: var(--wp--custom--r-xs, 2px);
	--r-sm: var(--wp--custom--r-sm, 4px);
	--r-pill: var(--wp--custom--r-pill, 999px);
	--ls-display: var(--wp--custom--ls-display, -0.03em);
	--ls-title: var(--wp--custom--ls-title, -0.02em);
	--ls-label: var(--wp--custom--ls-label, 0.07em);
	--focus-w: var(--wp--custom--focus-w, 2px);
	--focus-off: var(--wp--custom--focus-off, 3px);
	--focus-c: var(--accent);
	--wrap-max: var(--wp--custom--wrap-max, 1560px);
	--gutter: var(--wp--custom--gutter, max(18px, 5cqw));
	--wrap-pad: max(var(--gutter), calc((100cqw - var(--wrap-max)) / 2 + var(--gutter)));
	--section-gap: var(--wp--custom--section-gap, 60px);
	--fab: var(--wp--custom--fab, 44px);
	--brand-w: var(--wp--custom--brand-w, 180px);
	--brand-h: var(--wp--custom--brand-h, 84px);
	--hdr-h: var(--wp--custom--hdr-h, 64px);
	--accent-strong: var(--wp--custom--accent-strong, #1f5bc0);
	--fs-h1: var(--wp--preset--font-size--ygt-h-1, clamp(30px, 4.2vw, 48px));
	--fs-h2: var(--wp--preset--font-size--ygt-h-2, clamp(24px, 2.4vw, 32px));
	--crumb-size: var(--fs-xs);
	--top-h: var(--wp--custom--top-h, 133px); /* site.js üst bilgi yüksekliğiyle günceller */

	/* Sayfa başlığı bandı (ygt/sayfa-basligi): settings.custom.pageHead */
	--page-head-pad-y: var(--wp--custom--page-head--pad-y, 12px);
	--page-head-pad-x: var(--wp--custom--page-head--pad-x, 24px);
	--page-head-gap: var(--wp--custom--page-head--gap, 4px);
	--page-head-margin: var(--wp--custom--page-head--margin, 16px 0 28px);
	--page-head-h1: var(--wp--custom--page-head--head-size, clamp(26px, 2.6vw, 34px));
	--page-head-h1-ls: var(--wp--custom--page-head--head-ls, var(--ls-display));
	--page-head-lead: var(--wp--custom--page-head--lead, var(--fs-base));
	--page-head-max: var(--wp--custom--page-head--max, 1100px);

	/* 3b jetonları (açılış ekranı, karşılaştırma çubuğu, kapsam listesi, katalog kartı) */
	--splash-bg: #fff;
	--splash-ink: var(--ink);
	--splash-accent: var(--accent);
	--ease-out: var(--wp--custom--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
	--cmp-bar-h: 68px;
	--cmp-diff-bg: #fff6dc;
	--cmp-diff-line: #c98a00;
	--acc-dur: 0.28s;
	--cat-cover-w: 92px;
}

/* Mobilde dokunma hedefi: kontrol yüksekliği 44 px (demo style.css ile aynı). */
@media (max-width: 767px) {
	:root,
	.editor-styles-wrapper {
		--ctl-h: 44px;
		--ctl-h-sm: 44px;
	}
}