/* =====================================================================
   ARXO naslovnica v32 — ZAJEDNIČKI vizualni sustav triju odjeljaka
   („Kako radi" #kako, „Brzi kalkulator" #izracun, „Za proizvođače" #proizvodjaci)
   ---------------------------------------------------------------------
   Ovdje su SAMO zajednički tokeni i osnovni stakleni elementi (.v32-*).
   Stilovi pojedinog odjeljka su u vlastitoj datoteci (npr. css/naslovna-kako.css).
   Pravilo za dopisivanje: drugi odjeljci DODAJU svoje zajedničke tokene na kraj
   ove datoteke (ne mijenjaju postojeće vrijednosti bez dogovora).
   Svijetla tema = osnovna (topla bijela / vrlo svijetla siva, diskretne crte
   nacrta, tamnoplavi tekst, plavo-ljubičasti ARXO naglasci, staklene kartice
   s tankim rubom i prirodnom sjenom). Tamna tema: isti raspored, „noćni nacrt".
   Izvorni autor: kakoradi32 (v32).
   ===================================================================== */
:root {
  --v32-f: 'Plus Jakarta Sans', 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
  --v32-pod: #f6f5f2;            /* topla bijela podloga odjeljka */
  --v32-pod-2: #fbfaf8;
  --v32-tinta: #10133a;          /* tamnoplavi naslovi */
  --v32-tekst: #2a2e4d;          /* osnovni tekst */
  --v32-siva: #5d6178;           /* sporedni tekst (kontrast ≥ 4,5:1 na podlozi) */
  --v32-crta: rgba(52, 62, 96, .09);    /* crte nacrta u pozadini */
  --v32-crta-2: rgba(52, 62, 96, .18);
  --v32-nagl: #5b4fe0;           /* ARXO plavo-ljubičasti naglasak */
  --v32-nagl-2: #7a5cf0;
  --v32-nagl-meko: rgba(91, 79, 224, .10);
  --v32-nagl-rub: rgba(91, 79, 224, .38);
  --v32-grad: linear-gradient(135deg, #7846dc 0%, #5b4fe0 48%, #4c65e2 100%);
  --v32-staklo: rgba(255, 255, 255, .72);       /* staklena kartica (tekst ostaje čitljiv) */
  --v32-staklo-jako: rgba(255, 255, 255, .92);  /* polja za unos i rezultati — gotovo neprozirno */
  --v32-staklo-rub: rgba(255, 255, 255, .9);
  --v32-rub: rgba(32, 38, 80, .10);
  --v32-sjena: 0 1px 2px rgba(20, 24, 60, .05), 0 12px 32px -14px rgba(20, 24, 60, .22);
  --v32-sjena-jaka: 0 2px 6px rgba(20, 24, 60, .06), 0 30px 60px -24px rgba(20, 24, 60, .32);
  --v32-blur: saturate(160%) blur(14px);
  --v32-r: 16px; --v32-r-l: 22px;
  --v32-ease: cubic-bezier(.16, 1, .3, 1);
  --v32-fokus: 0 0 0 3px rgba(91, 79, 224, .45);
}
:root[data-tema="tamna"] {
  --v32-pod: #0d1230; --v32-pod-2: #10163a;
  --v32-tinta: #f1f3fb; --v32-tekst: #d3d7ee; --v32-siva: #a3a8c8;
  --v32-crta: rgba(140, 175, 255, .07); --v32-crta-2: rgba(140, 175, 255, .16);
  --v32-nagl: #9a8cff; --v32-nagl-2: #b3a6ff; --v32-nagl-meko: rgba(154, 140, 255, .14); --v32-nagl-rub: rgba(154, 140, 255, .5);
  --v32-staklo: rgba(22, 28, 64, .72); --v32-staklo-jako: rgba(20, 26, 60, .94); --v32-staklo-rub: rgba(255, 255, 255, .08);
  --v32-rub: rgba(255, 255, 255, .10);
  --v32-sjena: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px -14px rgba(0, 0, 0, .6);
  --v32-sjena-jaka: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 60px -24px rgba(0, 0, 0, .7);
}

/* ---------- zajednički elementi ---------- */
.v32-odj { position: relative; isolation: isolate; background: var(--v32-pod); color: var(--v32-tekst); font-family: var(--v32-f); }
/* diskretna mreža nacrta u pozadini odjeljka */
.v32-odj::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--v32-crta) 1px, transparent 1px), linear-gradient(90deg, var(--v32-crta) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 85%); }
.v32-nad { margin: 0 0 14px; font: 700 13px/1.2 var(--v32-f); letter-spacing: .08em; text-transform: uppercase; color: var(--v32-nagl); }
.v32-h2 { margin: 0 0 14px; font: 800 clamp(34px, 4.6vw, 64px)/1.02 var(--v32-f); letter-spacing: -.035em; color: var(--v32-tinta); text-wrap: balance; }
.v32-pod { margin: 0; font: 400 clamp(17px, 1.6vw, 22px)/1.4 var(--v32-f); color: var(--v32-tekst); }
.v32-staklo { background: var(--v32-staklo); border: 1px solid var(--v32-staklo-rub); box-shadow: var(--v32-sjena), inset 0 0 0 1px var(--v32-rub);
  -webkit-backdrop-filter: var(--v32-blur); backdrop-filter: var(--v32-blur); border-radius: var(--v32-r); }
.v32-staklo-jako { background: var(--v32-staklo-jako); }
.v32-oznaka-primjer { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 700 11px/1.4 var(--v32-f); letter-spacing: .06em; text-transform: uppercase;
  color: #8a4b00; background: #fff3dc; border: 1px solid #f1d39a; }
:root[data-tema="tamna"] .v32-oznaka-primjer { color: #ffd896; background: rgba(255, 190, 90, .12); border-color: rgba(255, 190, 90, .35); }
@media (prefers-reduced-transparency: reduce) { .v32-staklo { background: var(--v32-staklo-jako); -webkit-backdrop-filter: none; backdrop-filter: none; } }