/* ZAYO — tokens, reset, utilitare de bază. Sursa de adevăr pentru culori/spacing. */

:root {
	/* Neutre */
	--zy-ink: #14161a;
	--zy-slate: #3f4550;
	--zy-muted: #686f7c;
	--zy-muted-soft: #9ca3af;
	--zy-line: #e7e5e2;
	--zy-line-strong: #d8d4ce;
	--zy-paper: #fbf9f7;
	--zy-white: #ffffff;
	--zy-surface-2: #f3f1ee;

	/* Portocaliu */
	--zy-orange: #f3701a;
	--zy-orange-600: #dd5f10;
	--zy-orange-700: #c2510c;
	--zy-orange-800: #a6420a;
	--zy-orange-tint: #fff1e6;

	/* Semantice */
	--zy-success: #137a4b;
	--zy-success-tint: #e5f5ee;
	--zy-warning: #8a5a00;
	--zy-warning-tint: #fdf1de;
	--zy-danger: #b3261e;
	--zy-danger-tint: #fbeae9;

	--zy-focus: var(--zy-ink);

	/* Tipografie */
	--zy-font-text: "Inter", -apple-system, "Segoe UI", sans-serif;
	--zy-font-display: "Plus Jakarta Sans", "Inter", sans-serif;

	--zy-fs-2xs: 12px;
	--zy-fs-xs: 13px;
	--zy-fs-sm: 14px;
	--zy-fs-base: 16px;
	--zy-fs-md: 17px;
	--zy-fs-lg: clamp(18px, 1.4vw + 14px, 20px);
	--zy-fs-xl: clamp(22px, 2vw + 16px, 26px);
	--zy-fs-2xl: clamp(26px, 3vw + 16px, 34px);
	--zy-fs-3xl: clamp(32px, 4vw + 16px, 46px);
	--zy-fs-4xl: clamp(40px, 5vw + 16px, 64px);
	--zy-fs-5xl: clamp(44px, 6vw + 16px, 80px);

	/* Spacing (bază 4px) */
	--zy-space-1: 4px;
	--zy-space-2: 8px;
	--zy-space-3: 12px;
	--zy-space-4: 16px;
	--zy-space-5: 20px;
	--zy-space-6: 24px;
	--zy-space-8: 32px;
	--zy-space-10: 40px;
	--zy-space-12: 48px;
	--zy-space-16: 64px;
	--zy-space-20: 80px;
	--zy-space-24: 96px;

	--zy-gutter: clamp(16px, 4vw, 32px);
	--zy-section-y: clamp(56px, 7vw, 112px);
	--zy-section-y-sm: clamp(40px, 5vw, 72px);

	--zy-container: 1280px;
	--zy-container-wide: 1440px;
	--zy-container-prose: 720px;
	--zy-container-form: 560px;

	/* Formă */
	--zy-radius-2xs: 6px;
	--zy-radius-xs: 10px;
	--zy-radius-control: 10px;
	--zy-radius-sm: 14px;
	--zy-radius-md: 18px;
	--zy-radius-lg: 26px;
	--zy-radius-pill: 999px;

	/* Umbre */
	--zy-shadow-xs: 0 1px 2px rgba(20, 22, 26, 0.06);
	--zy-shadow-sm: 0 2px 8px rgba(20, 22, 26, 0.08);
	--zy-shadow-md: 0 8px 24px rgba(20, 22, 26, 0.12);
	--zy-shadow-lg: 0 16px 48px rgba(20, 22, 26, 0.16);

	/* Mișcare */
	--zy-dur-fast: 120ms;
	--zy-dur: 200ms;
	--zy-dur-slow: 320ms;
	--zy-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
	--zy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--zy-tap: 44px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Reset minim */
*, *::before, *::after { box-sizing: border-box; }
body {
	background: var(--zy-paper);
	color: var(--zy-ink);
	font-family: var(--zy-font-text);
	font-size: var(--zy-fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--zy-font-display);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--zy-ink);
}
a { color: var(--zy-orange-700); text-decoration: none; }
a:hover { color: var(--zy-orange-800); }

