/**
 * Design tokeni — SEE ENERGY (PLAN.md §18)
 *
 * Izvor: Figma "Homepage v1" (VBYABMT9lMbs39lYQ6tgTP, node 1:2).
 * Fajl nema Figma variables, pa su vrednosti izvedene iz stilova sekcija
 * (Hero 1:57, Tickets 1:214). Sekcije referenciraju ISKLJUČIVO ove tokene —
 * bez magic brojeva i hex literala u CSS-u sekcija.
 *
 * Kanonski responsive opsezi (media query ne može da koristi custom properties):
 * mobile <=767, tablet 768–1023, small desktop 1024–1279,
 * desktop 1280–1439 i wide desktop >=1440.
 */

:root {
	/* ---------- Boje: pozadine ---------- */
	--c-bg: #0e1117;            /* osnovna tamna pozadina (hero, većina sekcija) */
	--c-bg-alt: #141a22;        /* naizmenična sekcijska pozadina (tickets) */
	--c-surface: #181f28;       /* kartice / paneli */
 
	/* ---------- Boje: brend / akcenti ---------- */
	--c-accent: #96B723;        /* primarna zelena (CTA, naglasci u naslovima) */
	--c-accent-dim: rgba(34, 197, 94, 0.14);  /* radial glow pozadine */
	--c-on-accent: #06120b;     /* tekst na zelenom dugmetu */
	--c-accent-blue: #0693E0;   /* sekundarni plavi akcenat */

	/* ---------- Boje: tekst ---------- */
	--c-text: #ffffff;          /* naslovi */
	--c-text-body: #dde3eb;     /* paragrafi */
	--c-text-muted: #8a96a8;    /* eyebrow, labele, meta */ 
	--c-text-faint: rgba(255, 255, 255, 0.8);

	/* ---------- Boje: ivice (bela sa alfa skalom) ---------- */
	--c-border-subtle: rgba(255, 255, 255, 0.05);
	--c-border: rgba(255, 255, 255, 0.08);
	--c-border-strong: rgba(255, 255, 255, 0.1);
	--c-border-heavy: rgba(255, 255, 255, 0.15);
	--c-border-max: rgba(255, 255, 255, 0.2);

	/* ---------- Boje: svetle (invertovane) sekcije ----------
	   Prljavo bela pozadina za sekcije sa partner logotipima u punom koloru;
	   tamna tekst/border skala. Akcenti (zelena/plava) ostaju isti. */
	--c-bg-light: #e0dfda;                       /* prljavo bela sekcijska pozadina */
	--c-surface-light: #e9e6df;                  /* kartice / paneli na svetlom */
	--c-text-inv: #10141a;                       /* naslovi na svetlom */
	--c-text-body-inv: #3e4652;                  /* paragrafi na svetlom */
	--c-text-muted-inv: #67717f;                 /* eyebrow, labele na svetlom */
	--c-text-faint-inv: rgba(16, 20, 26, 0.8); 
	--c-border-subtle-inv: rgba(16, 20, 26, 0.07);
	--c-border-inv: rgba(16, 20, 26, 0.1);
	--c-border-strong-inv: rgba(16, 20, 26, 0.13);
	--c-border-heavy-inv: rgba(16, 20, 26, 0.18);
	--c-border-max-inv: rgba(16, 20, 26, 0.26);

	/* ---------- Boje: semantičke (forme) ---------- */
	--c-success: var(--c-accent);
	--c-error: #ef4444;

	/* ---------- Tipografija ---------- */
	--font-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Skala veličina (desktop referenca iz Figme) */
	--fs-display: clamp(3rem, 6.5vw, 6rem);         /* H1 hero */
	--fs-h2: clamp(2rem, 3.6vw, 3.5rem);            /* H2 sekcija — ~56px */
	--fs-price-lg: 2.75rem;   /* 44px */
	--fs-price: 2rem;         /* 32px */
	--fs-body-lg: 1.0625rem;  /* 17px */
	--fs-body: 1rem;          /* 16px */
	--fs-body-sm: 0.9375rem;  /* 15px */
	--fs-small: 0.875rem;     /* 14px */
	--fs-btn: 0.8125rem;      /* 13px */
	--fs-label: 0.6875rem;    /* 11px — eyebrow */
	--fs-overline: 0.625rem;  /* 10px — mikro labele */

	/* Težine */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Line-height */
	--lh-display: 1;          /* 110/110 */
	--lh-heading: 1;          /* 76/76 */
	--lh-body: 1.625;         /* 17/27.6 */
	--lh-normal: 1.5;

	/* Letter-spacing */
	--ls-display: -0.057em;   /* H1 */
	--ls-heading: -0.035em;   /* H2 */
	--ls-btn: 0.08em;         /* dugmad, uppercase */
	--ls-label: 0.28em;       /* eyebrow, uppercase */
	--ls-overline: 0.24em;    /* mikro labele, uppercase */

	/* ---------- Spacing skala ---------- */
	--sp-1: 0.25rem;   /*  4px */
	--sp-2: 0.5rem;    /*  8px */
	--sp-3: 0.75rem;   /* 12px */
	--sp-4: 1rem;      /* 16px */
	--sp-6: 1.5rem;    /* 24px */
	--sp-8: 2rem;      /* 32px */
	--sp-10: 2.5rem;   /* 40px */
	--sp-14: 3.5rem;   /* 56px */
	--sp-section: 7rem; /* 112px — vertikalni padding sekcija */

	/* ---------- Layout ---------- */
	--container-max: 90rem;         /* 1440px */
	--container-pad: 2rem;          /* 32px bočni padding */

	/* ---------- Radii / senke ---------- */
	--radius: 0;    /* dizajn je oštrih ivica — bez zaobljenja */

	/* ---------- Dugmad ---------- */
	--btn-pad-y: 0.875rem;   /* 14px */
	--btn-pad-x: 1.5rem;     /* 24px */

	/* ---------- Animacije ---------- */
	--dur-fast: 150ms;
	--dur-base: 300ms;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}