/* =========================================================
   Dania Elixir — משתנים ואיפוס
   ערכת צבעים: אספרסו, חום, קרם וזהב.
   הערה: הערכים הסופיים מוזרקים מלוח הבקרה (inc/enqueue.php).
   ========================================================= */

:root {
	/* --- זהות --- */
	--de-bg: #F6F1E8;
	--de-surface: #FFFDF9;
	--de-cream: #EDE3D5;
	--de-beige: #D4C1A9;
	--de-brown: #4A3325;
	--de-espresso: #24170F;
	--de-black: #0E0C0B;
	--de-gold: #A77B4D;
	--de-gold-light: #D6B98F;
	--de-text: #281F19;
	--de-muted: #75675C;
	--de-border: rgba(167, 123, 77, 0.24);
	--de-success: #315D43;

	/* --- גופנים --- */
	--de-font-head: 'Heebo', 'Assistant', system-ui, sans-serif;
	--de-font-body: 'Assistant', 'Heebo', system-ui, sans-serif;
	--de-font-latin: 'Cormorant Garamond', Georgia, serif;

	/* --- מקנה גופן --- */
	--de-fs-xs: 0.75rem;
	--de-fs-sm: 0.8125rem;
	--de-fs-base: 0.95rem;
	--de-fs-md: 1.0625rem;
	--de-fs-lg: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	--de-fs-xl: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
	--de-fs-2xl: clamp(1.8rem, 1.2rem + 2.5vw, 3rem);
	--de-fs-3xl: clamp(2.2rem, 1.4rem + 3.6vw, 4rem);

	/* --- מרווחים --- */
	--de-sp-1: 4px;
	--de-sp-2: 8px;
	--de-sp-3: 12px;
	--de-sp-4: 16px;
	--de-sp-5: 24px;
	--de-sp-6: 32px;
	--de-sp-7: 48px;
	--de-sp-8: 64px;
	--de-section: clamp(56px, 7vw, 112px);
	--de-container: 1200px;
	--de-gutter: clamp(16px, 4vw, 40px);

	/* --- פינות וצללים --- */
	--de-r-sm: 6px;
	--de-r: 10px;
	--de-r-lg: 16px;
	--de-r-pill: 999px;
	--de-shadow-sm: 0 1px 2px rgba(36, 23, 15, .04), 0 6px 18px rgba(36, 23, 15, .05);
	--de-shadow: 0 12px 40px rgba(36, 23, 15, .08);
	--de-shadow-lg: 0 28px 70px rgba(36, 23, 15, .16);

	/* --- תנועה --- */
	--de-anim-dur: 700ms;
	--de-anim-dist: 26px;
	--de-ease: cubic-bezier(.22, .61, .36, 1);
	--de-ease-out: cubic-bezier(.16, 1, .3, 1);
	--de-t-fast: 180ms var(--de-ease);
	--de-t: 320ms var(--de-ease);

	--de-header-h: 76px;
	--de-z-header: 200;
	--de-z-drawer: 400;
	--de-z-toast: 600;
}

/* --- איפוס --- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--de-bg);
	color: var(--de-text);
	font-family: var(--de-font-body);
	font-size: var(--de-fs-base);
	line-height: 1.8;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
	font-family: var(--de-font-head);
	font-weight: 600;
	line-height: 1.28;
	margin: 0 0 var(--de-sp-3);
	letter-spacing: -0.01em;
	color: var(--de-espresso);
}
p { margin: 0 0 var(--de-sp-4); }
p:last-child { margin-bottom: 0; }

:focus-visible {
	outline: 2px solid var(--de-gold);
	outline-offset: 3px;
	border-radius: var(--de-r-sm);
}

::selection { background: var(--de-gold-light); color: var(--de-espresso); }

@supports (scrollbar-color: auto) {
	html { scrollbar-color: var(--de-gold-light) var(--de-cream); scrollbar-width: thin; }
}