/* ============================================================
    1. SISTEM BOJA I JEDINICA (Potpuno fluidni reperi)
   ============================================================ */
   
:root {
  /* ----- Pozadine (bazirano na ČISTOJ BELOJ) ----- */
  --bg-body:      rgba(255, 255, 255, 1);   /* ČISTA BELA - BAZA */
  --bg-header:    rgba(250, 250, 251, 1);   /* suptilno toplija od bele */
  --bg-card:      rgba(255, 255, 255, 1);   /* bela kartica (radi senka/ivica) */
  --bg-panel:     rgba(247, 247, 249, 1);   /* blago siva zona */
  --bg-highlight: rgba(240, 241, 243, 1);   /* hover / isticanje */
  --bg-subtle:    rgba(251, 251, 252, 1);   /* jedva vidljiva razlika */

  /* ----- Tekst (od najtamnijeg ka svetlijem) ----- */
  --text-main:    rgba(17, 24, 39, 1);      /* skoro crna - jači kontrast na beloj */
  --text-main-rgb: 17, 24, 39;
  --text-secondary: rgba(55, 65, 81, 1);
  --text-muted:   rgba(107, 114, 128, 1);
  --text-light:   rgba(156, 163, 175, 1);

  /* ----- Akcenat (zlato) ----- */
  --accent:       rgba(164, 140, 78, 1);
  --accent-hover: rgba(134, 111, 54, 1);
  --accent-light: rgba(194, 169, 102, 1);

  /* ----- Ivice, senke i zaobljenja ----- */
  --border-color: rgba(229, 231, 235, 1);
  --card-radius: clamp(4px, 0.6vw, 16px);
  --shadow: 0 clamp(1px, 0.15vw, 4px) clamp(4px, 0.6vw, 16px) rgba(0, 0, 0, 0.06);

  /* ----- Transparentne varijante ----- */
  --text-main-50:  rgba(17, 24, 39, 0.5);
  --text-main-30:  rgba(17, 24, 39, 0.3);
  --text-main-80:  rgba(17, 24, 39, 0.8);
  --text-muted-50: rgba(107, 114, 128, 0.5);
  --bg-card-50:    rgba(255, 255, 255, 0.5);
  --bg-card-80:    rgba(255, 255, 255, 0.8);

  /* ----- Fluidne veličine fontova ----- */
  --font-h1: clamp(2.2rem, 2.0rem + 0.8vw, 3.2rem);
  --font-h2: clamp(1.8rem, 1.6rem + 0.6vw, 2.6rem);
  --font-h3: clamp(1.5rem, 1.3rem + 0.5vw, 2.0rem);
  --font-h4: clamp(1.3rem, 1.1rem + 0.4vw, 1.8rem);
  --font-main: clamp(1.2rem, 1.0rem + 0.4vw, 1.6rem);
  --font-secondary: clamp(1.0rem, 0.85rem + 0.3vw, 1.2rem);
  --font-tertiary: clamp(0.8rem, 0.7rem + 0.2vw, 1.0rem);

  /* ----- Fluidni razmaci ----- */
  --spacing-xs: clamp(0.4rem, 0.3rem + 0.2vw, 0.8rem);
  --spacing-sm: clamp(0.8rem, 0.6rem + 0.4vw, 1.6rem);
  --spacing-md: clamp(1.2rem, 1.0rem + 0.6vw, 2.4rem);
  --spacing-lg: clamp(1.6rem, 1.2rem + 0.8vw, 3.2rem);
  --spacing-xl: clamp(2.4rem, 1.8rem + 1.2vw, 4.8rem);

  /* ----- Line heights ----- */
  --line-h1: 1.2;
  --line-h2: 1.25;
  --line-h3: 1.3;
  --line-h4: 1.3;
  --line-main: 1.5;
  --line-secondary: 1.6;
  --line-tertiary: 1.6;
}

/* ============================================================
    DARK MODE - "Midnight Charcoal"
   ============================================================ */
