/* ═══════════════════════════════════════════════════════════
   VRELO — тема. Балканская палитра: костяная бумага, тёмный
   индиго сайдбара, сербский красный, ракийный янтарь.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Поверхности */
  --kost: #f6f2e9;
  --kost-2: #ece6d9;
  --hartija: #fffefb;
  --hartija-2: #fbf8f1;
  /* Те же цвета покомпонентно — из них строятся градиенты, в которых
     растворяются фотографии. Меняешь цвет выше — поменяй и здесь. */
  --kost-rgb: 246, 242, 233;
  --hartija-rgb: 255, 254, 251;
  --tamno: #1c2431;          /* сайдбар */
  --tamno-2: #26303f;
  --tamno-3: #333e4f;

  /* Текст */
  --mastilo: #1f232a;
  --mastilo-2: #545a65;
  --mastilo-3: #7b818c;
  --na-tamnom: #e9e3d6;
  --na-tamnom-2: #9aa3b1;

  /* Акценты */
  --crven: #b0322f;
  --crven-tamni: #8d2724;
  --crven-blagi: rgba(176, 50, 47, .1);
  --plav: #2f6aa8;
  --plav-svetli: #4183c4;
  --plav-blagi: rgba(47, 106, 168, .1);
  --rakija: #bd843c;
  --zlato: #d9ae5c;
  --zelena: #46795a;
  --zelena-blaga: rgba(70, 121, 90, .12);
  --ljubicasta: #7b5ea7;
  --tirkiz: #2f8a80;

  /* Линии и тени */
  --linija: rgba(31, 35, 42, .14);
  --linija-jaka: rgba(31, 35, 42, .26);
  --senka-s: 0 1px 2px rgba(35, 38, 46, .05), 0 2px 6px rgba(35, 38, 46, .04);
  --senka-m: 0 2px 4px rgba(35, 38, 46, .06), 0 10px 26px rgba(35, 38, 46, .07);
  --senka-l: 0 12px 48px rgba(35, 38, 46, .2);

  /* Типографика */
  --pismo-naslov: "Iowan Old Style", "Palatino Linotype", Palatino, "PT Serif",
                  "Noto Serif", Georgia, "Times New Roman", serif;
  --pismo-telo: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue",
                Arial, sans-serif;
  --pismo-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* Размеры */
  --r-s: 7px;
  --r-m: 12px;
  --r-l: 18px;
  --fioka: 274px;            /* ширина статичного сайдбара */
  --vrh: 62px;               /* верхняя панель */
  --maks: 1480px;
}

[data-tema="mrak"] {
  --kost: #12161d;
  --kost-2: #191f28;
  --hartija: #1b212b;
  --hartija-2: #202733;
  --kost-rgb: 18, 22, 29;
  --hartija-rgb: 27, 33, 43;
  --tamno: #141a23;
  --tamno-2: #1e2734;
  --tamno-3: #2a3546;

  --mastilo: #e9e2d4;
  --mastilo-2: #a3a9b4;
  --mastilo-3: #767d88;
  --na-tamnom: #e9e3d6;
  --na-tamnom-2: #98a1af;

  --crven: #d15a52;
  --crven-tamni: #b8453e;
  --crven-blagi: rgba(209, 90, 82, .14);
  --plav: #6ea3d8;
  --plav-svetli: #8ab9e8;
  --plav-blagi: rgba(110, 163, 216, .13);
  --rakija: #d3a05c;
  --zlato: #e2b96f;
  --zelena: #6ca87e;
  --zelena-blaga: rgba(108, 168, 126, .15);
  --ljubicasta: #a186cf;
  --tirkiz: #4fb3a6;

  --linija: rgba(233, 226, 212, .12);
  --linija-jaka: rgba(233, 226, 212, .26);
  --senka-s: 0 1px 3px rgba(0, 0, 0, .35);
  --senka-m: 0 6px 22px rgba(0, 0, 0, .42);
  --senka-l: 0 14px 52px rgba(0, 0, 0, .58);
}

/* ─────────────────────────── база ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--pismo-telo);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mastilo);
  background: var(--kost);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Сербская кириллица: локальные формы б, г, д, п, т отличаются от русских */
[lang="sr"], .sr { font-feature-settings: "locl" 1; }

