/*
 * Obmir design tokens: fonts, colours, type scale, spacing.
 * Values come from the Figma variables (file L8GzZuU7BgOpjclytmLxMj).
 */

/* Geologica, variable weight, self-hosted (unicode ranges as on Google Fonts). */
@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geologica-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Geologica";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geologica-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;
}

/*
 * IBM Plex Sans Condensed Italic, as in the design (SIL OFL 1.1, assets/fonts/IBM-Plex-OFL.txt;
 * unmodified IBM files: Latin, Cyrillic and ₴). Regular for «Measure/Small» (13 px), Medium for
 * «Measure/Number» (15 px) and «Measure/Number L» (22 px). Every number is slanted, so the italic
 * files serve both font-style values: measure text is slanted without synthetic oblique, and an
 * inherited italic (e.g. inside <em>) does not slant it twice.
 */
@font-face {
	font-family: "IBM Plex Sans Condensed";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-condensed-italic.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans Condensed";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-condensed-italic.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans Condensed";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-condensed-medium-italic.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Sans Condensed";
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-sans-condensed-medium-italic.woff2") format("woff2");
}

:root {
	/* Colour */
	--c-paper: #f5f7f9;        /* page background */
	--c-sheet: #ffffff;        /* cards and fields */
	--c-graphite: #26323d;     /* text and lines */
	--c-graphite-soft: #56636f; /* secondary text */
	--c-hatch: #d3dae1;        /* fills and dividers */
	--c-line: #aeb9c4;         /* field borders */
	--c-ink: #3f3bc4;          /* actions and links */
	--c-ink-tint: #e9e8fb;     /* selection */
	--c-change: #e0432b;       /* change marks, error borders (only for changes and errors) */
	--c-change-text: #c1341d;  /* error text */
	--c-ink-hover: #322ea6;
	--c-hatch-line: #c2cbd4;   /* hatching lines of photo placeholders (Figma «Фото» 3:79) */

	/* Logo mark (inverted in the footer) */
	--c-logo-line: var(--c-graphite);
	--c-logo-arc: var(--c-ink);

	/* Fonts */
	--font-sans: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-measure: "IBM Plex Sans Condensed", "Geologica", system-ui, sans-serif;
	--ws-measure: normal;

	/* Type scale, mobile (desktop values below, from 1024 px) */
	--fs-display: 40px;  --lh-display: 44px;
	--fs-h2: 28px;       --lh-h2: 32px;
	--fs-h3: 20px;       --lh-h3: 26px;
	--fs-body: 17px;     --lh-body: 26px;
	--fs-small: 15px;    --lh-small: 22px;
	--fs-button: 16px;   --lh-button: 20px;
	--fs-label: 14px;    --lh-label: 18px;
	--fs-measure: 15px;  --lh-measure: 18px;
	--fs-measure-l: 22px; --lh-measure-l: 24px;
	--fs-measure-s: 13px; --lh-measure-s: 16px;

	--ls-display: -0.02em;
	--ls-h2: -0.015em;
	--ls-h3: -0.005em;

	/* Layout */
	--container: 1200px;
	--gutter: 16px;
	--header-h: 64px;
	--radius: 2px;
	--border: 1px solid var(--c-line);
	--border-strong: 1.5px solid var(--c-graphite);
	--control-h: 48px;
	--field-h: 52px;
	--focus-ring: 2px solid var(--c-ink);
	--contact-bar-h: 0px;
	/* The header sticks to the top (below the WP admin bar when it shows): sticky
	   columns and anchor jumps keep clear of it. */
	--header-offset: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px));
	--sticky-top: calc(var(--header-offset) + var(--space-5));

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
	}
}

@media (min-width: 1024px) {
	:root {
		--fs-display: 68px;  --lh-display: 72px;
		--fs-h2: 36px;       --lh-h2: 40px;
		--fs-h3: 22px;       --lh-h3: 28px;
		--fs-body: 18px;     --lh-body: 28px;
		--header-h: 80px;
	}
}