/* =====================================================================
   Studio Habitat — Design Tokens
   Jedini izvor istine za boje, tipografiju, motion i layout.
   Naslijeđeno iz starog identiteta: tamni premium look + olive #a6a182.
   ===================================================================== */

:root {
  /* ─── Brand / pozadine (BIJELA — crno na bijelom) ─────────────────── */
  --sh-bg:            #ffffff;  /* glavna pozadina — bijela */
  --sh-surface:       #f6f5f2;  /* kartice / svijetle plohe */
  --sh-surface-2:     #ecebe5;  /* hover / elevated */
  --sh-line:          rgba(0, 0, 0, 0.12);   /* hairline borderi */
  --sh-line-strong:   rgba(0, 0, 0, 0.22);

  /* ─── Tekst (CRNA) ──────────────────────────────────────────────── */
  --sh-ink:           #15151a;  /* primarni tekst — gotovo crna */
  --sh-ink-muted:     #565660;  /* sekundarni — kontrast ≥ 7:1 na bijeloj */
  --sh-ink-faint:     #84848c;  /* tercijarni (labeli, meta) */
  --sh-ink-on-accent: #ffffff;  /* tekst na crnom akcentu / gumbu */

  /* ─── Akcenti (CRNA — zlatno zamijenjeno crnim) ───────────────────── */
  --sh-accent:        #111113;  /* crna — okviri, linije, gumbi */
  --sh-accent-strong: #000000;  /* crni akcent za TEKST na bijeloj */
  --sh-accent-dim:    rgba(0, 0, 0, 0.06);   /* suptilni tint podloge */
  --sh-amber:         #000000;  /* zadržano radi kompatibilnosti — mapirano na crnu */

  /* ─── Svijetla podloga (pravne / tekstualne stranice) ───────────── */
  --sh-paper:         #f4f3ef;
  --sh-paper-ink:     #1f2029;
  --sh-paper-muted:   #5a5950;

  /* ─── Tipografija (sve na Montserrat) ─────────────────────────────── */
  --font-sans:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);  /* prije Noto Serif — sada Montserrat svuda */

  /* Fluid skala (clamp: min @360px → max @1280px) */
  --fs-display: clamp(2.6rem, 1.4rem + 5.2vw, 4.6rem);  /* hero H1 */
  --fs-h1:      clamp(2.1rem, 1.4rem + 3.0vw, 3.2rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 2.0vw, 2.4rem);
  --fs-h3:      clamp(1.25rem, 1.0rem + 1.0vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-label:   0.72rem;   /* uppercase nadnaslovi / nav */

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-body:    1.65;
  --tracking-label: 0.18em;
  --tracking-wide:  0.06em;

  /* ─── Razmaci (8px grid) ────────────────────────────────────────── */
  --space-1: 0.5rem;   /*  8 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-5: 3rem;     /* 48 */
  --space-6: 4rem;     /* 64 */
  --space-7: 6rem;     /* 96 */
  --space-8: 8rem;     /* 128 */

  /* Vertikalni ritam sekcija (fluid) */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ─── Layout ────────────────────────────────────────────────────── */
  --container:      1280px;
  --container-wide: 1760px;
  --container-text: 720px;   /* duži tekst / pravne stranice */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* ─── Forma (oštri rubovi — stari editorial look) ────────────────── */
  --radius-sm: 0;
  --radius:    0;
  --radius-lg: 0;
  --shadow:    0 14px 40px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.45);

  /* ─── Motion (ništa iznad 500ms) ────────────────────────────────── */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);   /* ease-out, "skup" */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  300ms;
  --dur-slow:  500ms;

  /* ─── Header ────────────────────────────────────────────────────── */
  --header-h:        78px;
  --header-h-sticky: 60px;
  --logo-w:          188px;
  --z-header: 100;
  --z-overlay: 200;
  --z-lightbox: 300;
}

/* =====================================================================
   TAMNE ZONE — nav i footer ostaju crni, hero je preko videa (bijelo na crnom).
   Re-deklariraju stare tamne tokene pa te zone ostaju tamne dok je
   ostatak stranice svijetao (crno na bijelom).
   ===================================================================== */
.site-header,
.mobile-nav,
.site-footer {
  --sh-bg:            #000000;
  --sh-surface:       #111113;
  --sh-surface-2:     #1c1c1f;
  --sh-line:          rgba(255, 255, 255, 0.10);
  --sh-line-strong:   rgba(255, 255, 255, 0.18);
  --sh-ink:           #f8f8f6;
  --sh-ink-muted:     #b2b2b2;
  --sh-ink-faint:     #8d8d88;
  --sh-ink-on-accent: #1b1b1b;
  --sh-accent:        #a6a182;  /* nav/footer zadržavaju zlatni potpis (kako je) */
  --sh-accent-strong: #c2bc97;
  --sh-accent-dim:    rgba(166, 161, 130, 0.14);
  color:              var(--sh-ink);  /* djeca naslijede svijetli tekst (ne crni s body-ja) */
}

/* Hero + zaglavlja podstranica sa slikom: tamno preko medija, akcent bijel */
.hero,
.page-header:not(.page-header--compact) {
  --sh-bg:            #000000;
  --sh-surface:       #111113;
  --sh-surface-2:     #1c1c1f;
  --sh-line:          rgba(255, 255, 255, 0.10);
  --sh-line-strong:   rgba(255, 255, 255, 0.18);
  --sh-ink:           #f8f8f6;
  --sh-ink-muted:     #c8c8c4;
  --sh-ink-faint:     #a0a09a;
  --sh-ink-on-accent: #111113;  /* tekst na bijelom hero CTA gumbu */
  --sh-accent:        #f8f8f6;
  --sh-accent-strong: #ffffff;
  --sh-accent-dim:    rgba(255, 255, 255, 0.12);
  color:              var(--sh-ink);  /* naslov i sav hero tekst → svijetlo */
}

/* Smanji svu animaciju za korisnike koji to traže (a11y, WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}