/**
 * Solène – design tokenek (Figma: Solene-v02, „Site - 1920w” stíluslap).
 *
 * Ugyanezeket az értékeket kapja meg az Elementor V4 Variables (színek, térközök)
 * és a Global Classes (tipográfia). Ha itt változik valami, ott is át kell vezetni.
 *
 * Betűk: a „Solene Serif” jelenleg Crimson Pro (OFL) helyettesítő a Bunyan Pro helyett.
 * Csere: az assets/fonts/solene-serif-*.woff2 fájlok felülírása – a név marad.
 */

/* ---------- Betűk ---------- */

@font-face {
	font-family: "Solene Serif";
	src: url("../fonts/solene-serif-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Solene Serif";
	src: url("../fonts/solene-serif-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Solene Sans";
	src: url("../fonts/solene-sans-300.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Solene Sans";
	src: url("../fonts/solene-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Solene Sans";
	src: url("../fonts/solene-sans-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Solene Sans";
	src: url("../fonts/solene-sans-600.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokenek ---------- */

:root {
	/* Színek – Figma-nevek szerint */
	--sol-main: #6b0e27;          /* Brand Main Color (bordó) */
	--sol-main-dark: #b02c4b;     /* Brand Main Color - Dark (hover) */
	--sol-main-bright: #d8938e;   /* Brand Main Color - Bright */
	--sol-sec: #65652a;           /* Brand Sec Color (olíva) */
	--sol-sec-dark: #373a0b;      /* Brand Sec Color - Dark */
	--sol-sec-bright: #b9b082;    /* Brand Sec Color - Bright */
	--sol-bright-100: #fafafa;
	--sol-bright-200: #f2f3f2;
	--sol-bright-300: #e7e9e7;
	--sol-dark-100: #050505;
	--sol-dark-200: #0c0d0c;
	--sol-dark-300: #161816;

	/* Betűcsaládok */
	--sol-font-serif: "Solene Serif", "Crimson Pro", Georgia, "Times New Roman", serif;
	--sol-font-sans: "Solene Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* Betűméretek – 390 px (mobil Figma) és 1920 px (desktop Figma) között folyamatosan skálázva */
	--sol-fs-h1: clamp(48px, 36.78px + 2.876vw, 92px);
	--sol-fs-h2: clamp(40px, 30.31px + 2.484vw, 78px);
	--sol-fs-h3: clamp(32px, 25.88px + 1.569vw, 56px);
	--sol-fs-h4: clamp(28px, 24.43px + 0.915vw, 42px);
	--sol-fs-h5: clamp(18px, 16.47px + 0.392vw, 24px);
	--sol-fs-highlight: clamp(16px, 15.49px + 0.131vw, 18px);
	--sol-fs-body: clamp(14px, 13.49px + 0.131vw, 16px);
	--sol-fs-link: clamp(14px, 13.49px + 0.131vw, 16px);
	--sol-fs-button: clamp(14px, 13.49px + 0.131vw, 16px);
	--sol-fs-small: clamp(12px, 11.49px + 0.131vw, 14px);
	--sol-fs-label: 24px;         /* Form Label Title */
	--sol-fs-badge: 12px;

	/* Sormagasság */
	--sol-lh-heading: 1.2;
	--sol-lh-text: 1.5;
	--sol-lh-label: 1.25;         /* 30 / 24 */

	/* Betűköz */
	--sol-ls-heading: 1px;
	--sol-ls-body: 0.5px;
	--sol-ls-h5: 0.01em;
	--sol-ls-link: 0.01em;
	--sol-ls-button: 0.1em;
	--sol-ls-badge: 0.01em;

	/* Térközök – Figma: Small / Default / Medium / XL / XXL */
	--sol-space-s: 12px;
	--sol-space-default: 24px;
	--sol-space-m: 48px;
	--sol-space-xl: clamp(32px, 23.84px + 2.092vw, 64px);
	--sol-space-xxl: clamp(48px, 27.61px + 5.229vw, 128px);

	/* Rács */
	--sol-container: 1552px;
	--sol-gutter: clamp(16px, 10.98vw - 26.82px, 184px); /* Figma: 184 px 1920-nál (tartalom 1552), 16 px mobilon */
	--sol-section-py: var(--sol-space-xxl);

	/* Komponensek */
	--sol-border: 2px;
	--sol-input-height: 48px;
	--sol-transition: 0.2s ease;

	/* Hello Commerce WooCommerce-változók a Figma gombjaihoz igazítva */
	--ehc-button-background-color: var(--sol-main);
	--ehc-button-color: var(--sol-bright-200);
	--ehc-button-background-color-hover: var(--sol-main-dark);
	--ehc-button-color-hover: var(--sol-bright-300);
	--ehc-button-border-color: var(--sol-main);
	--ehc-button-border-width: 2px;
	--ehc-button-font-size: var(--sol-fs-button);
	--ehc-button-font-weight: 400;
	--ehc-button-line-height: 1.5;
	--ehc-button-text-transform: uppercase;
	--ehc-button-text-decoration: none;
	--ehc-button-border-top-left-radius: 0;
	--ehc-button-border-top-right-radius: 0;
	--ehc-button-border-bottom-left-radius: 0;
	--ehc-button-border-bottom-right-radius: 0;
	--ehc-padding-block-start: 12px;
	--ehc-padding-block-end: 12px;
	--ehc-padding-inline-start: 24px;
	--ehc-padding-inline-end: 24px;
	--ehc-price-color: var(--sol-main);
	--ehc-sale-color: var(--sol-bright-200);
	--ehc-sale-background-color: var(--sol-main-dark);
}