/* ==========================================================================
   Krug - dizajn tokeni v0.3 · 02.09.2026. · „editorial care system“ po UX auditu
   Paleta: navy + koral + pastelni blobovi (roze, lavanda, breskva), topli krem.
   Boje izmerene iz mockupa. Svaki demo uvozi ovaj fajl - boje se ne izmišljaju.
   Napomena: prefiks --p* sada znači „primarna" (navy), --a* „akcenat" (koral).
   ========================================================================== */


:root {
  /* --- navy: primarna ----------------------------------------------------- */
  --p900: #1B2A55;   /* najtamniji tekst, veliki brojevi                     */
  --p700: #24345F;   /* PRIMARNA AKCIJA - dugmad, hero, aktivni tab          */
  --p500: #24345F;   /* velike površine (hero) - ista kao akcija, namerno    */
  --p300: #A9B0CC;   /* ivice, neaktivno                                     */
  --p100: #E8ECF6;   /* navy soft - čipovi, ikone, stat kartica              */

  /* --- koral: akcenat ------------------------------------------------------ */
  --a600: #D23A44;   /* akcenat za TEKST (tagovi, linkovi) - prolazi 4.5:1   */
  --a500: #F26973;   /* akcenat za ikone i grafiku (≥3:1) - audit vrednost   */
  --a400: #F17279;   /* koral blob / na tamnoj podlozi                       */
  --a100: #FFDCCB;   /* peach podloga - ikone, tople kartice                 */

  /* --- pastelni blobovi (dekoracija, nikad nosilac informacije) ----------- */
  --blob-roze:    #F592BD;
  --blob-lavanda: #ABA3D2;
  --blob-breskva: #FCD0C4;
  --blob-koral:   #F26973;

  /* --- kontekstualni akcenti po fazi: tag, ikona, ilustracija - NIKAD dugme -- */
  --lilac: #DCD6F4;  /* planiranje */
  --peach: #FFDCCB;  /* trudnoća   */
  --sage:  #CFE2D4;  /* dete       */
  --sky:   #D6E6F2;  /* dete, sekundarno */

  /* --- podloga i tekst ------------------------------------------------------ */
  --paper: #FFF8F2;  /* canvas - topli krem, svetliji (audit)                */
  --card:  #FFFFFF;
  --ink:   #20263A;
  --mut:   #5A6172;
  --faint: #5A6172;   /* pomoćni tekst: 5,89:1 na krem, 7,1:1 na beloj (audit #11) */

  /* --- semantika - hitnost prave veličina i težina, nikad boja sama -------- */
  --ok:    #2E7D57;
  --warn:  #D23A44;

  /* --- oblik ---------------------------------------------------------------- */
  --r-card: 24px;
  --r-hero: 34px;
  --r-ico:  15px;
  --r-pill: 999px;

  /* --- senka razdvaja, nigde ivica ------------------------------------------ */
  --sh-card: 0 2px 4px rgba(27,42,85,.04), 0 10px 26px rgba(27,42,85,.08);
  --sh-btn:  0 6px 18px rgba(37,52,94,.32);

  /* --- ritam: skala 4 px ------------------------------------------------------ */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 17px; --s5: 22px; --s6: 30px;

  /* --- pismo -------------------------------------------------------------------- */
  --font-e: 'Manrope', system-ui, sans-serif;    /* editorial naslovi: isti sans, tezina 800 (Markova odluka 02.09: kao mockup) */
  --font-h: 'Manrope', system-ui, sans-serif;   /* zaglavlja 700-800, dugmad  */
  --font-b: 'Inter', system-ui, sans-serif;     /* tekst, cifre tabularne     */

  /* --- boje po tipu unosa (mockup 02.09): SAMO tile, tacka, ivica; nikad tekst ispod 18 px ------- */
  --tip-podoj: #E85D8A;  --tip-podoj-bg: #FCE4EE;
  --tip-san:   #5C6BC0;  --tip-san-bg:   #E6E9F7;
  --tip-pelena:#F08A3C;  --tip-pelena-bg:#FDE9DA;
  --tip-obrok: #F0A24A;  --tip-obrok-bg: #FDEEDB;
  --tip-lek:   #EC5F7A;  --tip-lek-bg:   #FCE3E8;
  --tip-mer:   #7E57C2;  --tip-mer-bg:   #ECE5F7;
  --tip-dok:   #6F7FB8;  --tip-dok-bg:   #E8EBF6;
  --tip-kal:   #F26973;  --tip-kal-bg:   #FDE4E4;
  --tip-uci:   #3E9E7A;  --tip-uci-bg:   #DCEFE6;
  --tip-zaj:   #D0678F;  --tip-zaj-bg:   #F7E1EA;

  /* --- gradijenti: dva tona iste familije, nikad na dugmetu ni tekstu ------------------------------ */
  --grad-peach: linear-gradient(160deg, #FFE3D3 0%, #FFF8F2 100%);
  --grad-lilac: linear-gradient(160deg, #E4DEF6 0%, #FFF8F2 100%);
  --grad-sage:  linear-gradient(160deg, #D8E9DD 0%, #FFF8F2 100%);
  --grad-navy:  linear-gradient(160deg, #2C3E72 0%, #1B2A55 100%);
  --zrno: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");

  /* minimalna dodirna meta - ne menjati */
  --touch: 48px;

  /* --- motion: spring preko CSS linear(), fallback cubic-bezier ----------------- */
  --spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --t-nav: 260ms; --t-card: 420ms; --t-tap: 120ms; --t-draw: 900ms; --t-tour: 320ms;
}

/* ==========================================================================
   NOĆNA TEMA - obavezna za tokove koji se dešavaju noću.
   Nigde čisto bela površina; blobovi se utišavaju.
   ========================================================================== */
.noc {
  --p900: #C9D0EC;
  --p700: #8E9CD9;
  --p500: #1A2140;
  --p300: #4A5170;
  --p100: #232B4E;

  --a600: #F58F96;
  --a500: #F17279;
  --a400: #F17279;
  --a100: #33261F;

  --blob-roze:    rgba(245,146,189,.28);
  --blob-lavanda: rgba(171,163,210,.25);
  --blob-breskva: rgba(252,208,196,.20);
  --blob-koral:   rgba(241,114,121,.30);

  --paper: #12162B;
  --card:  #1B2140;
  --ink:   #E9ECF5;
  --mut:   #A3AAC0;
  --faint: #A2A8BC;

  --sh-card: 0 2px 4px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.45);
  --sh-btn:  0 6px 18px rgba(142,156,217,.25);
}

/* ==========================================================================
   OSNOVNE KOMPONENTE
   ========================================================================== */

.krug { font-family: var(--font-b); color: var(--ink); background: var(--paper); }

/* --- hero: navy sa organskim blobovima, zaobljeno dno --- */
.k-hero {
  background: var(--p500);
  padding: var(--s2) var(--s5) var(--s6);
  border-radius: 0 0 var(--r-hero) var(--r-hero);
  position: relative; overflow: hidden;
}
.k-hero > * { position: relative; z-index: 2; }
.k-hero h1 { font: 700 26px/1.12 var(--font-h); letter-spacing: -.015em; color: #fff; margin: 0 0 4px; }
.k-hero .sub { font: 400 14px var(--font-b); color: rgba(255,255,255,.88); }
/* blobovi - čista dekoracija, aria-hidden, ne nose informaciju */
.blobovi { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; }

/* --- kartica: ulazi u hero za -18px (potpisni potez) --- */
.k-card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 18px;
  position: relative; overflow: hidden;
}
.k-card--lift { margin-top: -18px; }
.k-card h2 { font: 700 17.5px/1.3 var(--font-h); letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.k-card p  { font: 400 14px/1.55 var(--font-b); color: var(--mut); margin: 0; }
.k-card > * { position: relative; z-index: 2; }

/* kartice u boji */
.k-card--breskva { background: var(--a100); }
.k-card--lavanda { background: var(--p100); }

/* --- sitna verzalna oznaka --- */
.k-tag {
  font: 700 10.5px var(--font-b);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--a600); margin-bottom: 8px;
}
.k-tag--p { color: var(--p700); }

/* --- dugmad: pilule, primarna u donjoj polovini ekrana --- */
.k-btn {
  display: block; width: 100%; min-height: var(--touch);
  background: var(--p700); color: #fff;
  border: none; border-radius: var(--r-pill);
  font: 700 15px var(--font-h); text-align: center;
  box-shadow: var(--sh-btn); cursor: pointer;
}
.k-btn--ghost {
  background: transparent; color: var(--p700);
  border: 1.5px solid var(--p700); box-shadow: none;
}
.k-btn--call {
  background: transparent; color: var(--a600);
  border: 1.5px solid var(--a500); box-shadow: none;
}
.noc .k-btn { color: #10142A; }
.noc .k-btn--call { color: var(--a600); background: transparent; }
.noc .k-btn--ghost { color: var(--p700); background: transparent; }

/* --- čipovi --- */
.k-chip {
  display: inline-block; background: var(--p100); color: var(--p900);
  font: 600 12.5px var(--font-b); padding: var(--s2) 14px;
  border-radius: var(--r-pill);
}
.k-chip--a { background: var(--a100); color: #8A4A22; }

/* --- ikona u kvadratu - breskva podloga, koral ikona --- */
.k-ico {
  width: 44px; height: 44px; border-radius: var(--r-ico);
  background: var(--a100); color: var(--a500); flex: none;
  display: grid; place-items: center;
}
.k-ico--p { background: var(--p100); color: var(--p700); }

/* --- blok „javi se odmah ako" --- */
.k-out { background: var(--p100); border-radius: 18px; padding: var(--s4) 18px; }
.k-out .h { font: 700 15px var(--font-h); color: var(--p900); margin-bottom: 5px; }
.k-out p  { font: 400 13px/1.5 var(--font-b); color: var(--mut); margin: 0; }

/* --- cifre uvek tabularne (vremena, doze, temperature) --- */
.k-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   ZABRANJENO - ako ti ovo treba u demou, pogazio si pravilo
   --------------------------------------------------------------------------
   Nema klase za: progress bar dovršenosti · brojač niza (streak) · percentil ·
   badge sa brojem nepročitanog · donut sa procentima · strelicu gore/dole kao
   sud · crvenu/koral kao JEDINI nosilac hitnosti · odbrojavanje do porođaja.
   Blobovi su dekoracija - nikad ne kodiraju informaciju.
   Puna lista: specifikacija/00-indeks.md, presečna pravila.
   ========================================================================== */


/* --- v0.3: spring fallback, reduced motion, editorial pismo --- */
@supports not (animation-timing-function: linear(0, 1)) {
  :root { --spring: cubic-bezier(.22,1.18,.36,1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.e { font-family: var(--font-h); font-weight: 800; letter-spacing: -.015em; }
.k-hero h1.e { font-size: 32px; line-height: 1.1; }


/* --- WP1: tile po tipu, gradijent povrsine, nocne varijante --- */
.tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex: none;
  background: var(--p100); color: var(--p700); }
.tile i, .tile svg { width: 20px; height: 20px; }
.tile--m { width: 34px; height: 34px; border-radius: 11px; } .tile--m i, .tile--m svg { width: 17px; height: 17px; }
.tile--l { width: 56px; height: 56px; border-radius: 18px; } .tile--l i, .tile--l svg { width: 26px; height: 26px; }
.tile.tip-podoj { background: var(--tip-podoj-bg); color: var(--tip-podoj); }
.tile.tip-san   { background: var(--tip-san-bg);   color: var(--tip-san); }
.tile.tip-pelena{ background: var(--tip-pelena-bg);color: var(--tip-pelena); }
.tile.tip-obrok { background: var(--tip-obrok-bg); color: var(--tip-obrok); }
.tile.tip-lek   { background: var(--tip-lek-bg);   color: var(--tip-lek); }
.tile.tip-mer   { background: var(--tip-mer-bg);   color: var(--tip-mer); }
.tile.tip-dok   { background: var(--tip-dok-bg);   color: var(--tip-dok); }
.tile.tip-kal   { background: var(--tip-kal-bg);   color: var(--tip-kal); }
.tile.tip-uci   { background: var(--tip-uci-bg);   color: var(--tip-uci); }
.tile.tip-zaj   { background: var(--tip-zaj-bg);   color: var(--tip-zaj); }
.tacka { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--p300); flex: none; }
.tacka.tip-podoj { background: var(--tip-podoj); } .tacka.tip-san { background: var(--tip-san); } .tacka.tip-pelena { background: var(--tip-pelena); }
.tacka.tip-obrok { background: var(--tip-obrok); } .tacka.tip-lek { background: var(--tip-lek); } .tacka.tip-mer { background: var(--tip-mer); }
.tacka.tip-dok { background: var(--tip-dok); } .tacka.tip-kal { background: var(--tip-kal); } .tacka.tip-uci { background: var(--tip-uci); } .tacka.tip-zaj { background: var(--tip-zaj); }

.grad { position: relative; overflow: hidden; }
.grad::before { content: ''; position: absolute; inset: 0; background-image: var(--zrno); opacity: .28; mix-blend-mode: multiply; pointer-events: none; }
.grad > * { position: relative; z-index: 1; }
.grad--peach { background: var(--grad-peach); } .grad--lilac { background: var(--grad-lilac); }
.grad--sage { background: var(--grad-sage); } .grad--navy { background: var(--grad-navy); color: #fff; }

.noc .tile { filter: saturate(.85); }
.noc .tile.tip-podoj { background: rgba(232,93,138,.18); } .noc .tile.tip-san { background: rgba(92,107,192,.22); }
.noc .tile.tip-pelena { background: rgba(240,138,60,.18); } .noc .tile.tip-obrok { background: rgba(240,162,74,.18); }
.noc .tile.tip-lek { background: rgba(236,95,122,.18); } .noc .tile.tip-mer { background: rgba(126,87,194,.22); }
.noc .tile.tip-dok { background: rgba(111,127,184,.22); } .noc .tile.tip-kal { background: rgba(242,105,115,.18); }
.noc .tile.tip-uci { background: rgba(62,158,122,.2); } .noc .tile.tip-zaj { background: rgba(208,103,143,.2); }
.noc .grad--peach { background: linear-gradient(160deg, #3A2A2E 0%, #10142A 100%); }
.noc .grad--lilac { background: linear-gradient(160deg, #2C2A48 0%, #10142A 100%); }
.noc .grad--sage  { background: linear-gradient(160deg, #23342E 0%, #10142A 100%); }
.noc .grad::before { opacity: .18; mix-blend-mode: screen; }