/* ============================================================
   Studio Centar - design tokens
   Izvor: Claude Design projekat „Studio Centar Design System"
   (53b2f770-1339-47eb-aa9a-ff711b078767), fajlovi tokens/*.css.
   Referentna kopija: /docs/design-system/

   JEDINI izvor boja, tipografije i razmaka. Nijedna hex vrednost,
   font-size ni spacing ne sme biti hardkodovan van ovog fajla.
   ============================================================ */

/* ---- fontovi -------------------------------------------------
   Sve tri porodice pokrivaju Latin Extended (č ć š ž đ) i ćirilicu.
   Klijent nije dostavio licencirane fajlove - Google Fonts.
   display=swap: nema render-blocking web fontova.
   <!-- PROVERITI SA KLIJENTOM: ima li Studio Centar licencirane fontove -->
   ------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;600;700;900&family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
/* ---- osnovne: zelene, izvedene iz klijentovog logotipa (2026) ----
   Logo zelena je #75B129, nijansa 86 stepeni (žuto-zelena, lisnata).
   Cela skala je u toj nijansi. Tamniji tonovi postoje zato što je
   logo zelena presvetla za sitan tekst na beloj podlozi: daje kontrast
   2.37:1, a WCAG AA traži 4.5:1. Ista porodica boje, tamnija gde mora
   da se čita. Svaka vrednost je proverena, vidi komentare uz semantiku. */
--green-900:#2C430E;--green-800:#375412;--green-700:#4E7619;--green-600:#56821C;--green-500:#5E8F1E;
--green-100:#E7F2D9;--green-50:#F3F8ED;
--leaf:#75B129;          /* boja sa logotipa, za znak i veće površine */
--leaf-onbrand:#B8D98C;  /* nadnaslov na zelenom bloku, 5.47:1 */

/* ---- osnovne: topli neutrali (svetla strana) ---- */
--paper-0:#FFFFFF;--paper-1:#F6F4EF;--paper-2:#EFEDE6;--paper-3:#E3E0D7;
--ink-900:#14150F;--ink-700:#3A3C34;--ink-500:#6B6D63;--ink-400:#8E9086;

/* ---- osnovne: ugljena (tamna strana - nikad čista crna) ---- */
--coal-900:#121412;--coal-800:#191C19;--coal-700:#22251F;--coal-600:#2E322B;
--chalk-0:#F3F2EC;--chalk-1:#CFCEC5;--chalk-2:#9B9C93;

/* ---- osnovne: akcenat na sceni i boja sa plakata ---- */
--stage-green:#77B625;  /* ista nijansa kao logo, posvetljena za ugljenu podlogu, 7.49:1 */
--ember:#C0392B;        /* pozajmljeno sa plakata, samo za greške */

/* ---- semantičke: svetle površine (početna, programi, cenovnik, upis, kontakt) ---- */
--surface-page:var(--paper-1);--surface-raised:var(--paper-0);--surface-sunken:var(--paper-2);--surface-card:var(--paper-0);
--text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);--text-onbrand:var(--paper-0);
--border-hairline:#DAD6CB;--border-solid:#C6C1B3;--border-strong:var(--ink-900);

/* ---- semantičke: tamne površine (predstave, repertoar) ---- */
--surface-stage:var(--coal-900);--surface-stage-raised:var(--coal-800);--surface-stage-row:var(--coal-800);
--text-stage-strong:var(--chalk-0);--text-stage-body:var(--chalk-1);--text-stage-muted:var(--chalk-2);
--border-stage:#33372F;--border-stage-strong:#4A4F44;

/* ---- semantičke: akcija ---- */
--action:var(--green-700);--action-hover:var(--green-600);--action-press:var(--green-900);
--action-stage:var(--stage-green);--action-stage-hover:#8ECC3D;
--focus-ring:var(--green-500);--focus-ring-stage:var(--stage-green);

/* ---- semantičke: statusi predstava ---- */
--status-live-fg:var(--green-700);--status-live-bg:var(--green-100);
--status-soon-fg:#7A4A00;--status-soon-bg:#F6E8CF;
--status-archive-fg:var(--ink-500);--status-archive-bg:var(--paper-2);
--status-live-stage-fg:var(--stage-green);--status-live-stage-bg:rgba(119,182,37,.14);
--status-soon-stage-fg:#E3B463;--status-soon-stage-bg:rgba(227,180,99,.12);
--status-archive-stage-fg:var(--chalk-2);--status-archive-stage-bg:rgba(155,156,147,.12);

