/* ============================================================
		GabionX — base: design tokens, reset, accessibility
		============================================================ */

:root {
	/* -- brand colors -- */
	--bg: #F3EFE7;
	--ink: #211E18;
	--green: #2BA24A;        /* fills, meshes, rules — never white text on it (3.3:1) */
	--green-dark: #238a3d;
	/* WCAG AA pair for the brand green: --green-cta carries white text (5.1:1),
	   --green-ink is green type on the cream bg (5.2:1). Plain --green fails both. */
	--green-cta: #1E7F38;
	--green-cta-hover: #18682D;
	--green-ink: #1B7433;
	--green-wash: rgba(43, 162, 74, .07);
	--green-wash-strong: rgba(43, 162, 74, .14);
	--green-border: rgba(43, 162, 74, .16);
	--dark: #0c1118;
	--charcoal: #16140F;
	--cream: #EDE8DE;
	--panel-light: #FBFAF6;
	--white: #ffffff;

	/* -- text-on-light opacity scale (normalized: was 12+ near-duplicate
				alpha values like .56/.58/.6/.62/.66/.7 scattered across the
				original inline styles) -- */
	--ink-85: rgba(33, 30, 24, .85);
	--ink-70: rgba(33, 30, 24, .7);
	--ink-58: rgba(33, 30, 24, .66); /* .58 measured 3.97:1 on --bg — below WCAG AA 4.5:1 for body text */
	--ink-40: rgba(33, 30, 24, .4);
	--ink-16: rgba(33, 30, 24, .16);
	--ink-10: rgba(33, 30, 24, .1);

	/* -- text-on-dark opacity scale -- */
	--cream-85: rgba(237, 232, 222, .85);
	--cream-62: rgba(237, 232, 222, .62);
	--cream-50: rgba(237, 232, 222, .5);
	--cream-40: rgba(237, 232, 222, .4);
	--cream-16: rgba(237, 232, 222, .16);

	--white-85: rgba(255, 255, 255, .85);
	--white-74: rgba(255, 255, 255, .74);
	--white-60: rgba(255, 255, 255, .6);
	--white-50: rgba(255, 255, 255, .5);
	--white-42: rgba(255, 255, 255, .42);
	--white-24: rgba(255, 255, 255, .24);
	--white-13: rgba(255, 255, 255, .13);

	/* -- typography -- */
	--font-sans: 'Manrope', sans-serif;
	--font-serif: 'Newsreader', 'Literata', serif;

	/* -- fluid spacing -- */
	--section-pad-y: clamp(96px, 13vh, 168px);
	--section-pad-y-sm: clamp(80px, 11vh, 128px);
	--section-pad-x: 7vw;
	--gutter: clamp(20px, 3.5vw, 32px);
	--head-mb: clamp(56px, 7vh, 80px);
	--gap-xs: 8px;
	--gap-sm: clamp(12px, 2vw, 20px);
	--gap-md: clamp(18px, 2.8vw, 32px);
	--gap-lg: clamp(32px, 4vw, 64px);
	--gap-xl: clamp(48px, 7vw, 110px);

	/* -- radius scale (normalized: the design mixed 3/4/6/8/12/13/14/16/20px
				near-arbitrarily; consolidated to one deliberate scale) -- */
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-full: 999px;

	/* -- shadow scale -- */
	--shadow-sm: 0 1px 2px rgba(33, 30, 24, .05), 0 28px 60px -32px rgba(33, 30, 24, .2);
	--shadow-md: 0 20px 44px rgba(0, 0, 0, .45);
	--shadow-lg: 0 32px 80px -40px rgba(12, 17, 24, .55);
	--shadow-xl: 0 30px 70px rgba(12, 17, 24, .22);

	/* -- motion -- */
	--ease: cubic-bezier(.16, .7, .3, 1);
	--dur-fast: .3s;
	--dur-base: .4s;
	--dur-slow: .6s;

	/* -- z-index scale -- */
	--z-nav: 5;
	--z-gallery-controls: 6;
	--z-callbar: 900;
	--z-gallery-detail: 9000;
	--z-gallery-close: 9200;
	--z-preloader: 9600;
	--z-grain: 2147483000;
}

/* mobile: side gutters and section rhythm at half the desktop scale —
		every padding built on these tokens follows automatically */
@media (max-width: 768px) {
	:root {
		--section-pad-x: 3.5vw;
		--section-pad-y: clamp(48px, 6.5vh, 84px);
		--section-pad-y-sm: clamp(40px, 5.5vh, 64px);
	}
}

/* ================= reset ================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	min-width: 370px;
	overflow-x: auto;
}

body {
	font-family: var(--font-sans);
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* only real font files render — no faux bold/italic (heaviest shipped Manrope is 700) */
	font-synthesis: none;
	min-width: 370px;
	margin: 0;
	/* clip (not hidden): same horizontal-leak protection, but it doesn't create a
			scroll container — position:sticky sections keep pinning to the viewport */
	overflow-x: clip;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

a,
button {
	touch-action: manipulation;
}

a,
button,
input {
	-webkit-tap-highlight-color: transparent;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

input {
	font: inherit;
	color: inherit;
}

/* the one deliberate !important: [hidden] is the JS state switch for the form
		"Дякуємо" swap — it must beat any component display rule, matching the
		platform's own semantics for the attribute */
[hidden] {
	display: none !important;
}

[id] {
	scroll-margin-top: 24px;
}

::selection {
	background: rgba(43, 162, 74, .3);
}

/* ================= accessibility ================= */
:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

[data-reveal] {
	will-change: opacity, transform;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* ================= shared keyframes ================= */
@keyframes gx-breathe {

	0%,
	100% {
		opacity: .12;
		filter: saturate(1.4) brightness(1.12);
	}

	50% {
		opacity: .58;
		filter: saturate(1.7) brightness(1.4);
	}
}

@keyframes gx-cue {

	0%,
	100% {
		transform: translateY(0);
		opacity: .5;
	}

	50% {
		transform: translateY(7px);
		opacity: 1;
	}
}

@keyframes gx-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(-180px, 90px, 0) scale(1.18);
	}
}

/* -- scrollbar (all devices): transparent track — the old cream track read as
      a white strip on dark pages — with the classic ink thumb on top -- */
html {
	scrollbar-color: rgba(33, 30, 24, .32) transparent;
}

::-webkit-scrollbar {
	width: 12px;
	background: transparent;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(33, 30, 24, .32);
	border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(33, 30, 24, .5);
}

/* -- film grain: unifying analog texture (static, cheap) -- */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: var(--z-grain);
	pointer-events: none;
	opacity: .028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}