h1, h2, h3, h4 {
  font-family: var(--pismo-naslov);
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  line-height: 1.22;
}
h1 { font-size: 1.85rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }

a { color: var(--plav-svetli); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; color: inherit; }

code, kbd {
  font-family: var(--pismo-mono); font-size: .88em;
  background: var(--kost-2); border-radius: 4px; padding: .1em .4em;
}
::selection { background: var(--zlato); color: #23262e; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linija-jaka); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}

/* ─────────────────── балканские орнаменты ─────────────────── */

/* Фактура бумаги под всем интерфейсом, если она положена в assets/slike */
body.sa-fakturom .pogled::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--faktura); background-size: 520px auto;
  opacity: .14; mix-blend-mode: multiply;
}
[data-tema="mrak"] body.sa-fakturom .pogled::before { opacity: .07; mix-blend-mode: overlay; }
body.sa-fakturom .pogled > * { position: relative; z-index: 1; }

/* Килимская шара — фоновая текстура (красится темой через mask) */
.kilim-fon {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("/assets/svg/kilim.svg") repeat center / 120px 120px;
  mask: url("/assets/svg/kilim.svg") repeat center / 120px 120px;
  background: var(--mastilo); opacity: .06;
}
[data-tema="mrak"] .kilim-fon { opacity: .08; }

/* Плетеница-разделитель */
.pleteica {
  height: 16px;
  -webkit-mask: url("/assets/svg/pleteica.svg") repeat-x center / 200px 16px;
  mask: url("/assets/svg/pleteica.svg") repeat-x center / 200px 16px;
  background: var(--rakija); opacity: .42; margin: 4px 0;
}

/* Рисунки: красятся текущим цветом */
.crtez {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background: currentColor;
}
.crtez-potka     { -webkit-mask-image: url("/assets/svg/potka.svg");     mask-image: url("/assets/svg/potka.svg"); }
.crtez-sljiva    { -webkit-mask-image: url("/assets/svg/sljiva.svg");    mask-image: url("/assets/svg/sljiva.svg"); }
.crtez-djerdap   { -webkit-mask-image: url("/assets/svg/djerdap.svg");   mask-image: url("/assets/svg/djerdap.svg"); }
.crtez-rozeta    { -webkit-mask-image: url("/assets/svg/rosette.svg");   mask-image: url("/assets/svg/rosette.svg"); }
.crtez-manastir  { -webkit-mask-image: url("/assets/svg/manastir.svg");  mask-image: url("/assets/svg/manastir.svg"); }
.crtez-beograd   { -webkit-mask-image: url("/assets/svg/beograd.svg");   mask-image: url("/assets/svg/beograd.svg"); }
.crtez-bilje     { -webkit-mask-image: url("/assets/svg/bilje.svg");     mask-image: url("/assets/svg/bilje.svg"); }
.crtez-knjiga    { -webkit-mask-image: url("/assets/svg/knjiga.svg");    mask-image: url("/assets/svg/knjiga.svg"); }
.crtez-kafa      { -webkit-mask-image: url("/assets/svg/kafa.svg");      mask-image: url("/assets/svg/kafa.svg"); }
.crtez-meta      { -webkit-mask-image: url("/assets/svg/meta.svg");      mask-image: url("/assets/svg/meta.svg"); }
.crtez-frula     { -webkit-mask-image: url("/assets/svg/frula.svg");     mask-image: url("/assets/svg/frula.svg"); }
.crtez-vez       { -webkit-mask-image: url("/assets/svg/vez-ugao.svg");  mask-image: url("/assets/svg/vez-ugao.svg"); }
.crtez-znak      { -webkit-mask-image: url("/assets/svg/logo-mark.svg"); mask-image: url("/assets/svg/logo-mark.svg"); }
.crtez-ornament  { -webkit-mask-image: url("/assets/svg/ornament-linija.svg"); mask-image: url("/assets/svg/ornament-linija.svg"); }

/* Трёхцветка — приглушённо */
.trobojka {
  height: 3px;
  background: linear-gradient(to bottom,
    var(--crven) 0 33.33%, #1e3f63 33.33% 66.66%, var(--kost-2) 66.66% 100%);
}

.ikona { width: 18px; height: 18px; flex: none; }
.ikona-s { width: 15px; height: 15px; }
.ikona-l { width: 22px; height: 22px; }