/* ==========================================================================
   Design tokens — the only file that changes per project.
   Every component reads these variables; nothing else hard-codes a color,
   font, size or spacing value.
   ========================================================================== */
/* Brand font: Leon (licensed). */
@font-face { font-family: "Leon"; src: url("../fonts/Leon-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Leon"; src: url("../fonts/Leon-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Leon"; src: url("../fonts/Leon-Heavy.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
	/* Colors */
	--color-primary: #00112f;      /* כחול ראשי */
	--color-primary-contrast: #ffffff;
	--color-secondary: #a872ff;    /* סגול ראשי */
	--color-accent: #ffa9ce;       /* ורוד משלים */
	--color-bg: #f9f8f9;           /* לבן */
	--color-surface: #f2eff7;
	--color-surface-dark: #1e2647; /* לבן על כחול 8% */
	--gradient-brand: linear-gradient(164deg, #ffe5fe 3%, #a872ff 97%);
	--color-text: #00112f;
	--color-text-muted: #5a6270;
	--color-border: #dfe3e8;
	--color-focus: #a872ff;
	--color-link: #6a2fd1;         /* purple dark enough for text on light backgrounds (AA) */

	/* Typography — Hebrew-first system stack until a project font is set */
	--font-heading: "Leon", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-body: "Leon", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--weight-regular: 400;
	--weight-bold: 700;
	--weight-heavy: 900;
	--line-height-body: 1.45;
	--line-height-heading: 1.02;

	/* Fluid type scale: min at 360px, max at 1440px */
	--text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
	--text-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	--text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
	--text-xl: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
	--text-2xl: clamp(1.625rem, 1.4rem + 1vw, 2.3rem);
	--text-3xl: clamp(2rem, 1.6rem + 1.75vw, 3.25rem);

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--section-gap: clamp(3rem, 2rem + 4vw, 6rem);

	/* Shape */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 24px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.1);
	--shadow-md: 0 8px 24px rgb(16 24 40 / 0.08);
	--border-width: 1px;

	/* Layout */
	/* Same proportions on every screen: the content is always ~90% of the
	   viewport, so large screens don't get a narrow column in the middle. */
	--gutter: clamp(1rem, 5vw, 6rem);
	--container-max: 2000px;
	--container-narrow: 760px;
	--header-height: 72px;

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
}

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