/* Design tokens — values come from the Figma file (variables + measured geometry). Do not tweak by taste. */
:root {
	/* Colours (Figma variables) */
	--c-antracit: #2d373b;      /* revita_antracit */
	--c-pink: #da5958;          /* revita_pink */
	--c-pink-light: #f69a99;    /* revita_pink_svetla */
	--c-link: #89002b;          /* linkpink */
	--c-link-dark: #d7959d;     /* link_dark_bckg (links on dark bg) */
	--c-line: #d9d9d9;          /* lines_gray */
	--c-white: #ffffff;
	--c-black: #000000;
	--c-bg: #f9fafb;            /* page background (rn_home frame fill) */
	--c-card: #e2e7e7;          /* grey card / image placeholder fill */
	--c-sep: #8b8b8b;           /* "·" separators in the legal row */

	/* Typography */
	--ff: "Work Sans", "Work Sans Fallback", "Segoe UI", Roboto, Arial, sans-serif;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fs-hero: 54px;            /* hero headline, line-height 1 */
	--fs-lead: 24px;            /* lead paragraphs, service titles, line-height 1.3 */
	--fs-body: 18px;            /* body (Figma "body"), line-height 1.3 */
	--fs-small: 16px;           /* footer, nav, labels, line-height 1.3 */
	--fs-legal: 14px;
	--ls-caps: 1.6px;           /* sc_regular/sc_semi_bold: 16px, uppercase, 10% tracking */
	--lh-tight: 1;
	--lh-body: 1.3;

	/* Layout geometry (desktop frame 1200, mobile frame 360).
	   2026-08-21: the CONTENT column caps at 1200px (was 878 = Figma frame minus insets) — approved;
	   wrap = 202 left offset + 1200 content + 120 right edge. Inner columns keep Figma proportions (fr). */
	--wrap: 1522px;
	--inset-l-desktop: 202px;   /* intentional left offset of the content column */
	--inset-r-desktop: 120px;   /* measured right edge of the content column (1080) — not a padding rule */
	--inset-mobile: 24px;       /* mobile content gutter */
	/* Below 900 the gutter is a FIXED 24px on both sides (2026-08-21 — no interpolation; content flexes,
	   only full-bleed media touches the edges). Desktop values come from the media blocks below. */
	--inset-l: var(--inset-mobile);
	--inset-r: var(--inset-mobile);
}

/* Desktop: the left offset column only serves as the RN indent — fixed; every other column flexes with the
   viewport (approved 2026-08-20, popravki točka 1). Below 1200 both insets are 60px smaller (2026-08-21):
   left 142, right 60 (the right formula clamp(24px, calc(-17.14px + 11.43vw), 60px) sits on the 60 cap
   through this whole range); from 1200 up the full 202/120. Mobile (<900) keeps the interpolation. */
@media (min-width: 900px) {
	:root {
		--inset-l: 142px;
		--inset-r: 60px;
	}
}
@media (min-width: 1200px) {
	:root {
		--inset-l: var(--inset-l-desktop);
		--inset-r: var(--inset-r-desktop);
	}
}

:root {
	--content-w: 1200px;        /* content column cap (2026-08-21; Figma frame had 878 = 202 → 1080) */
	--aside-w: 260px;           /* 820 → 1080 */
	--main-w: 570px;            /* 202 → 772 */

	/* Components */
	--radius-pill: 24px;
	--icon: 32px;
	--btn-h: 48px;
	--rule-w: 161px;            /* short pink rule under section labels (Line 13/15/16/17) */
	--header-h: 192px;          /* logo top 38 … nav row bottom 192 */
	--header-h-focused: 126px;  /* logo-only header (Naročite se, Hvala, 404): band starts at 137 */
	--header-h-mobile: 108px;   /* 30 + 73 + 5 */
}

:root {
	--c-card-grey: #e0e4e8;     /* sive_polage: grey service cards */
	--c-link-on-dark: #58001c;  /* links_on_dark: band eyebrow, link hover, button hover fill */

	/* Interaction (global, not in Figma — approved interaction rules) */
	--t-fast: 0.2s;             /* link underline reveal */
	--t-fill: 0.4s;             /* button fill sweep */
	--ease: ease-in-out;
	--lh-long: 1.6;             /* body_long: long running text on detail pages */
}