/* ============================================================
    1. SISTEM BOJA I JEDINICA (Potpuno fluidni reperi)
   ============================================================ */
   
:root {
  /* ----- Pozadine (od najsvetlije ka tamnijoj) ----- */
  --bg-body:      rgba(242, 244, 247, 1);   /* blago toplija siva */
  --bg-header:    rgba(232, 234, 237, 1);   /* za zaglavlja */
  --bg-card:      rgba(255, 255, 255, 1);   /* čista bela */
  --bg-panel:     rgba(248, 249, 251, 1);   /* za bočne panele */
  --bg-highlight: rgba(238, 240, 243, 1);   /* za hover / isticanje */
  --bg-subtle:    rgba(245, 246, 248, 1);   /* za suptilne zone */
  
  /* ----- Tekst (od najtamnijeg ka svetlijem) ----- */
  --text-main:    rgba(30, 41, 59, 1);      /* tamno sivo-plava */
  --text-main-rgb: 30, 41, 59;
  --text-secondary: rgba(51, 65, 85, 1);    /* za podnaslove */
  --text-muted:   rgba(100, 116, 139, 1);   /* za sekundarni tekst */
  --text-light:   rgba(148, 163, 184, 1);   /* za najsvetliji tekst */
  
  /* ----- Akcenat (zlato) ----- */
  --accent:       rgba(164, 140, 78, 1);    /* osnovno zlato */
  --accent-hover: rgba(134, 111, 54, 1);    /* tamnije za hover */
  --accent-light: rgba(194, 169, 102, 1);    /* svetlije za pozadine akcenta */
  
  /* ----- Ivice, senke i zaobljenja (fluidne) ----- */
  --border-color: rgba(209, 213, 219, 1);
  --card-radius: clamp(4px, 0.6vw, 16px);   /* fluidno zaobljenje */
  --shadow: 0 clamp(1px, 0.15vw, 4px) clamp(4px, 0.6vw, 16px) rgba(0, 0, 0, 0.06);
  
  /* ----- Transparentne varijante (za slojeve) ----- */
  --text-main-50:  rgba(30, 41, 59, 0.5);
  --text-main-30:  rgba(30, 41, 59, 0.3);
  --text-main-80:  rgba(30, 41, 59, 0.8);
  --text-muted-50: rgba(100, 116, 139, 0.5);
  --bg-card-50:    rgba(255, 255, 255, 0.5);
  --bg-card-80:    rgba(255, 255, 255, 0.8);

  /* ----- Fluidne veličine fontova (bez medijskih upita) ----- */
  --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 (padding, margin, gap) ----- */
  --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"] {
  --bg-body:      rgba(11, 17, 32, 1);
  --bg-header:    rgba(21, 32, 50, 1);
  --bg-card:      rgba(30, 41, 59, 1);
  --bg-panel:     rgba(26, 37, 56, 1);
  --bg-highlight: rgba(38, 51, 72, 1);
  --bg-subtle:    rgba(17, 27, 46, 1);
  
  --text-main:    rgba(241, 245, 249, 1);
  --text-main-rgb: 241, 245, 249;
  --text-secondary: rgba(203, 213, 225, 1);
  --text-muted:   rgba(148, 163, 184, 1);
  --text-light:   rgba(100, 116, 139, 1);
  
  --accent:       rgba(164, 140, 78, 1);    /* osnovno zlato */
  --accent-hover: rgba(134, 111, 54, 1);    /* tamnije za hover */
  --accent-light: rgba(194, 169, 102, 1);    /* svetlije za pozadine akcenta */
  
  --border-color: rgba(51, 65, 85, 1);
  --shadow: 0 clamp(1px, 0.15vw, 4px) clamp(4px, 0.6vw, 16px) rgba(0, 0, 0, 0.5);
  
  --text-main-50:  rgba(241, 245, 249, 0.5);
  --text-main-30:  rgba(241, 245, 249, 0.3);
  --text-main-80:  rgba(241, 245, 249, 0.8);
  --text-muted-50: rgba(148, 163, 184, 0.5);
  --bg-card-50:    rgba(30, 41, 59, 0.5);
  --bg-card-80:    rgba(30, 41, 59, 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 */
}

/* ============================================================
    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);
}