/* ==========================================================================
   Csokonai — design tokenek
   Minden szín, betűméret és térköz egy helyen. A komponensek csak ezekre
   hivatkoznak, így az arculat egyetlen fájlból hangolható.
   ========================================================================== */

:root {
	/* --- Alapszínek (a látványtervből) ------------------------------------ */
	--csk-cream:        #F5F0E6;
	--csk-cream-deep:   #EDE4D3;
	--csk-gold:         #B8965A;
	--csk-gold-deep:    #96773F;
	--csk-gold-soft:    #D8C39A;
	--csk-dark:         #1B1917;
	--csk-dark-soft:    #2B2724;
	--csk-white:        #FFFFFF;

	/* --- Szerepkörök ------------------------------------------------------- */
	--csk-bg:           var(--csk-cream);
	--csk-bg-alt:       var(--csk-white);
	--csk-bg-invert:    var(--csk-dark);
	--csk-text:         var(--csk-dark);
	--csk-text-invert:  #F3EEE4;
	--csk-muted:        #6E655A;
	--csk-muted-invert: #A79C8D;
	--csk-accent:       var(--csk-gold);
	--csk-line:         rgba(27, 25, 23, 0.14);
	--csk-line-invert:  rgba(243, 238, 228, 0.18);

	/* Állapotok — az űrlapokhoz és a foglaláshoz */
	--csk-ok:           #3F7D52;
	--csk-warn:         #B8763A;
	--csk-error:        #A8402F;

	/* --- Betűcsaládok ------------------------------------------------------ */
	--csk-font-display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
	--csk-font-accent:  "Instrument Serif", Georgia, "Times New Roman", serif;
	--csk-font-body:    "Lora", Georgia, "Times New Roman", serif;
	--csk-font-hand:    "Caveat", "Segoe Script", cursive;
	--csk-font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* --- Betűméretek -------------------------------------------------------
	   clamp(): mobil minimum, ideális érték a nézetablak arányában, asztali
	   maximum. Így nem kell töréspontonként újraírni a tipográfiát.          */
	--csk-fs-hero:  clamp(2.75rem, 1.6rem + 5.6vw, 6.5rem);
	--csk-fs-h1:    clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
	--csk-fs-h2:    clamp(1.75rem, 1.3rem + 2.1vw, 2.85rem);
	--csk-fs-h3:    clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);
	--csk-fs-h4:    clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
	--csk-fs-lead:  clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	--csk-fs-body:  1.0625rem;
	--csk-fs-small: 0.9375rem;
	--csk-fs-micro: 0.8125rem;

	--csk-lh-tight: 1.04;
	--csk-lh-snug:  1.25;
	--csk-lh-body:  1.7;

	--csk-ls-display: 0.01em;
	--csk-ls-caps:    0.16em;

	/* --- Térközök ---------------------------------------------------------- */
	--csk-space-3xs: 0.25rem;
	--csk-space-2xs: 0.5rem;
	--csk-space-xs:  0.75rem;
	--csk-space-sm:  1rem;
	--csk-space-md:  1.5rem;
	--csk-space-lg:  2.25rem;
	--csk-space-xl:  3.5rem;
	--csk-space-2xl: 5rem;
	--csk-space-3xl: 7.5rem;

	/* Szekciók függőleges levegője — mobilon szűkebb */
	--csk-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

	/* --- Szélességek ------------------------------------------------------- */
	--csk-container:      1240px;
	--csk-container-wide: 1440px;
	--csk-container-text: 68ch;
	--csk-gutter:         clamp(1.25rem, 0.5rem + 3vw, 3rem);

	/* --- Forma ------------------------------------------------------------- */
	--csk-radius-sm: 3px;
	--csk-radius:    6px;
	--csk-radius-lg: 14px;
	--csk-radius-pill: 999px;

	--csk-shadow-sm: 0 1px 2px rgba(27, 25, 23, 0.06), 0 2px 8px rgba(27, 25, 23, 0.05);
	--csk-shadow:    0 2px 4px rgba(27, 25, 23, 0.06), 0 12px 32px rgba(27, 25, 23, 0.09);
	--csk-shadow-lg: 0 4px 8px rgba(27, 25, 23, 0.07), 0 28px 64px rgba(27, 25, 23, 0.14);

	/* --- Mozgás ------------------------------------------------------------ */
	--csk-ease:      cubic-bezier(0.2, 0.6, 0.25, 1);
	--csk-dur-fast:  140ms;
	--csk-dur:       240ms;
	--csk-dur-slow:  420ms;

	/* --- Rétegek ----------------------------------------------------------- */
	--csk-z-header:  100;
	--csk-z-drawer:  200;
	--csk-z-overlay: 300;

	/* Fejléc magassága — a sticky pozicionáláshoz és a scroll-margin-hoz */
	--csk-header-h: 74px;
}

@media (min-width: 1024px) {
	:root {
		--csk-header-h: 88px;
	}
}

/* A sötét szekciók ugyanazokat a szerepköröket kapják, fordított értékekkel.
   Így minden komponens változtatás nélkül működik sötét háttéren is. */
.csk-invert {
	--csk-bg:      var(--csk-dark);
	--csk-bg-alt:  var(--csk-dark-soft);
	--csk-text:    var(--csk-text-invert);
	--csk-muted:   var(--csk-muted-invert);
	--csk-line:    var(--csk-line-invert);

	background-color: var(--csk-bg);
	color: var(--csk-text);
}

/* Mozgáscsökkentés: aki kéri, az ne kapjon animációt. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--csk-dur-fast: 1ms;
		--csk-dur:      1ms;
		--csk-dur-slow: 1ms;
	}
}