:focus-visible {
	outline: 3px solid var(--zy-focus);
	outline-offset: 2px;
}

/* Container / secțiune */
.zy-container {
	width: 100%;
	max-width: var(--zy-container);
	margin-inline: auto;
	padding-inline: var(--zy-gutter);
}
.zy-container--wide { max-width: var(--zy-container-wide); }
.zy-container--prose { max-width: var(--zy-container-prose); }
.zy-container--form { max-width: var(--zy-container-form); }

.zy-section { padding-block: var(--zy-section-y); }
.zy-section--sm { padding-block: var(--zy-section-y-sm); }

.zy-section-heading { max-width: 60ch; margin-bottom: var(--zy-space-8); }
.zy-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--zy-space-2);
	font-size: var(--zy-fs-2xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zy-orange-700);
}
.zy-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--zy-orange);
}
.zy-lead { font-size: var(--zy-fs-lg); color: var(--zy-slate); max-width: 46ch; }
.zy-meta { font-size: var(--zy-fs-xs); color: var(--zy-muted); }

/* Butoane */
.zy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--zy-space-2);
	min-height: var(--zy-tap);
	padding: 0 var(--zy-space-6);
	border-radius: var(--zy-radius-pill);
	font-family: var(--zy-font-text);
	font-weight: 600;
	font-size: var(--zy-fs-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform var(--zy-dur-fast) var(--zy-ease), box-shadow var(--zy-dur-fast) var(--zy-ease), background var(--zy-dur) var(--zy-ease);
}
.zy-btn--primary {
	background: var(--zy-orange-700);
	color: var(--zy-white);
	box-shadow: var(--zy-shadow-sm);
}
.zy-btn--primary:hover { background: var(--zy-orange-800); color: var(--zy-white); transform: translateY(-2px); box-shadow: var(--zy-shadow-md); }
.zy-btn--primary:active { transform: translateY(0); box-shadow: var(--zy-shadow-xs); }
.zy-btn--ghost {
	background: transparent;
	color: var(--zy-ink);
	border-color: var(--zy-line-strong);
}
.zy-btn--ghost:hover { border-color: var(--zy-ink); color: var(--zy-ink); }
.zy-btn--full { width: 100%; }
.zy-btn:disabled, .zy-btn[aria-disabled="true"] {
	opacity: 0.55;
	filter: grayscale(0.3);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

/* Card, badge, chip */
.zy-card {
	background: var(--zy-white);
	border-radius: var(--zy-radius-md);
	box-shadow: var(--zy-shadow-sm);
	transition: box-shadow var(--zy-dur) var(--zy-ease), transform var(--zy-dur) var(--zy-ease);
}
.zy-card:hover { box-shadow: var(--zy-shadow-md); }

.zy-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--zy-fs-2xs);
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--zy-radius-xs);
	background: var(--zy-surface-2);
	color: var(--zy-ink);
}
.zy-badge--sale { background: var(--zy-orange-700); color: var(--zy-white); }
.zy-badge--success { background: var(--zy-success-tint); color: var(--zy-success); }
.zy-badge--warning { background: var(--zy-warning-tint); color: var(--zy-warning); }
.zy-badge--danger { background: var(--zy-danger-tint); color: var(--zy-danger); }

.zy-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--zy-fs-xs);
	padding: 6px 14px;
	border-radius: var(--zy-radius-pill);
	background: var(--zy-surface-2);
	color: var(--zy-slate);
	border: 1px solid var(--zy-line);
}

.zy-stock--in { color: var(--zy-success); }
.zy-stock--low { color: var(--zy-warning); }
.zy-stock--out { color: var(--zy-danger); }

.zy-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Corectare overflow orizontal la .alignwide / .alignfull cu root padding aware alignments */
.alignwide { margin-inline: calc(-1 * var(--zy-gutter)); width: calc(100% + 2 * var(--zy-gutter)); }