/* ---- semantičke: poruke forme ---- */
--status-error-fg:#7B241C;--status-error-bg:#FBEAE8;--status-error-border:var(--ember);
--status-ok-fg:var(--green-900);--status-ok-bg:var(--green-100);--status-ok-border:var(--green-500);

/* ---- semantičke: poluprovidne površine ---- */
/* header je jedino mesto sa blurom na sajtu */
--surface-header:rgba(246,244,239,.92);
/* tekst na zelenom CTA bloku */
--onbrand-lead:rgba(255,255,255,.88);
--onbrand-note:rgba(255,255,255,.72);
--onbrand-border:rgba(255,255,255,.45);

/* ---- tipografija ---- */
--font-display:"Commissioner","Helvetica Neue",Arial,sans-serif;
--font-text:"Golos Text","Helvetica Neue",Arial,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,monospace;

/* display veličine su fluidne da duge srpske naslove prežive mobilni */
--fs-hero:clamp(2.5rem,7.2vw,5.25rem);
--fs-d1:clamp(2rem,5vw,3.75rem);
--fs-d2:clamp(1.625rem,3.6vw,2.75rem);
--fs-h1:clamp(1.5rem,2.6vw,2.125rem);
--fs-h2:clamp(1.25rem,2vw,1.5rem);
--fs-h3:1.125rem;
--fs-body-lg:1.0625rem;
--fs-body:1rem;
--fs-sm:0.875rem;
--fs-xs:0.8125rem;
--fs-eyebrow:0.75rem;

--lh-tight:0.98;--lh-display:1.04;--lh-heading:1.16;--lh-body:1.6;--lh-relaxed:1.72;
--ls-hero:-0.03em;--ls-display:-0.022em;--ls-heading:-0.012em;--ls-body:0;--ls-eyebrow:0.14em;--ls-mono:0.02em;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:900;

/* složene uloge */
--type-hero:var(--fw-black) var(--fs-hero)/var(--lh-tight) var(--font-display);
--type-display:var(--fw-bold) var(--fs-d1)/var(--lh-display) var(--font-display);
--type-heading:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-text);
--type-meta:var(--fw-medium) var(--fs-sm)/1.4 var(--font-text);
--type-mono:var(--fw-medium) var(--fs-xs)/1.3 var(--font-mono);

/* ---- prostor i mreža ---- */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;
--gutter:clamp(16px,4vw,32px);
--container:1200px;
--container-narrow:760px;
--section-y:clamp(56px,7vw,112px);
--grid-gap:clamp(16px,2vw,28px);

/* ---- uglovi i ivice: skoro pravougaono, ivica je glavni strukturni alat ---- */
--r-0:0px;--r-1:2px;--r-2:4px;--r-3:6px;--r-pill:999px;
--r-card:var(--r-2);--r-button:var(--r-2);--r-badge:var(--r-1);--r-media:var(--r-1);
--bw-hair:1px;--bw-solid:1.5px;--bw-strong:2px;
--border-card:var(--bw-hair) solid var(--border-hairline);
--border-card-stage:var(--bw-hair) solid var(--border-stage);
/* okvir plakata: pravilo koje sprečava da skoro beo ili skoro crn plakat iscuri u podlogu */
--frame-poster:var(--bw-hair) solid var(--border-solid);
--frame-poster-stage:var(--bw-hair) solid var(--border-stage-strong);

/* ---- senke: u mirovanju praktično ne postoje ---- */
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(20,21,15,.06);
--shadow-card-hover:0 6px 20px rgba(20,21,15,.10);
--shadow-overlay:0 24px 60px rgba(20,21,15,.22);
--shadow-stage-hover:0 8px 28px rgba(0,0,0,.55);
--scrim-bottom:linear-gradient(to top,rgba(10,12,10,.88) 0%,rgba(10,12,10,.55) 42%,rgba(10,12,10,0) 100%);
--scrim-flat:rgba(10,12,10,.55);

/* ---- pokret: jedan easing, bez odskoka i parallaxa ---- */
--ease-out:cubic-bezier(.2,.7,.3,1);
--ease-inout:cubic-bezier(.65,0,.35,1);
--dur-1:120ms;--dur-2:180ms;--dur-3:280ms;--dur-4:520ms;
--t-hover:var(--dur-2) var(--ease-out);
--t-press:var(--dur-1) var(--ease-out);
--t-reveal:var(--dur-4) var(--ease-out);
--press-scale:.985;
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-4:0ms;--press-scale:1}
}