/**
 * iSolar Development — токени дизайн-системи.
 *
 * Джерело: «iSolar Design System» (design-examples/iSolar Design System.pdf).
 * Правила бренду, які тримаємо в коді:
 *   — максимум два фонові кольори на сторінку;
 *   — золото ніколи не фон великих текстових блоків (лише плашки, лінії, іконки);
 *   — кути прямі (0 px), тіней немає — замість них контур 1 px або золота лінія зверху;
 *   — логотип завжди золотий: на зеленому, крейдовому або білому.
 */

:root {
	/* ---------------------------------------------------------------
	 * 01 — Кольори
	 * ------------------------------------------------------------- */
	--c-green-900: #082017; /* футер, найтемніші блоки */
	--c-green-800: #0c3123; /* темні секції, картки */
	--c-green-700: #0e3d2b; /* основний бренд-колір */
	--c-green-600: #14533a; /* ховер кнопок, світліші плашки */
	--c-gold-500: #c79a3f; /* акценти, цифри, лінії */
	--c-gold-700: #9a7128; /* золото на світлому тлі */
	--c-cream-100: #f6f1e3; /* світлий фон сторінки */
	--c-cream-200: #ede6d2; /* розділювачі, лінії, контури */
	--c-white: #ffffff;

	/* Семантичні псевдоніми */
	--color-primary: var(--c-green-700);
	--color-primary-hover: var(--c-green-600);
	--color-accent: var(--c-gold-500);
	--color-accent-ink: var(--c-gold-700);

	/* Текст на світлому тлі */
	--text-heading: var(--c-green-700);
	--text-body: #17251e;
	--text-muted: #5f6d63;

	/* Текст на зеленому тлі */
	--text-on-dark: var(--c-white);
	--text-on-dark-muted: #a9bdb1;
	--text-on-dark-accent: var(--c-gold-500);

	/* Поверхні */
	--surface-page: var(--c-cream-100);
	--surface-card: var(--c-white);
	--surface-dark: var(--c-green-700);
	--surface-dark-deep: var(--c-green-900);
	--surface-field: var(--c-cream-200);

	/* Лінії */
	--border-color: var(--c-cream-200);
	--border-color-dark: rgba(255, 255, 255, 0.16);
	--border-width: 1px;

	/* ---------------------------------------------------------------
	 * 02 — Типографіка
	 * Onest — заголовки, цифри, ейбрау (500/600/700/800)
	 * Manrope — абзаци, підписи, інтерфейс (400/500/600/700)
	 * ------------------------------------------------------------- */
	--font-display: "Onest", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	/* Розміри зі шкали дизайн-системи, з плавним стисненням до мобільних.
	 * Верхні межі clamp() = значення з макета. */
	--fs-display: clamp(2.375rem, 1.05rem + 4.15vw, 3.875rem); /* 38 → 62 */
	--fs-h2: clamp(1.75rem, 1.09rem + 2.08vw, 2.5rem); /* 28 → 40 */
	--fs-h3: clamp(1.25rem, 1.14rem + 0.35vw, 1.5rem); /* 20 → 24 */
	--fs-lead: clamp(1.0625rem, 0.99rem + 0.26vw, 1.25rem); /* 17 → 20 */
	--fs-body: 1.0625rem; /* 17 */
	--fs-small: 0.9375rem; /* 15 */
	--fs-overline: 0.8125rem; /* 13 */
	--fs-metric: clamp(2.5rem, 1.27rem + 3.9vw, 4.25rem); /* 40 → 68 */

	--lh-display: 1.065; /* 62 / 66 */
	--lh-h2: 1.15; /* 40 / 46 */
	--lh-h3: 1.29; /* 24 / 31 */
	--lh-lead: 1.6; /* 20 / 32 */
	--lh-body: 1.7; /* 17 / 29 */
	--lh-metric: 1; /* 68 / 68 */

	--ls-display: -0.02em; /* -2 % */
	--ls-h2: -0.015em; /* -1.5 % */
	--ls-h3: -0.01em;
	--ls-overline: 0.22em; /* +22 % трекінг */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-black: 800;

	/* ---------------------------------------------------------------
	 * 03 — Сітка та ритм: 12 колонок, крок 8 px, нульові радіуси
	 * ------------------------------------------------------------- */
	--container-max: 1240px;
	--container-pad: clamp(1.25rem, 0.35rem + 4.5vw, 4.5rem); /* 20 → 72 */

	--space-1: 0.5rem; /* 8  */
	--space-2: 0.75rem; /* 12 */
	--space-3: 1rem; /* 16 */
	--space-4: 1.5rem; /* 24 */
	--space-5: 2rem; /* 32 */
	--space-6: 3rem; /* 48 */
	--space-7: 4rem; /* 64 */
	--space-8: 6rem; /* 96 */

	--section-pad: clamp(3.5rem, 1.6rem + 6.5vw, 6rem); /* 56 → 96 */
	--grid-gap: var(--space-5);

	--radius: 0; /* кути прямі — правило бренду */
	--icon-size: 32px; /* мінімальна висота знака й розмір іконок */

	--header-height: 76px;

	/* ---------------------------------------------------------------
	 * 06 — Патерн і зображення
	 * ------------------------------------------------------------- */
	--pattern-step: 60px; /* крок стільника */
	--pattern-opacity-dark: 0.07; /* на зеленому — 6–8 % */
	--pattern-opacity-light: 0.19; /* на крейдовому — золото 18–20 % */
	--diagonal-angle: 13deg; /* діагональний зріз 12–15° */

	/* Рух */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 0.22s;

	/* Шари */
	--z-pattern: 0;
	--z-header: 100;
	--z-social: 90;
	--z-modal: 200;
}

/* Брейкпоінти дизайн-системи: 480 · 768 · 1024 · 1280.
 * Сітки збираються через auto-fit, а не фіксовані колонки,
 * тому медіазапитів у темі мінімум. */

@media (max-width: 768px) {
	:root {
		--header-height: 64px;
		--grid-gap: var(--space-4);
	}
}