/* Dizajn tokeni „Egejska karta“ – docs/12-dizajn.md. Vrednosti se menjaju samo ovde. */
:root {
  /* boje */
  --hz-ink: #0F2A36;          /* glavni tekst, levi meni, tamna dugmad */
  --hz-ink-2: #4A626D;        /* sporedni tekst */
  --hz-ink-3: #56707B;        /* oznake polja, sitan tekst (min. 12px) */
  --hz-paper: #F3F5F4;        /* pozadina stranice */
  --hz-surface: #FFFFFF;      /* kartice, polja, tabele */
  --hz-line: #D6DFDD;         /* ivice kartica */
  --hz-line-soft: #EEF2F1;    /* linije između redova tabele */
  --hz-line-input: #C9D5D2;   /* ivice polja i sekundarnih dugmadi */
  --hz-sea: #0B6E99;          /* primarna akcija, linkovi, fokus */
  --hz-sea-dark: #08506F;     /* hover, tekst na svetloj plavoj */
  --hz-sea-tint: #E3F0F6;     /* oznake sadržaja, akcijske ćelije, izabran red */
  --hz-sea-ring: #D3E7F0;     /* prsten fokusa */
  --hz-sun: #F2C14E;          /* najbolja cena, „Naš zakup“ – SAMO tu */
  --hz-sun-tint: #FFF6DC;
  --hz-sun-dark: #C98A00;     /* zvezdice kategorije, tačka „bez umanjenja“ */
  --hz-ok: #2E7A4E;           /* Slobodno */
  --hz-wait: #9A5B00;         /* Na upit */
  --hz-bad: #A23B3B;          /* Rasprodato, greške */
  --hz-bad-tint: #F6E4E4;
  --hz-on-dark: #FFFFFF;      /* tekst na tamnom i na primarnom dugmetu */
  --hz-surface-2: #FAFCFC;    /* blago istaknuta površina (zaglavlje tabele, red zbira) */
  --hz-row-hover: #F7FAFB;    /* red tabele pod mišem */
  --hz-highlight: #F2F8FB;    /* trenutni / izabran red, aktivan korak */
  --hz-line-mid: #E4EBE9;     /* razdelnici u karticama */
  --hz-sea-line: #B8D9E7;     /* ivica plavih oznaka */
  --hz-sun-line: #F3DE9A;     /* ivica držanja mesta */
  --hz-ok-tint: #E3F2E8; --hz-ok-line: #A9CDB8; --hz-ok-dark: #1E5235;
  --hz-wait-tint: #FBEFD9; --hz-wait-line: #F3DDB8; --hz-wait-dark: #5F3900;
  --hz-bad-soft: #FDF3F3; --hz-bad-line: #E3C2C2; --hz-bad-mid: #C77F7F; --hz-bad-dark: #862F2F;
  --hz-air: #5B21B6;          /* let (Prevoz, 3f) – oznaka vrste prevoza */
  --hz-air-tint: #F1EBFE;
  --hz-nav-bg: #0F2A36; --hz-nav-text: #CFE0E5; --hz-nav-muted: #9FB8C1;
  --hz-nav-active: #1F4A5C; --hz-nav-line: #24495A;
  --hz-nav-hover: #173847; --hz-nav-field: #12303D; --hz-nav-field-line: #2A4A58;
  --hz-backdrop: rgba(15, 42, 54, .45);      /* pozadina ispod modala i menija na telefonu */
  --hz-backdrop-soft: rgba(15, 42, 54, .35);
  --hz-shade: rgba(15, 42, 54, .12); --hz-shade-light: rgba(15, 42, 54, .08); --hz-shade-faint: rgba(15, 42, 54, .05);
  --hz-map-sea: #CFE3EB; --hz-map-land: #E9EDE5;

  /* tipografija */
  --hz-font-display: 'Bricolage Grotesque', system-ui, sans-serif;  /* naslovi i nazivi objekata */
  --hz-font: 'IBM Plex Sans', system-ui, sans-serif;                 /* sav ostali tekst, forme, brojevi */

  /* veličine fonta (sitno → naslovi); minimum za čitljiv tekst je xs (12px) */
  --hz-fs-3xs: 10px; --hz-fs-2xs: 11px; --hz-fs-xs: 12px; --hz-fs-sm: 13px; --hz-fs-base: 14px; --hz-fs-md: 15px; --hz-fs-lg: 16px;
  --hz-fs-xl: 17px; --hz-fs-2xl: 18px; --hz-fs-h3: 19px; --hz-fs-h2s: 20px; --hz-fs-h2: 22px; --hz-fs-h1s: 24px; --hz-fs-h1: 26px;
  --hz-fs-display: 28px; --hz-fs-hero: 44px;

  /* razmaci (skala 4) */
  --hz-s1: 4px; --hz-s2: 8px; --hz-s3: 12px; --hz-s4: 16px; --hz-s5: 20px; --hz-s6: 24px; --hz-s8: 32px; --hz-s12: 48px;

  /* zaobljenja */
  --hz-r-xs: 4px;    /* sitne oznake, ćelije kalendara */
  --hz-r-s: 6px;     /* mala polja (izbor količine), pinovi */
  --hz-r-sm: 8px;    /* polja, ćelije */
  --hz-r-md: 10px;   /* dugmad */
  --hz-r-ml: 12px;   /* unutrašnji blokovi kartica (soba, putnik, rezime grešaka) */
  --hz-r-lg: 16px;   /* kartice, paneli, mapa */
  --hz-r-pill: 999px;/* oznake, filteri, pinovi */

  /* senke – za elemente koji plutaju (preko mape, padajući meniji, dijalozi) */
  --hz-shadow-float: 0 6px 20px rgba(15, 42, 54, .14);
  /* blaga senka kartica pretrage – Lista, Lista i mapa, Matrica (odluka 2026-11-10; varijanta B: 0 4px 10px rgba(0,0,0,.2)) */
  --card-shadow: 0 1px 2px rgba(16, 35, 43, .06), 0 4px 12px rgba(16, 35, 43, .08);
  --card-shadow-hover: 0 2px 4px rgba(16, 35, 43, .08), 0 8px 20px rgba(16, 35, 43, .12);
}