/**
 * Project Box design tokens.
 * Brand colours sampled from logo.png. See CLAUDE.md.
 */

/* Self-hosted variable fonts (OFL, @fontsource-variable). Greek, Cyrillic (Bulgarian) + Latin subsets. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-cyrillic-wght.woff2") format("woff2-variations");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Noto Serif";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/noto-serif-cyrillic-wght.woff2") format("woff2-variations");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-greek-wght.woff2") format("woff2-variations");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/inter-latin-wght.woff2") format("woff2-variations");
	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;
}

@font-face {
	font-family: "Noto Serif";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/noto-serif-greek-wght.woff2") format("woff2-variations");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "Noto Serif";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url("../fonts/noto-serif-latin-wght.woff2") format("woff2-variations");
	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 {
	/* Brand */
	--pb-blue: #117ac6;        /* primary (logo box fill) - AA on white for normal text (4.55:1) */
	--pb-blue-deep: #005eb0;   /* links, headings, hover ("PROJECT" lettering) */
	--pb-blue-ink: #0b3d66;    /* dark brand surface */
	--pb-blue-tint: #e8f2fa;   /* subtle blue background */
	--pb-green: #8dc85a;       /* accents only - not for text on white */
	--pb-green-deep: #4a7c35;  /* green text on white ("BOX" lettering) */
	--pb-green-tint: #eef6e6;

	/* Neutrals */
	--pb-white: #ffffff;
	--pb-bg: #ffffff;
	--pb-bg-soft: #f6f7f8;
	--pb-line: #e5e7eb;
	--pb-line-strong: #d1d5db;
	--pb-muted: #6b7280;
	--pb-text: #1f2937;
	--pb-ink: #111827;
	--pb-warn: #8a5a00;
	--pb-warn-tint: #fcf0d4;

	/* Typography: Inter (text/UI) + Noto Serif (headings; sturdier than the Display cut, client feedback) */
	--pb-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	--pb-font-display: "Noto Serif", Georgia, "Times New Roman", serif;
	--pb-fs-xs: 0.8125rem;   /* 13 */
	--pb-fs-sm: 0.875rem;    /* 14 */
	--pb-fs-md: 1rem;        /* 16 */
	--pb-fs-lg: 1.125rem;    /* 18 */
	--pb-fs-xl: 1.375rem;    /* 22 */
	--pb-fs-2xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
	--pb-fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--pb-lh: 1.6;
	--pb-lh-tight: 1.2;

	/* Spacing (4px base) */
	--pb-s1: 0.25rem;
	--pb-s2: 0.5rem;
	--pb-s3: 0.75rem;
	--pb-s4: 1rem;
	--pb-s5: 1.5rem;
	--pb-s6: 2rem;
	--pb-s7: 3rem;
	--pb-s8: 4rem;
	--pb-s9: 6rem;

	/* Shape & depth */
	--pb-radius-sm: 4px;
	--pb-radius: 8px;
	--pb-radius-lg: 16px;
	--pb-radius-pill: 999px;
	--pb-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
	--pb-shadow: 0 4px 16px rgba(17, 24, 39, 0.08);
	--pb-shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.14);

	/* Layout */
	--pb-container: 1280px;
	--pb-container-narrow: 760px;
	--pb-gutter: 1rem;
	--pb-header-h: 64px;
	--pb-focus: 0 0 0 2px #ffffff, 0 0 0 5px var(--pb-blue-deep); /* Solid, >= 3:1 (WCAG 1.4.11). */
	--pb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 640px) {
	:root {
		--pb-gutter: 1.5rem;
	}
}

@media (min-width: 960px) {
	:root {
		--pb-gutter: 2rem;
		--pb-header-h: 76px;
	}
}