/*
 * DreamFast Studio — base: fonts, tokens, reset, typography.
 * Design source: concept 02 "העבודות במרכז" (dark editorial + lime).
 */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
	font-family: "Heebo Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/heebo-hebrew-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
	font-family: "Heebo Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/heebo-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
	font-family: "Manrope Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
	font-family: "Manrope Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
}

/* ---------- Tokens ---------- */
:root {
	--ink: #101b30;
	--muted: #a8ada4;
	--line: #313430;
	--blue: #2858f5;
	--blue-dark: #173ecb;
	--lime: #caff3d;
	--surface: #0b0d0b;
	--surface-2: #191b18;
	--text: #f3f4ef;
	--radius: 24px;
	--shell: min(1320px, calc(100vw - 72px));
	--font-body: "Heebo Variable", Heebo, "Arial Hebrew", Arial, sans-serif;
	/* Manrope has no Hebrew glyphs — Heebo follows it so Hebrew text in
	   accent-font elements renders correctly instead of falling to Arial. */
	--font-accent: "Manrope Variable", Manrope, "Heebo Variable", Heebo, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, ::before, ::after {
	box-sizing: border-box;
}
body {
	margin: 0;
}
/* Like the source design: only top margins are reset, so headings and
   paragraphs keep their natural bottom spacing. */
h1, h2, h3, h4, h5, h6, p, figure, blockquote {
	margin-block-start: 0;
}
img, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
}
a {
	color: inherit;
	text-decoration: none;
}
/* Visible keyboard focus for every interactive element (accessibility). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
	border-radius: 3px;
}
button, input, textarea, select {
	font: inherit;
	color: inherit;
}
html {
	scroll-behavior: smooth;
}
/* Anchor targets stop below the sticky header (84px) with breathing room. */
[id] {
	scroll-margin-top: 104px;
}
@media (width <= 760px) {
	[id] {
		scroll-margin-top: 92px;
	}
}
@media (prefers-reduced-motion: reduce) {
	*, ::before, ::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ---------- Typography & page ---------- */
body {
	color: var(--text);
	background: var(--surface);
	font-family: var(--font-body);
	font-weight: 400;
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	overflow-x: clip;
}
h1, h2 {
	font-variation-settings: "wght" 700;
}
::selection {
	color: #fff;
	background: rgb(49, 93, 255);
}
:focus-visible {
	outline: rgb(255, 184, 77) solid 3px;
	outline-offset: 3px;
}

/* ---------- Layout shell ---------- */
.section-shell {
	width: var(--shell);
	margin-inline: auto;
}

/* Screen-reader only helper (skip link etc.) */
.screen-reader-text {
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}
.skip-link:focus {
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 100;
	inset-inline-start: 16px;
	top: 12px;
	background: var(--lime);
	color: #101110;
	padding: 12px 18px;
	font-weight: 700;
}

@media (width <= 1120px) {
	:root { --shell: min(100% - 48px, 940px); }
}
@media (width <= 1040px) {
	:root { --shell: min(100% - 40px, 860px); }
}
@media (width <= 760px) {
	:root { --shell: calc(100% - 32px); --radius: 18px; }
}