/* ==========================================================================
   brand.css — odluke ovog projekta. Učitava se nakon type.css i color.css,
   prije layout.css. Ovdje se prepisuju SAMO tokeni; komponente idu u site.css.

   Boja je izvučena iz fotografija imanja, ne iz palete u briefu:
   vapnenac u sjeni je zelenkasto-siv, a ne krem. Krem + terakota je
   kombinacija koju posegne svaki generator i klijent ju prepoznaje.
   Terakota zato NIJE token — živi u fotografijama i u krovu na tlocrtu,
   kao materijal, nikad kao UI.
   ========================================================================== */

:root {
  /* --- obitelji ---------------------------------------------------------
     Newsreader: opsz os pušta da naslov na 7rem bude prozračan i urezan,
     a ne knjiški. Instrument Sans: tih, blago uzak, ne čita se kao Inter.
     Oba nose š č ć ž đ u latin-ext rezu (provjereno renderiranjem glifova).
     -------------------------------------------------------------------- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-text: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- paleta ------------------------------------------------------------
     Neutral nosi zeleni pomak (OKLCH hue 107-120), ne žuti. Ravno srednje
     sivo bi ovdje djelovalo nepromišljeno.
     -------------------------------------------------------------------- */
  --stone-50:   #F1F1EA;   /* 95.6% 0.009 107 — podloga */
  --stone-100:  #E7E7DD;   /* 92.5% 0.013 107 — alternativna sekcija */
  --stone-200:  #D6D6C8;   /* 87.2% 0.019 107 — hairline */
  --stone-300:  #BEBEAE;

  --ink-900:    #15170F;   /* 20.0% 0.016 119 — naslovi */
  --ink-600:    #3C3F34;   /* 36.1% 0.019 120 — tekst */
  --ink-400:    #63665B;   /* sekundarni — potamnjen da prođe AA i na stone-100 */

  --night-900:  #0B1012;   /* petrol-crna: voda u noćnoj sekciji svijetli iz nje */
  --night-800:  #141B1E;

  /* Jedini akcent. Troši se na tri mjesta i nigdje više:
     aktivni prostor na tlocrtu, fokus prsten, crta ispod primarnog CTA-a. */
  --water-600:  #1F6B78;   /* 48.8% 0.074 211 */
  --water-400:  #4E9AA8;   /* ista boja za tamnu podlogu */

  /* --- mapiranje na semantičke tokene iz color.css ------------------------
     Ostatak sustava (layout, image, finish) govori semantičkim imenima,
     pa se paleta mijenja na jednom mjestu.
     -------------------------------------------------------------------- */
  --bg:             var(--stone-50);
  --bg-subtle:      var(--stone-100);
  --surface:        var(--stone-50);
  --surface-sunken: var(--stone-100);

  --element:        var(--stone-100);
  --element-hover:  var(--stone-200);
  --element-active: var(--stone-300);

  --border:         var(--stone-200);
  --border-strong:  var(--stone-300);
  --border-focus:   var(--water-600);

  --solid:          var(--water-600);
  --solid-hover:    #185A66;
  --on-solid:       var(--stone-50);

  --text:           var(--ink-900);
  --text-muted:     var(--ink-600);
  --text-subtle:    var(--ink-400);
  --text-accent:    var(--water-600);

  --ring-focus: 0 0 0 2px var(--stone-50), 0 0 0 4px var(--water-600);

  /* Kamena kuća nema zaobljene kutove. Radijus 0 je odluka, ne propust. */
  --radius-s: 0; --radius-m: 0; --radius-l: 0;

  /* --- gibanje -----------------------------------------------------------
     Jedna krivulja za ulaze, jedna za scrub. Ništa ne poskakuje. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-scrub: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-ui: 520ms;
  --dur-reveal: 1100ms;

  /* --- display skala -----------------------------------------------------
     Hero ide iznad skale iz type.css jer mora nositi cijeli prvi ekran. */
  --t-hero: clamp(2.15rem, 6.1vw, 6.2rem);
  --t-h2:   clamp(1.9rem, 4.2vw, 3.6rem);
  --t-quote: clamp(1.75rem, 3.6vw, 3.1rem);
  --t-micro: 0.75rem;

  --gutter: clamp(20px, 5vw, 96px);
  --rule: 1px solid var(--stone-200);
}

/* Paleta je art-directana i fiksna. Sistemski dark mode bi razbio logiku
   noćne sekcije (jedina tamna na stranici), pa se ne nasljeđuje. */
html { color-scheme: light; }

body { background: var(--bg); color: var(--text-muted); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 350;
  color: var(--text);
  letter-spacing: -0.018em;
  font-variant-numeric: oldstyle-nums;
}
h1 { font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); line-height: 1.06; }

/* Sitna verzalna oznaka — jedini "UI" tip na stranici.
   max-width se ponistava: type.css stavlja --measure-display (18ch) na sve
   naslove, a 18ch u fontu od 12px je 145px, pa bi se oznaka lomila. */
.micro {
  max-width: none;
  font-family: var(--font-text);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}