/*
 * Equipment Hybrid site UI token contract.
 *
 * Per-site color, typography, spacing, radius, shadow, and container changes
 * belong here. Framework and component styles consume these semantic names
 * and must not introduce company- or material-named palette variables.
 *
 * Contract version: 1.0.0
 */

:root {
	/* Brand and interaction colors. */
	--color-brand-primary: #0b5798;
	--color-brand-primary-hover: #083f73;
	--color-brand-accent: #c8752a;
	--color-brand-accent-hover: #b95721;
	--color-brand-accent-strong: #e18a45;
	--color-brand-accent-text: #9a4f16;
	--color-brand-accent-soft: #e8c9a0;
	--color-link-primary: #0b5798;
	--color-link-primary-hover: #08477e;
	--color-link-secondary: #0b579d;
	--color-link-strong: #00539b;
	--color-support: #2e7fbd;

	/* Text, surfaces, borders, and inverse surfaces. */
	--color-text: #102033;
	--color-text-muted: #5d6c7f;
	--color-text-muted-soft: #607085;
	--color-text-muted-subtle: #627187;
	--color-text-muted-lighter: #667487;
	--color-heading-strong: #081f3d;
	--color-surface: #ffffff;
	--color-surface-subtle: #f7f8fa;
	--color-surface-soft: #f5f7fa;
	--color-surface-muted: #edf2f6;
	--color-border: #d9e0e8;
	--color-border-soft: #dde5ee;
	--color-border-muted: #dee6ef;
	--color-border-card-rest: rgba(8, 31, 61, 0.11);
	--color-background-inverse: #061f3b;
	--color-background-inverse-strong: #03182d;
	--color-background-inverse-deep: #05162b;
	--color-background-inverse-deepest: #041426;
	--color-background-inverse-muted: #0b3158;
	--color-background-inverse-raised: #0d3157;

	/* Type. */
	--font-heading: "Montserrat", "Segoe UI", Arial, sans-serif;
	--font-body: "Montserrat", "Segoe UI", Arial, sans-serif;
	--font-heading-cyrillic: Arial, "Helvetica Neue", "Liberation Sans", sans-serif;
	--font-body-cyrillic: Arial, "Helvetica Neue", "Liberation Sans", sans-serif;
	--font-size-hero: 56px;
	--font-size-page-title: 44px;
	--font-size-detail-title: 48px;
	--font-size-section: 32px;
	--font-size-subsection: 26px;
	--font-size-panel: 20px;
	--font-size-card: 18px;
	--font-size-small: 13px;

	/* Layout and spacing. */
	--layout-container: min(1360px, calc(100vw - 48px));
	--space-sm: 12px;
	--space-md: 18px;
	--space-lg: 28px;
	--space-xl: 44px;

	/* Shape, elevation, and decorative treatments. */
	--radius-card: 6px;
	--radius-control: 4px;
	--shadow-card: 0 14px 32px rgba(6, 31, 59, 0.07);
	--shadow-card-hover: 0 18px 38px rgba(6, 31, 59, 0.11);
	--shadow-card-interactive: 0 18px 40px rgba(6, 31, 59, 0.12);
	--shadow-raised: 0 18px 44px rgba(8, 31, 61, 0.08);
	--shadow-raised-hover: 0 24px 56px rgba(8, 31, 61, 0.14);
	--shadow-raised-hover-soft: 0 24px 56px rgba(8, 31, 61, 0.13);
	--shadow-raised-wide-hover: 0 24px 58px rgba(8, 31, 61, 0.14);
	--gradient-card-hover: linear-gradient(90deg, var(--color-brand-accent), var(--color-brand-accent-strong));
	--background-pattern-technical: linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

html[lang^="ru"] {
	--font-heading: var(--font-heading-cyrillic);
	--font-body: var(--font-body-cyrillic);
}

@media (max-width: 760px) {
	:root {
		--layout-container: calc(100vw - 28px);
		--font-size-hero: 36px;
		--font-size-page-title: 32px;
		--font-size-detail-title: 34px;
		--font-size-section: 26px;
		--font-size-subsection: 22px;
		--font-size-panel: 18px;
		--font-size-card: 17px;
	}
}