[data-theme="dark"] {
  /* ----- Pozadine (bazirano na ČISTOJ CRNOJ) ----- */
  --bg-body:      rgba(0, 0, 0, 1);         /* ČISTA CRNA - BAZA */
  --bg-header:    rgba(10, 10, 10, 1);      /* suptilno svetlija od crne */
  --bg-card:      rgba(17, 17, 17, 1);      /* kartica */
  --bg-panel:     rgba(13, 13, 13, 1);      /* panel */
  --bg-highlight: rgba(26, 26, 26, 1);      /* hover / isticanje */
  --bg-subtle:    rgba(6, 6, 6, 1);         /* jedva vidljiva razlika */

  /* ----- Tekst (od najsvetlijeg ka tamnijem) ----- */
  --text-main:    rgba(250, 250, 250, 1);   /* skoro čisto bela - jak kontrast na crnoj */
  --text-main-rgb: 250, 250, 250;
  --text-secondary: rgba(212, 212, 212, 1);
  --text-muted:   rgba(163, 163, 163, 1);
  --text-light:   rgba(115, 115, 115, 1);

  /* ----- Akcenat (zlato - malo svetlije za crnu podlogu) ----- */
  --accent:       rgba(194, 169, 102, 1);
  --accent-hover: rgba(214, 189, 122, 1);
  --accent-light: rgba(230, 210, 150, 1);

  /* ----- Ivice, senke i zaobljenja ----- */
  --border-color: rgba(38, 38, 38, 1);
  --shadow: 0 clamp(1px, 0.15vw, 4px) clamp(4px, 0.6vw, 16px) rgba(0, 0, 0, 0.8);

  /* ----- Transparentne varijante ----- */
  --text-main-50:  rgba(250, 250, 250, 0.5);
  --text-main-30:  rgba(250, 250, 250, 0.3);
  --text-main-80:  rgba(250, 250, 250, 0.8);
  --text-muted-50: rgba(163, 163, 163, 0.5);
  --bg-card-50:    rgba(17, 17, 17, 0.5);
  --bg-card-80:    rgba(17, 17, 17, 0.8);
}

/* ============================================================
    2. RESET I BAZA (Potpuno fluidno)
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Glatke tranzicije za sve promene (tema, hover, resize) */
  transition: background-color 0.25s ease, 
              color 0.25s ease, 
              border-color 0.25s ease, 
              box-shadow 0.25s ease,
              opacity 0.25s ease;
}

/* ============================================================
    RESET DUGMADI I LINKOVA (sprečava default stilove)
   ============================================================ */

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Ako želiš da zadržiš hover/active efekte, dodaćeš ih naknadno */

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--font-main);
  line-height: var(--line-main);
  color: var(--text-main);
  background-color: var(--bg-body);
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh; /* dinamička visina za mobilne */
}

.entry-content h1 { font-size: var(--font-h1); line-height: var(--line-h1); margin: var(--spacing-md) 0; }
.entry-content h2 { font-size: var(--font-h2); line-height: var(--line-h2); margin: var(--spacing-sm) 0; }
.entry-content p { margin-bottom: var(--spacing-sm); }
.entry-content ul, .entry-content ol { margin: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md); }
.entry-content blockquote { border-left: 4px solid var(--accent); padding-left: var(--spacing-sm); font-style: italic; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--card-radius); }
.entry-content a { color: var(--accent); text-decoration: underline; }

/* ============================================================
    3. FLUIDNI KONTEJNER
   ============================================================ */

.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 2vw, 4rem);
}

/* ============================================================
    4. LAYOUT – Fleksibilni sistem (automatsko prelamanje)
   ============================================================ */

.site-main-layout {
  display: flex;
  flex-wrap: wrap;          /* automatsko prelamanje umesto medijskog upita */
  gap: var(--spacing-md);   /* fluidni razmak između elemenata */
  margin: 0 auto;
  padding: 0 var(--spacing-sm) var(--spacing-lg) var(--spacing-sm);
}