/* Milenijum Osiguranje tokeni, osnova bez izgleda (dokument 14). Boje su u 05-brand/colors/colors.css.
   Zaobljenje, senke, kretanje, pismo i razmak slova stižu iz stadijuma 08 i dodaju se kao verzija 2. */

:root {
  /* Razmaci, osnova 4 px */
  --mios-space-1: 4px;
  --mios-space-2: 8px;
  --mios-space-3: 12px;
  --mios-space-4: 16px;
  --mios-space-5: 24px;
  --mios-space-6: 32px;
  --mios-space-7: 48px;
  --mios-space-8: 64px;
  --mios-space-9: 96px;
  --mios-space-10: 128px;

  /* Raspored */
  --mios-sec: clamp(56px, 8vw, 112px);            /* vertikalni prostor sekcije */
  --mios-head-mb: clamp(28px, 4vw, 56px);         /* zaglavlje sekcije i sadržaj */
  --mios-gap-x: clamp(16px, 2vw, 32px);           /* razmak kolona */
  --mios-gap-y: clamp(24px, 3.5vw, 48px);         /* razmak redova */
  --mios-page-margin: clamp(16px, 4vw, 48px);
  --mios-container: 1240px;
  --mios-measure: 66ch;

  /* Linije i fokus */
  --mios-line: 1px;
  --mios-line-strong: 2px;
  --mios-focus-w: 3px;

  /* Elementi koji se dodiruju */
  --mios-tap: 44px;
  --mios-field-h: 48px;

  /* Tipografija, pismo se bira u stadijumu 08 */
  --mios-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mios-fw-regular: 400;
  --mios-fw-medium: 500;
  --mios-fw-bold: 700;
  --mios-fs-caption: 0.8125rem;                   /* 13 px */
  --mios-fs-small: 0.875rem;                      /* 14 px */
  --mios-fs-body: 1rem;                      /* 17 px, malo veće zbog starijih čitalaca */
  --mios-fs-body-l: clamp(1.125rem, 1.3vw, 1.3125rem);
  --mios-fs-h4: 1.125rem;
  --mios-fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --mios-fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --mios-fs-h1: clamp(2.25rem, 5vw, 4rem);
  --mios-lh-body: 1.55;
  --mios-lh-heading: 1.12;

  /* Slojevi */
  --mios-z-header: 100;
  --mios-z-drawer: 200;
  --mios-z-modal: 300;
}

/* Verzija 4 (dokument 16): izgled prema referencama klijenta, pismo Poppins (Regular, Bold, Black), zaobljenja kao na MONOPLAST-u
   (porodica 16, 28, 40, 56 px, squircle svuda osim kod pilula), dugmad kao na MONOPLAST-u. */
:root {
  --mios-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mios-fw-regular: 400;
  --mios-fw-bold: 700;
  --mios-fw-black: 900;
  --mios-r-s: 8px;
  --mios-r-m: 16px;                               /* r-1 */
  --mios-r-l: 28px;                               /* r-2, kartice, fotografije */
  --mios-r-dd: 40px;                              /* r-3, padajući paneli */
  --mios-r-xl: 56px;                              /* r-4, veliki paneli */
  --mios-r-pill: 999px;                           /* prave kapsule, ostaju okrugle */
  --mios-corner: superellipse(2.3);               /* Apple kontinuirani ugao (squircle), Chromium. Ostali pregledači prikazuju običan radijus */
  --mios-btn-h: 48px;                             /* dugme kao na MONOPLAST-u: pilula, 15 px, strelica izlazi na prelasku mišem */
  --mios-btn-pad: 24px;
  --mios-btn-fs: 0.9375rem;
  --mios-btn-fw: 400;
  --mios-arrow-size: 16px;
  --mios-arrow-gap: 6px;
  --mios-dur-arrow: 200ms;
  --mios-ls-small: -0.01em;
  --mios-shadow-card: none;
  --mios-ls-heading: -0.02em;
  --mios-ease: cubic-bezier(.2, .6, .2, 1);
  --mios-dur: 200ms;
  /* Pojavljivanje pri listanju: jedan tih standard, 600 ms, 8 px pomak za tekst i kartice, ploče samo bledi, korak 60 ms (najviše tri), jednom */
  --mios-reveal-dur: 600ms;
  --mios-reveal-ease: cubic-bezier(.22, .61, .36, 1);
  --mios-reveal-shift: 8px;
  --mios-reveal-step: 60ms;
  --mios-header-h: 76px;
  --mios-header-r: 64px;                          /* gornji uglovi zaglavlja preko gornje trake */
  --mios-logo-h: 40px;
  --mios-frame: 12px;                             /* razmak zaobljenog okvira od ivice ekrana */
  --mios-fs-body: 1rem;
  --mios-fs-body-l: clamp(1rem, 1.15vw, 1.1875rem);
  --mios-fs-h1: clamp(2.25rem, 4.8vw, 4.125rem);
  --mios-fs-h2: clamp(1.75rem, 3.4vw, 2.875rem);
}

/* Zrno preko fotografija i filma (isto kao na MONOPLAST-u): sloj šuma, meko mešanje, jedva primetno */
:root {
  --mios-grain-opacity: .22;
  --mios-grain-size: 220px;
  --mios-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Staklo (Apple glass): providna bela podloga, zamućenje i zasićenje pozadine, tanak svetao rub samo odozgo */
  --mios-glass-bg: linear-gradient(135deg, rgb(255 255 255 / .24), rgb(255 255 255 / .08));
  --mios-glass-blur: blur(24px) saturate(180%);
  --mios-glass-bg-hover: linear-gradient(135deg, rgb(255 255 255 / .34), rgb(255 255 255 / .16));
  --mios-glass-dark-bg: linear-gradient(135deg, rgb(11 43 77 / .42), rgb(11 43 77 / .26));
  --mios-glass-rim: inset 0 1px 0 rgb(255 255 255 / .42), inset 0 -1px 0 rgb(255 255 255 / .06);
}

/* Linije, jedan stil: debljina 1 px (--mios-line). Razdelne linije i okviri kontrola, svetla i tamna podloga, svaka u dve jačine. */
:root {
  --mios-line-light: rgb(14 26 43 / .14);          /* razdelna linija na svetlom */
  --mios-line-dark: rgb(255 255 255 / .18);        /* razdelna linija na tamnom */
  --mios-line-light-strong: rgb(14 26 43 / .28);   /* okvir dugmeta sa obrisom na svetlom */
  --mios-line-dark-strong: rgb(255 255 255 / .45); /* okvir dugmeta sa obrisom na tamnom */

  /* Pritisak na vezu (pilula): tirkizna sa providnošću, nikad tamnoplava */
  --mios-hover-light: rgb(31 199 204 / .16);
  --mios-hover-dark: rgb(31 199 204 / .28);
  --mios-hover-navy: rgb(11 43 77 / .28);          /* ista providnost, teget, za pilulu na tirkiznoj kartici */

  /* Šara od znaka: tirkizna, 5 posto, pod uglom, vidljiva samo na pojedinim mestima */
  --mios-pattern-opacity: .05;
  --mios-pattern-angle: -24deg;
  --mios-pattern-tile: 120px 96px;

  /* Ikonice, jedan stil: Lucide, linija 1,5 px, zaobljeni krajevi, veličine 16, 20, 26 i 32 */
  --mios-icon-stroke: 1.5;
}