/*
 * DISTRIKT design tokens — the ONLY place colours, fonts, type scale, spacing
 * and breakpoints are defined (roadmap §12.1). Everything else uses var(--…).
 * Harvested from the Elementor build (all templates + custom CSS), de-duplicated
 * and named semantically. Mirrored in theme.json (editor palette / font families).
 *
 * Breakpoints (Elementor kit): tablet ≤ 1024px, mobile ≤ 767px.
 * CSS custom properties can't be used in media queries, so the two numbers
 * below are repeated in @media rules — keep them in sync (1024 / 767).
 */
:root {
	/* ── Chroma (RGB channels; alpha applied at use: rgb(var(--rgb-gold) / .32)) ── */
	--rgb-black: 0 0 0;
	--rgb-white: 255 255 255;
	--rgb-cream: 247 241 231;   /* #F7F1E7 — headings, primary text on dark (also #F5F1EA hovers) */
	--rgb-gold: 216 193 155;    /* #D8C19B — eyebrows, accents, borders */
	--rgb-bronze: 155 129 86;   /* #9B8156 — tinted button fill (at .21) */

	/* ── Solid colours ── */
	--c-bg: #000;
	--c-white: #fff;
	--c-cream: #F7F1E7;
	--c-gold: #D8C19B;
	--c-taupe: #8E8578;         /* small meta / labels */
	--c-sand: #D8D0C2;          /* lead copy */
	--c-sand-3: #CFC6B8;        /* hero spotlight copy */
	--c-sand-4: #BDB4A6;        /* footer copy */
	--c-paper: #E9E4DA;         /* long-form post content */

	/* ── Derived (single-sourced from the channels above) ── */
	--c-cream-82: rgb(var(--rgb-cream) / .82);
	--c-cream-72: rgb(var(--rgb-cream) / .72);
	--c-cream-55: rgb(var(--rgb-cream) / .55);
	--c-cream-45: rgb(var(--rgb-cream) / .45);
	--c-cream-16: rgb(var(--rgb-cream) / .16);
	--c-cream-04: rgb(var(--rgb-cream) / .035);
	--c-white-55: rgb(var(--rgb-white) / .55);   /* #FFFFFF8C outline buttons */
	--c-white-10: rgb(var(--rgb-white) / .1);    /* #FFFFFF1A header rule */
	--c-white-07: rgb(var(--rgb-white) / .07);
	--c-white-03: rgb(var(--rgb-white) / .025);  /* panel wash */
	--c-gold-72: rgb(var(--rgb-gold) / .72);
	--c-gold-42: rgb(var(--rgb-gold) / .42);     /* #D8C19B6B */
	--c-gold-38: rgb(var(--rgb-gold) / .38);
	--c-gold-32: rgb(var(--rgb-gold) / .32);
	--c-gold-30: rgb(var(--rgb-gold) / .3);      /* #D8C19B4D */
	--c-gold-28: rgb(var(--rgb-gold) / .28);     /* #D8C19B47 */
	--c-gold-26: rgb(var(--rgb-gold) / .26);
	--c-gold-24: rgb(var(--rgb-gold) / .24);
	--c-gold-22: rgb(var(--rgb-gold) / .22);
	--c-gold-18: rgb(var(--rgb-gold) / .18);
	--c-gold-10: rgb(var(--rgb-gold) / .1);      /* #D8C19B1A */
	--c-bronze-21: rgb(var(--rgb-bronze) / .21); /* #9B815636 */
	--c-black-68: rgb(var(--rgb-black) / .68);
	--c-black-70: rgb(var(--rgb-black) / .7);
	--c-black-66: rgb(var(--rgb-black) / .66);   /* #000000A8 header */
	--c-black-55: rgb(var(--rgb-black) / .55);   /* #0000008C */
	--c-black-42: rgb(var(--rgb-black) / .42);
	--c-black-31: rgb(var(--rgb-black) / .31);   /* #0000004F */
	--c-black-26: rgb(var(--rgb-black) / .26);   /* #00000042 */
	--c-black-25: rgb(var(--rgb-black) / .25);   /* #00000040 */
	--c-black-20: rgb(var(--rgb-black) / .2);    /* #00000033 */
	--c-black-08: rgb(var(--rgb-black) / .08);   /* #00000014 */

	/* ── Typography ── */
	--f-display: "Bebas Neue", sans-serif;
	--f-body: "Space Grotesk", sans-serif;
	--f-symbol: "Belanosima", sans-serif;
	--f-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Type scale — desktop values; tablet/mobile overrides below. */
	--fs-display: 118px;   /* section titles, page H1s, stats */
	--fs-title-l: 48px;    /* capacity card, news date */
	--fs-title: 34px;      /* card/panel titles */
	--fs-lead: 24px;       /* hero leads */
	--fs-body: 16px;
	--fs-eyebrow: 12px;
	--ls-eyebrow: 3.6px;
	--ls-button: 1.8px;
	--ls-display: .02em;

	/* ── Layout ── */
	--shell: 1520px;            /* boxed content width */
	--shell-narrow: 880px;      /* article width (novinka single) */
	--gutter: 40px;             /* page side padding */
	--gutter-s: var(--gutter);  /* legacy alias: one side padding for every page (DESIGN-SYSTEM.md §2) */
	--header-h: 99px;           /* 10 + 78 + 10 + 1px rule */

	/* ── Spacing language (DESIGN-SYSTEM.md §2) — a value outside this scale is a bug ── */
	--rhythm: 88px;             /* vertical padding of a page section */
	--rhythm-s: 44px;           /* compact section */
	--gap-s: 14px;              /* inside a text group (eyebrow → title → text) */
	--gap: 20px;                /* between items / columns / cards */
	--gap-l: 28px;              /* between groups inside one section */
	--card-pad: 24px;           /* inner padding of panels, glass boxes, stat tiles, cards */
	--header-offset: var(--header-h); /* live: header height while shown, 0 while hidden (app.js) */
	--screen-h: 100svh;         /* "one screen": the only viewport-height unit in the theme (capped in the editor preview) */

	/* ── Motion ── */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--t-fast: .22s;
	--t-card: .25s;
	--t-panel: .3s;
}

@media (max-width: 1024px) {
	:root {
		--fs-display: 82px;
		--fs-title-l: 42px;
		--fs-title: 30px;
		--gutter: 18px;
		--rhythm: 68px;
		--rhythm-s: 34px;
		--card-pad: 20px;
	}
}

@media (max-width: 767px) {
	:root {
		--fs-display: 52px;
		--fs-title-l: 34px;
		--fs-title: 26px;
		--fs-lead: 17px;
		--fs-body: 15px;
		--fs-eyebrow: 11px;
		--gutter: 14px;
		--rhythm: 54px;
		--rhythm-s: 28px;
		--gap-l: 20px;
	}
}

/* Editor preview pane (body.d-preview): a pane dragged taller than the device shows more of the page, it must
   not stretch "one screen". Cap at the device's natural aspect ratio (desktop 16:9, tablet 4:3, phone 390×844). */
body.d-preview { --screen-h: min(100svh, 216.4vw); }
@media (min-width: 768px) { body.d-preview { --screen-h: min(100svh, 133.33vw); } }
@media (min-width: 1025px) { body.d-preview { --screen-h: min(100svh, 56.25vw); } }