/* =====================================================================
   TEMA — Strojobravarski obrt Darko Draženović
   ---------------------------------------------------------------------
   Ovdje mijenjaš boje, fontove, zaobljenja i sjene za CIJELI sajt.
   Svaka varijabla se koristi u style.css, pa je dovoljno promijeniti
   vrijednost ovdje i promjena se vidi svugdje.
   ===================================================================== */

:root {
  /* ---------- GLAVNA PLAVA (iz loga i starog sajta: #144394 / #003399) ---------- */
  --plava-950: #050f2b;   /* najtamnija — pozadina hero sekcije i footera */
  --plava-900: #0a1a45;
  --plava-800: #0e2766;
  --plava-700: #123590;
  --plava-600: #144394;   /* ⟵ BRAND PLAVA (logo) */
  --plava-500: #1f56c4;
  --plava-400: #3f7bea;
  --plava-300: #7aa6f5;
  --plava-200: #b9cffa;
  --plava-100: #e3ecfd;
  --plava-50:  #f3f7ff;

  /* ---------- NAGLASAK (narančasta iz loga, #ffa408) ---------- */
  --naglasak:        #ffa408;
  --naglasak-svijetli:#ffc04d;
  --naglasak-tamni:  #e08a00;

  /* ---------- NEUTRALNE (čelik / metal) ---------- */
  --celik-900: #111827;
  --celik-700: #374151;
  --celik-500: #6b7280;
  --celik-300: #cbd2dc;
  --celik-100: #eef1f5;
  --bijela:    #ffffff;

  /* ---------- SEMANTIČKE BOJE (koriste se u layoutu) ---------- */
  --boja-pozadina:      var(--bijela);
  --boja-pozadina-alt:  var(--plava-50);
  --boja-tekst:         var(--celik-900);
  --boja-tekst-blagi:   var(--celik-500);
  --boja-naslov:        var(--plava-900);
  --boja-link:          var(--plava-600);
  --boja-link-hover:    var(--plava-500);
  --boja-rub:           #dde4f0;
  --boja-tamna-pozadina:var(--plava-950);
  --boja-tamni-tekst:   #c9d6f2;

  /* ---------- GRADIJENTI ---------- */
  --grad-plavi:  linear-gradient(135deg, var(--plava-600) 0%, var(--plava-400) 100%);
  --grad-tamni:  radial-gradient(1200px 600px at 75% 20%, rgba(31, 86, 196, .55), transparent 60%),
                 radial-gradient(900px 500px at 10% 90%, rgba(20, 67, 148, .6), transparent 60%),
                 linear-gradient(180deg, var(--plava-950) 0%, var(--plava-900) 100%);
  --grad-naglasak: linear-gradient(135deg, var(--naglasak-svijetli), var(--naglasak-tamni));
  --grad-metal:  linear-gradient(135deg, #e9edf3 0%, #ffffff 45%, #dfe5ee 100%);

  /* ---------- FONTOVI ---------- */
  --font-naslov: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-tekst:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero:  clamp(2.7rem, 5.2vw, 4.9rem);
  --fs-h2:    clamp(2.1rem, 4.4vw, 3.5rem);
  --fs-h3:    clamp(1.3rem, 2vw, 1.6rem);
  --fs-tekst: 1.0625rem;
  --fs-mali:  .875rem;

  /* ---------- OBLIK ---------- */
  --radius-s:  8px;
  --radius-m:  16px;
  --radius-l:  28px;
  --radius-pill: 999px;

  --sjena-s: 0 2px 8px rgba(10, 26, 69, .08);
  --sjena-m: 0 12px 32px -8px rgba(10, 26, 69, .18);
  --sjena-l: 0 30px 60px -20px rgba(10, 26, 69, .35);
  --sjena-sjaj: 0 0 0 1px rgba(63, 123, 234, .25), 0 20px 50px -15px rgba(31, 86, 196, .55);

  /* ---------- RAZMACI I ŠIRINE ---------- */
  --sirina-max: 1240px;
  --razmak-sekcija: clamp(5rem, 10vw, 8.5rem);
  --visina-header: 76px;

  /* ---------- ANIMACIJE ---------- */
  --ease: cubic-bezier(.22, .9, .3, 1);
  --trajanje: .6s;
}