/* ── Dizajn tokeni — Bäckerei Martini ─────────────────────────────────
   Registar: precizno, ne luksuzno. Referenca je dobro odštampan dnevni
   cjenovnik — papir, hairline, krupna cifra u koloni. NE component library.
   Nebo (traka) klizi s vremenom. Papir (vitrina) ostaje stabilan.
   ──────────────────────────────────────────────────────────────────── */

/* ⭐ Registrovani tokeni — BEZ ovoga gradijent ne interpolira, samo snapa. */
@property --himmel-oben  { syntax: '<color>'; inherits: true; initial-value: #cfe3f2; }
@property --himmel-unten { syntax: '<color>'; inherits: true; initial-value: #fbf9f4; }
@property --himmel-tinte { syntax: '<color>'; inherits: true; initial-value: #16130f; }
@property --akzent       { syntax: '<color>'; inherits: true; initial-value: #c8601c; }
@property --tag-fortschritt { syntax: '<number>'; inherits: true; initial-value: 0.4; }

:root {
  /* ⭐ Mesing rukopisnog znaka — ton natpisa na zidovima lokala. */
  --messing: #d9ad62;
  /* Papir i tinta — stabilni. Čitljivost je sveta. */
  --papier:        #f7f5f0;
  --tinte:         #16130f;
  --tinte-leise:   #5f584e;   /* v1 #6d665c je padao ispod 4.5:1 na papiru */
  --linie:         #ded8cc;
  /* ⛔ Akcent je grafička boja (linija, tačka). Kao TEKST na papiru daje
     2,45:1 — pada WCAG AA. Ovo je njegova čitljiva varijanta: ista toplina,
     dovoljan kontrast (5,2:1). Mjereno, ne procijenjeno. */
  --akzent-tinte:  color-mix(in oklab, var(--akzent) 50%, var(--tinte));

  /* Tipo skala — mobilni prvo */
  --t-display: clamp(2.4rem, 11vw, 5.5rem);
  --t-gross:   clamp(1.35rem, 5vw, 2rem);
  --t-text:    clamp(0.95rem, 3.6vw, 1.05rem);
  --t-klein:   0.8rem;
  --t-mini:    0.78rem;        /* ⛔ donja granica — LMIV podatak se čita na suncu */
  --t-preis:   clamp(1.05rem, 4.2vw, 1.3rem);

  /* Ritam */
  --raum-1: 0.35rem;  --raum-2: 0.7rem;   --raum-3: 1.15rem;
  --raum-4: 2rem;     --raum-5: 3.25rem;  --raum-6: 5rem;
  --kante: 1px solid var(--linie);

  /* Kretanje — jedna kriva za cijeli sajt */
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
  --takt: 320ms;
}

/* ── ⭐ Temporalna paleta — kontinuirani scrub ───────────────────────
   Pauzirana animacija, pomjerena negativnim delayom. JS mijenja samo
   --tag-fortschritt; browser interpolira boje kadar po kadar.
   Procenti prate stvarne sate: 06→10→15→18→22:30 na rasponu 990 min.  */

@keyframes tageslicht {
  0%    { --himmel-oben: #b9cfe4; --himmel-unten: #f2efe8; --himmel-tinte: #1b2430; --akzent: #2f6f93; }
  24%   { --himmel-oben: #cfe3f2; --himmel-unten: #fbf9f4; --himmel-tinte: #16130f; --akzent: #c8601c; }
  55%   { --himmel-oben: #f0c98a; --himmel-unten: #fbf3e6; --himmel-tinte: #2a1d0e; --akzent: #b4500f; }
  73%   { --himmel-oben: #3a2a22; --himmel-unten: #8a5a32; --himmel-tinte: #fdf6ea; --akzent: #e8913c; }
  100%  { --himmel-oben: #2b1d18; --himmel-unten: #6b4527; --himmel-tinte: #fdf6ea; --akzent: #e8913c; }
}

html {
  /* ⛔ `both` je OBAVEZAN, ne kozmetika. Bez fill-mode-a animacija se na
     --tag-fortschritt: 1 smatra ZAVRŠENOM i registrovani tokeni padaju na
     svoj @property initial-value ⇒ u 22:30, tačno na zatvaranju, nebo skoči
     iz noći u podne. Uhvaćeno kapijom, ne okom. */
  animation: tageslicht 1s linear paused both;
  animation-delay: calc(var(--tag-fortschritt) * -1s);
}

/* Fallback bez @property podrške i bez JS-a: diskretna stanja sa servera.
   Ovo je i prvi paint — server ga uvijek postavi.                      */
[data-tageslicht="morgen"]     { --himmel-oben: #b9cfe4; --himmel-unten: #f2efe8; --himmel-tinte: #1b2430; --akzent: #2f6f93; }
[data-tageslicht="tag"]        { --himmel-oben: #cfe3f2; --himmel-unten: #fbf9f4; --himmel-tinte: #16130f; --akzent: #c8601c; }
[data-tageslicht="nachmittag"] { --himmel-oben: #f0c98a; --himmel-unten: #fbf3e6; --himmel-tinte: #2a1d0e; --akzent: #b4500f; }
[data-tageslicht="abend"]      { --himmel-oben: #3a2a22; --himmel-unten: #8a5a32; --himmel-tinte: #fdf6ea; --akzent: #e8913c; }
/* Beč u 03:00: tamnoplavo s natrijum-narandžastim uličnim svjetlom.
   ⛔ NE default dark-Tailwind siva — to je tell. */
[data-tageslicht="geschlossen"] { --himmel-oben: #101622; --himmel-unten: #2a1e18; --himmel-tinte: #e8e4dc; --akzent: #c9803a; }
/* ⛔ Noć nije dio dnevnog scruba (0→1 pokriva 06:00–22:30). Animacija ima viši
   prioritet od ovih deklaracija, pa se za zatvoreno MORA ugasiti — inače bi
   nebo u 03:00 pokazalo boju s ruba dana umjesto noćne palete. */
html[data-tageslicht="geschlossen"] { animation: none; }
/* ⭐ „vorschau" = gost je noću prevukao traku u radni sat. Nema svoju paletu:
   postoji samo da animacija (koja je za „geschlossen" ugasena) opet vozi
   --tag-fortschritt. Bez ovog stanja nebo se noću ne bi micalo s klizacem. */

@supports not (animation-timeline: scroll()) {
  /* starije Safari verzije: animacija se ne scrubuje — diskretna stanja
     iznad i dalje rade, uz mekan prelaz na promjenu atributa */
  html { transition: --himmel-oben 600ms var(--kurve), --himmel-unten 600ms var(--kurve); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { animation: none; }
}

/* ── Osnova ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Papir „zna" koliko je sati — 5% neba, kontrast ostaje netaknut. */
  background: color-mix(in oklab, var(--papier) 95%, var(--himmel-oben));
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-optical-sizing: auto;        /* ⛔ ne ručni 'opsz' — browser zna bolje */
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.02em;
}

/* ⛔ Mono ide na TAČNO DVA mjesta: cijena i sat. Nigdje drugdje. */
.preis, .zeile__preis, .tagesband__uhr {
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}