/*
 * Príma Sörpad · design tokenek.
 *
 * Ugyanazok a nevek, mint a statikus oldalon, hogy a régi CSS szinte szó
 * szerint átvihető legyen. A színek az Avada globális palettájára vannak
 * kötve (Avada › Options › Colors): ott átírva mindenhol változnak. A második
 * érték csak tartalék arra az esetre, ha a paletta még nem töltött be.
 *
 * Bedrótozott hexet máshova ne írj. Átlátszó árnyalat:
 * color-mix(in srgb, var(--amber-500) 24%, transparent).
 */
:root {
	--amber-500: var(--awb-color4, #e6af1f);
	--amber-600: var(--awb-custom_color_3, #cf9a12);
	--amber-700: var(--awb-custom_color_4, #a87418);
	--amber-800: var(--awb-color5, #8a5f12);
	--amber-300: var(--awb-custom_color_5, #f2cb63);
	--amber-200: var(--awb-custom_color_6, #fae8b8);
	--amber-100: var(--awb-custom_color_7, #fdf2d6);
	--ink-900: var(--awb-custom_color_1, #1b1e25);
	--ink-800: var(--awb-color8, #272a33);
	--ink-700: var(--awb-color7, #383e42);
	--ink-500: var(--awb-custom_color_2, #5f6169);
	--ink-400: var(--awb-color6, #71706e);
	--sand-050: var(--awb-color2, #faf8f4);
	--sand-100: var(--awb-color3, #f7f3ec);
	--sand-200: var(--awb-custom_color_8, #f2efea);
	--sand-300: var(--awb-custom_color_9, #e7e1d7);
	--sand-400: var(--awb-custom_color_10, #d8bd9c);
	--line-100: var(--awb-custom_color_11, #ece7de);
	--line-200: var(--awb-custom_color_12, #e2ddd5);
	--line-300: var(--awb-custom_color_13, #c9c2b6);
	--white: var(--awb-color1, #ffffff);
	--ral-1032: #e2be46;
	--ral-3004: #86303a;
	--ral-6011: #87ad9f;
	--ral-6033: #55b0b3;
	--ral-7006: #86807c;
	--ral-7030: #a4a5a7;
	--ral-1004: #e1a100;
	--ral-7016: #383e42;
	--cta-500: var(--awb-custom_color_16, #3d7a52);
	--cta-600: var(--awb-custom_color_17, #336647);
	--cta-100: var(--awb-custom_color_18, #e8f0e9);
	--success-500: var(--awb-custom_color_21, #4f7a52);
	--success-100: var(--awb-custom_color_22, #e6efe4);
	--warning-500: var(--awb-custom_color_23, #c2870f);
	--warning-100: var(--awb-custom_color_24, #fbf0d5);
	--danger-500: var(--awb-custom_color_19, #a63a34);
	--danger-100: var(--awb-custom_color_20, #f6e4e2);
	--surface-page: var(--sand-100);
	--surface-alt: var(--sand-200);
	--surface-card: var(--white);
	--surface-sunken: var(--sand-200);
	--surface-inverse: var(--ink-800);
	--surface-brand: var(--amber-500);
	--surface-brand-soft: var(--amber-100);
	--text-heading: var(--ink-800);
	--text-body: var(--ink-700);
	--text-muted: var(--ink-400);
	--text-inverse: var(--amber-100);
	--text-on-brand: var(--ink-900);
	--text-link: var(--amber-800);
	--text-link-hover: var(--ink-800);
	--border-subtle: var(--line-100);
	--border-default: var(--line-200);
	--border-strong: var(--line-300);
	--border-brand: var(--amber-500);
	--focus-ring: var(--ink-700);
	--text-on-cta: var(--white);
	--motif-opacity: 0.07;
	--motif-width: 34%;

	/* A burgundi kiemelő (akciós címke, kedvezmény). */
	--psp-accent: var(--awb-custom_color_14, #752a32);
	--psp-accent-dark: var(--awb-custom_color_15, #5f222a);
	--psp-accent-fg: var(--amber-100);
	--psp-accent-ic: var(--awb-custom_color_25, #e8c27a);

	/* Az oldal kerete és a szekciók oldalsó térköze. */
	--psp-frame-pad: 14px;
	--psp-gutter: clamp(20px, 4vw, 56px);

	/* Betű. */
	--font-sans: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-display: var(--font-sans);
	--font-body: var(--font-sans);
	--font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;
	--text-2xs: 11px;
	--text-xs: 12px;
	--text-sm: 13.5px;
	--text-base: 16px;
	--text-md: 17px;
	--text-lg: 20px;
	--text-xl: 24px;
	--text-2xl: 30px;
	--text-3xl: 38px;
	--text-4xl: 48px;
	--text-5xl: 64px;
	--leading-tight: 1.1;
	--leading-snug: 1.25;
	--leading-normal: 1.55;
	--leading-relaxed: 1.7;
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-extrabold: 800;
	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.06em;
	--tracking-eyebrow: 0.14em;
	--tracking-wordmark: 0.18em;
	--font-display-size: var(--text-5xl);
	--font-display-weight: var(--weight-extrabold);
	--font-h1-size: var(--text-4xl);
	--font-h2-size: var(--text-3xl);
	--font-h3-size: var(--text-2xl);
	--font-h4-size: var(--text-xl);
	--font-body-size: var(--text-base);
	--font-small-size: var(--text-sm);
	--font-eyebrow-size: var(--text-xs);

	/* Térköz, lekerekítés, méretek. */
	--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;
	--space-20: 80px;
	--space-24: 96px;
	--space-32: 128px;
	--radius-xs: 6px;
	--radius-sm: 9px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-2xl: 28px;
	--radius-pill: 999px;
	--border-width: 1px;
	--border-width-strong: 2px;
	--container-max: 1280px;
	--container-narrow: 880px;
	--container-text: 62ch;
	--section-pad-y: var(--space-24);
	--section-pad-y-sm: var(--space-16);
	--gutter: var(--space-6);
	--control-height-sm: 36px;
	--control-height-md: 44px;
	--control-height-lg: 52px;

	/* Árnyék. */
	--shadow-none: none;
	--shadow-xs: 0 1px 2px rgba(39, 42, 51, 0.05);
	--shadow-sm: 0 1px 2px rgba(39, 42, 51, 0.05), 0 2px 6px rgba(39, 42, 51, 0.04);
	--shadow-md: 0 1px 2px rgba(39, 42, 51, 0.05), 0 8px 28px rgba(39, 42, 51, 0.07);
	--shadow-lg: 0 2px 4px rgba(39, 42, 51, 0.05), 0 18px 48px rgba(39, 42, 51, 0.1);
	--shadow-inset-press: inset 0 2px 4px rgba(39, 42, 51, 0.12);
	--ring-focus: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--focus-ring);
	--ring-selected: inset 0 0 0 2px var(--ink-700);

	/* Mozgás. */
	--duration-instant: 80ms;
	--duration-fast: 150ms;
	--duration-base: 220ms;
	--duration-slow: 280ms;
	--duration-panel: 320ms;
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: ease-in-out;
	--transition-control: background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
	--press-translate: translateY(1px);
}

/* A háttérmotívum szélessége a statikus oldal szerint. */
:root { --motif-width: 38%; }
@media (max-width: 1000px) { :root { --motif-width: 52%; } }
@media (max-width: 700px) { :root { --motif-width: 74%; } }

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 1ms;
		--duration-base: 1ms;
		--duration-slow: 1ms;
		--duration-panel: 1ms;
	}
}