/*
 * IZB Nordic: tokens and base styles.
 * Every value comes from DESIGN.md; frontmatter keys map 1:1 to --izb-* properties
 * (colors.green -> --izb-green, rounded.panel -> --izb-radius-panel, spacing.section -> --izb-space-section).
 */

:root {
	/* Colors */
	--izb-sand: #F7F3EA;
	--izb-paper: #FFFFFF;
	--izb-ink: #1F2A2E;
	--izb-ink-2: #4B5652;
	--izb-line: #E3DACA;
	--izb-green: #1F5E4B;
	--izb-green-deep: #15463A;
	--izb-green-tint: #EEF3EF;
	--izb-green-ink-1: #E4EEE9;
	--izb-green-ink-2: #C9DCD4;
	--izb-gold: #C8A45A;
	--izb-gold-hover: #D6B571;
	--izb-gold-ink: #7E611F;
	--izb-gold-on-dark: #E6CE96;
	--izb-gold-tint: #F4ECDA;
	--izb-warn-tint: #F8E4DE;
	--izb-warn-ink: #8A3424;
	--izb-selection: #E9DDBE;
	--izb-scrollbar: #B9AE98;
	/* Translucent white on green surfaces */
	--izb-on-dark-wash: rgba(255, 255, 255, .08);
	--izb-on-dark-line: rgba(255, 255, 255, .12);
	--izb-on-dark-line-2: rgba(255, 255, 255, .14);
	--izb-on-dark-outline: rgba(255, 255, 255, .4);
	--izb-scrim: rgba(21, 70, 58, .4);

	/* Typography */
	--izb-font-head: "Bricolage Grotesque", "Segoe UI", sans-serif;
	--izb-font-body: "Source Sans 3", "Segoe UI", sans-serif;
	--izb-font-arabic: "Amiri", serif;

	/* Radii */
	--izb-radius-xs: 8px;
	--izb-radius-sm: 10px;
	--izb-radius-md: 12px;
	--izb-radius-photo: 14px;
	--izb-radius-panel: 20px;
	--izb-radius-block: 24px;

	/* Spacing */
	--izb-space-gutter: 16px;
	--izb-space-gap: 20px;
	--izb-space-panel: 24px;
	--izb-space-section: 56px;
	--izb-space-band: 64px;
	--izb-space-footer: 72px;

	/* Elevation, motion, photo grade */
	--izb-shadow: 0 1px 2px rgba(31, 42, 46, .06), 0 8px 24px -12px rgba(31, 42, 46, .18);
	--izb-shadow-mega: 0 24px 40px -24px rgba(31, 42, 46, .28);
	--izb-ease: cubic-bezier(.16, 1, .3, 1);
	--izb-grade: saturate(.78) sepia(.2) contrast(.94) brightness(1.04) hue-rotate(-6deg);

	/* Focus ring: green on light surfaces, gold on green surfaces (see .izb-on-green) */
	--izb-focus: var(--izb-green);

	color-scheme: light;
	accent-color: var(--izb-green);
}

/* Green surfaces switch the focus ring to gold */
.topbar,
.site-footer,
.izb-on-green {
	--izb-focus: var(--izb-gold);
}

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

html { scrollbar-color: var(--izb-scrollbar) var(--izb-sand); }

body {
	margin: 0;
	background: var(--izb-sand);
	color: var(--izb-ink);
	font: 400 17px/1.6 var(--izb-font-body);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--izb-selection); color: var(--izb-ink); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--izb-green); }

:focus-visible {
	outline: 3px solid var(--izb-focus);
	outline-offset: 3px;
	border-radius: 6px;
}

h1, h2, h3 {
	font-family: var(--izb-font-head);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.015em;
	margin: 0;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

img { display: block; max-width: 100%; height: auto; }

[lang="ar"] { font-family: var(--izb-font-arabic); }

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

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 12px 18px;
	border-radius: var(--izb-radius-md);
	background: var(--izb-paper);
	color: var(--izb-green);
	font-weight: 600;
	box-shadow: var(--izb-shadow);
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}