/*
 * Design tokens — the ONE place for colors, fonts, sizes and spacing.
 * Source: design-reference/README.md ("Global Design Tokens") and the
 * bp(...) values in design-reference/source/*.dc.html.
 *
 * The prototypes use many near-identical colors; they are deliberately
 * merged into the short palette below (see PLAN.md, Stage 1 learnings).
 * Use only these — don't add new hex values in other files.
 *
 * Breakpoints (CSS variables can't be used inside @media, so these are
 * written as numbers in media queries — always use exactly these):
 *   mobile   < 768px                      (default styles)
 *   tablet   @media (min-width: 768px)
 *   desktop  @media (min-width: 1024px)
 */

/* Google Sans (SIL Open Font License, see assets/fonts/OFL.txt).
   One variable file per script, weights 400–700. */
@font-face {
	font-family: 'Google Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/google-sans-hebrew.woff2') format('woff2');
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
	font-family: 'Google Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/google-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Google Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/google-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ---- Colors ---- */

	/* Backgrounds */
	--c-cream: #FAF7F2;          /* page background, Home header */
	--c-white: #FFFFFF;          /* header on inner pages */
	--c-sand: #EFE8DC;           /* Awards, contact form, skeletons, row hover */
	--c-tan: #DCD4C6;            /* Services section */

	/* Text */
	--c-text: #1C1917;           /* headings, links, dark buttons */
	--c-body: #4A453C;           /* paragraphs */
	--c-muted: #6B6459;          /* small text, labels, inactive items, "sending" button */

	/* Accent */
	--c-accent: #B8895A;         /* rust: hover, big numbers, icons, lines */
	--c-accent-text: #8A6038;    /* deeper rust for SMALL rust text + focus ring (accessibility: 4.5:1 on cream/sand) */

	/* Lines */
	--c-line: #E6DFD2;           /* hairlines */
	--c-line-strong: #D8D0C0;    /* form field underline, award rows */

	/* Footer (dark) */
	--c-footer-bg: #17140F;
	--c-footer-muted: #A79E8E;   /* footer labels; also form placeholders */
	--c-footer-line: #322D24;
	/* footer text uses --c-sand */

	/* Messages */
	--c-notice: #F6E7DE;         /* form error notice background */

	/* ---- Type ---- */
	--font-sans: 'Google Sans', 'Product Sans', system-ui, sans-serif;
	--fw-regular: 400;           /* body */
	--fw-semibold: 600;          /* H1, eyebrows, buttons */
	--fw-bold: 700;              /* H2, H3 */

	/* Phones: nothing smaller than 16px (Tamar's QA, 2026-09-24) — the design's
	   smaller sizes come back from tablet up (see the 768px block below). */
	--fs-body: 16px;
	--lh-body: 1.85;
	--fs-small: 16px;
	--fs-eyebrow: 16px;
	--fs-button: 16px;
	--fs-tiny: 16px;             /* tiny uppercase labels (hero, award type, form field labels) */
	--fs-caps-phone: 14px;       /* English UPPERCASE labels on phones (capitals look bigger) — see base.css */
	--tracking-eyebrow: 0.1em;
	--tracking-eyebrow-wide: 0.14em; /* section eyebrows (Services, Awards) */
	--tracking-button: 0.12em;

	/* Headings — mobile values, grow below */
	--fs-h1: 28px;               /* page heading */
	--fs-h2: 24px;               /* section heading, e.g. Services */
	--fs-h3: 19px;               /* sub-heading, e.g. service category */

	/* ---- Layout & spacing ---- */
	--max-width: 1280px;
	--page-pad-x: 20px;          /* side gutter */
	--header-h: 60px;
	--section-pad-y: 48px;
	--gap: 32px;

	/* ---- Motion ---- */
	--ease-out: cubic-bezier(.16, .7, .24, 1);
	--dur-fast: 0.3s;
	--dur: 0.35s;
	--zoom-scale: 1.08;          /* photo thumbnail hover zoom (projects, press) */
	--dur-zoom: 0.7s;

	/* Soft dark glow behind white text on photos (Home slideshow) — keeps it
	   readable on bright photos. Wide and blurry, no tight edge (Tamar, 2026-10-22). */
	--shadow-on-photo: 0 0 28px color-mix(in srgb, var(--c-footer-bg) 30%, transparent),
		0 2px 56px color-mix(in srgb, var(--c-footer-bg) 25%, transparent);
}

@media (min-width: 768px) {
	:root {
		--fs-body: 15px;
		--fs-small: 14px;
		--fs-eyebrow: 13px;
		--fs-button: 12px;
		--fs-tiny: 11px;
		--fs-h1: 32px;
		--fs-h2: 27px;
		--page-pad-x: 40px;
		--header-h: 72px;
		--section-pad-y: 64px;
		--gap: 48px;
	}
}

@media (min-width: 1024px) {
	:root {
		--fs-h1: 37px;
		--fs-h2: 30px;
		--page-pad-x: 64px;
		--header-h: 81px;
		--section-pad-y: 80px;
		--gap: 64px;
	}
}