/**
 * iSolar Development — reset і базова типографіка.
 * Шкала й кольори беруться з tokens.css.
 */

/* ---------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--surface-page);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.admin-bar {
	--header-offset: 32px;
}

img,
svg,
video,
canvas,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

hr {
	border: 0;
	border-top: var(--border-width) solid var(--border-color);
	margin: var(--space-6) 0;
}

/* ---------------------------------------------------------------
 * Заголовки — Onest
 * ------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-3);
	color: var(--text-heading);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	text-wrap: balance;
}

/* Display / Onest 800 · 62 / 66 · -2 % */
h1,
.t-display {
	font-size: var(--fs-display);
	font-weight: var(--fw-black);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
}

/* H2 / Onest 700 · 40 / 46 · -1.5 % */
h2,
.t-h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
}

/* H3 / Onest 700 · 24 / 31 */
h3,
.t-h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
}

h4 {
	font-size: 1.25rem;
	line-height: 1.35;
}

h5 {
	font-size: 1.0625rem;
	line-height: 1.4;
}

h6 {
	font-size: var(--fs-small);
	line-height: 1.45;
}

/* ---------------------------------------------------------------
 * Текстові ролі
 * ------------------------------------------------------------- */

p {
	margin: 0 0 var(--space-3);
}

p:last-child {
	margin-bottom: 0;
}

/* Lead / Manrope 500 · 20 / 32 */
.t-lead {
	font-size: var(--fs-lead);
	font-weight: var(--fw-medium);
	line-height: var(--lh-lead);
	max-width: 62ch;
}

.t-small {
	font-size: var(--fs-small);
}

.t-muted {
	color: var(--text-muted);
}

/* Overline / Onest 700 · 13 · +22 % трекінг */
.t-overline {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--color-accent-ink);
	font-family: var(--font-display);
	font-size: var(--fs-overline);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-overline);
	line-height: 1.4;
	text-transform: uppercase;
}

/* Metric / Onest 800 · 68 / 68 · золото */
.t-metric {
	display: block;
	color: var(--color-accent);
	font-family: var(--font-display);
	font-size: var(--fs-metric);
	font-weight: var(--fw-black);
	line-height: var(--lh-metric);
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
}

/* Ейбрау-риска над заголовком секції — золота лінія з макета */
.t-rule::before {
	content: "";
	display: block;
	width: 96px;
	height: 3px;
	margin-bottom: var(--space-4);
	background-color: var(--color-accent);
}

strong,
b {
	font-weight: var(--fw-bold);
}

small {
	font-size: var(--fs-small);
}

blockquote {
	margin: var(--space-5) 0;
	padding-left: var(--space-4);
	border-left: 3px solid var(--color-accent);
	font-size: var(--fs-lead);
	font-weight: var(--fw-medium);
	line-height: var(--lh-lead);
}

blockquote cite {
	display: block;
	margin-top: var(--space-2);
	color: var(--text-muted);
	font-size: var(--fs-small);
	font-style: normal;
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	background-color: var(--c-cream-200);
}

pre {
	overflow-x: auto;
	padding: var(--space-4);
	background-color: var(--c-green-900);
	color: var(--text-on-dark);
}

pre code {
	padding: 0;
	background: none;
	color: inherit;
}

/* ---------------------------------------------------------------
 * Списки
 * ------------------------------------------------------------- */

ul,
ol {
	margin: 0 0 var(--space-3);
	padding-left: 1.25em;
}

li + li {
	margin-top: var(--space-1);
}

/* Список із золотими маркерами — для переліків переваг */
.list-marked {
	list-style: none;
	padding-left: 0;
}

.list-marked li {
	position: relative;
	padding-left: var(--space-4);
}

.list-marked li::before {
	content: "";
	position: absolute;
	top: 0.65em;
	left: 0;
	width: 8px;
	height: 8px;
	background-color: var(--color-accent);
}

/* ---------------------------------------------------------------
 * Посилання
 * ------------------------------------------------------------- */

a {
	color: var(--color-accent-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: color var(--dur) var(--ease);
}

a:hover,
a:focus-visible {
	color: var(--color-primary);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Інверсія: усе, що лежить на зеленому
 * ------------------------------------------------------------- */

.on-dark {
	color: var(--text-on-dark);
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5,
.on-dark h6 {
	color: var(--text-on-dark);
}

.on-dark .t-muted,
.on-dark .t-lead.t-muted {
	color: var(--text-on-dark-muted);
}

.on-dark .t-overline {
	color: var(--text-on-dark-accent);
}

.on-dark a {
	color: var(--text-on-dark-accent);
}

.on-dark a:hover,
.on-dark a:focus-visible {
	color: var(--text-on-dark);
}

.on-dark hr {
	border-top-color: var(--border-color-dark);
}

/* ---------------------------------------------------------------
 * Доступність
 * ------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-3);
	z-index: 999;
	padding: var(--space-2) var(--space-4);
	background-color: var(--color-accent);
	color: var(--c-green-900);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	text-decoration: none;
	transition: top var(--dur) var(--ease);
}

.skip-link:focus {
	top: var(--space-3);
}