/* ============================================
   VARIABLES.CSS — JEDINO MJESTO ZA DIZAJN
   Mijenjaj samo ovaj fajl za promjenu izgleda
   ============================================ */

:root {

  /* ============================================
     BOJE
     ============================================ */
  --color-primary:        #1a1a1a;
  --color-secondary:      #555555;
  --color-accent:         #1a1a1a;
  --color-text:           #1a1a1a;
  --color-text-light:     #555555;
  --color-background:     #f0efed;   /* sekcije 1, 3, 5 */
  --color-background-alt: #f9f9f9;   /* sekcije 2, 4 */
  --color-border:         rgba(0, 0, 0, 0.07);
  --color-white:          #ffffff;
  --color-black:          #000000;

  /* ============================================
     BUTTONI
     ============================================ */
  --btn-bg:              var(--color-accent);
  --btn-color:           #ffffff;
  --btn-hover-bg:        #333333;
  --btn-hover-color:     #ffffff;
  --btn-border-radius:   100px;
  --btn-padding:         14px 28px;

  /* ============================================
     LINKOVI
     ============================================ */
  --link-color:          var(--color-accent);
  --link-hover-color:    var(--color-primary);
  --link-decoration:     none;

  /* ============================================
     FONTOVI
     ============================================ */
  --font-heading:        'Playfair Display', serif;
  --font-body:           'DM Sans', sans-serif;

  /* ============================================
     VELIČINE FONTOVA
     ============================================ */
  --font-size-h1:        clamp(2.4rem, 6vw, 4rem);
  --font-size-h2:        clamp(1.6rem, 4vw, 2.6rem);
  --font-size-h3:        clamp(1rem, 2vw, 1.2rem);
  --font-size-body:      clamp(0.9rem, 1.5vw, 1.05rem);
  --font-size-small:     0.8125rem;

  /* ============================================
     TEŽINA FONTOVA
     ============================================ */
  --font-weight-heading: 600;
  --font-weight-body:    300;
  --font-weight-medium:  500;

  /* ============================================
     RAZMACI
     ============================================ */
  --spacing-section:     100px;
  --spacing-section-md:  72px;
  --spacing-section-sm:  56px;
  --container-max:       1100px;
  --container-padding:   24px;

  /* ============================================
     BREAKPOINTI — ne mijenjaj
     ============================================ */
  --bp-mobile:           480px;
  --bp-tablet:           768px;
  --bp-laptop:           1024px;
  --bp-desktop:          1280px;

  /* ============================================
     SJENE I TRANZICIJE
     ============================================ */
  --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md:           0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg:           0 8px 32px rgba(0, 0, 0, 0.14);
  --transition:          0.25s ease;
  --radius:              12px;
  --radius-pill:         100px;
}