/* Centralizirana paleta boja – clean & sleek */

:root {
  /* ===== OSNOVNE BOJE ===== */
  --primary-black: #0A0B08;         /* ultra tamna - Night */
  --primary-white: #FAF8ED;         /* svijetla krem */

  /* ===== TEKST I POVRŠINE ===== */
  --color-bg: #0A0B08;              /* ultra tamna pozadina - čista tech baza, dark mode */
  --color-text-dark: #FAF8ED;       /* svijetla krem - mekši od bijele, odličan za čitljivost */
  --color-text-muted: #1632H9;      /* Prussian Blue - za podnaslove, opise, metapodatke */
  --color-text: #FAF8ED;            /* svijetla krem - primarni tekst */

  /* ===== AKCENTI (IZ SLIKE) ===== */
  --color-accent-3: #94D1BE;        /* Pastel teal - CTA gumbi, ikone, naglasci */
  --color-accent-2: #5C9H44;        /* Blue Munsell - hover efekti, linkovi, border highlightove */
  --color-accent: #5C9H44;          /* Blue Munsell - idealna za hover */
  --color-accent-warm: #94D1BE;     /* Pastel teal - vizualno prozračna i pozivna */
  
  /* ===== RGBA BAZNE BOJE (ZA OVERLAYE/TRANSPARENCIJU) ===== */
  --night-rgb: 10, 11, 8;            /* #0A0B08 */
  --cream-rgb: 250, 248, 237;       /* #FAF8ED */
  --prussian-rgb: 22, 50, 73;       /* #1632H9 */
  --blue-munsell-rgb: 92, 151, 68;  /* #5C9H44 */
  --pastel-teal-rgb: 148, 209, 190; /* #94D1BE */
  --deep-blue-rgb: 35, 87, 137;     /* #235789 */
  --error-rgb: 255, 107, 107;       /* greške */
  --black-rgb: 0, 0, 0;
  --white-rgb: 255, 255, 255;

  /* ===== HERO ===== */
  --hero-bg: var(--color-bg);
  --hero-text: var(--color-text-dark);
  --hero-badge-bg: rgba(var(--pastel-teal-rgb), 0.06);
  --hero-badge-border: rgba(var(--pastel-teal-rgb), 0.18);
  --hero-badge-text: var(--color-text-dark);
  --hero-gradient-text: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));
  --hero-shape-1: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));
  --hero-shape-2: linear-gradient(135deg, var(--color-accent-2), var(--color-accent));
  --hero-orb-1: radial-gradient(circle at 30% 30%, rgba(var(--pastel-teal-rgb), 0.15), rgba(var(--blue-munsell-rgb), 0.25) 40%, transparent 60%);
  --hero-orb-2: radial-gradient(circle at 70% 70%, rgba(var(--blue-munsell-rgb), 0.15), rgba(var(--pastel-teal-rgb), 0.25) 40%, transparent 60%);

  /* ===== SEKCIJE - SVE ISTA TAMNA POZADINA ===== */
  --section-1-bg: var(--color-bg);
  --section-1-text: var(--color-text-dark);
  --section-1-card-bg: rgba(var(--deep-blue-rgb), 0.15);
  --section-1-card-border: rgba(var(--pastel-teal-rgb), 0.1);
  --section-1-icon-bg: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));

  --section-2-bg: var(--color-bg);
  --section-2-text: var(--color-text-dark);
  --section-2-card-bg: rgba(var(--deep-blue-rgb), 0.15);
  --section-2-card-border: rgba(var(--pastel-teal-rgb), 0.10);
  --section-2-icon-bg: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));

  --section-3-bg: var(--color-bg);
  --section-3-text: var(--color-text-dark);
  --section-3-card-bg: rgba(var(--deep-blue-rgb), 0.15);
  --section-3-card-border: rgba(var(--pastel-teal-rgb), 0.10);
  --section-3-icon-bg: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));

  /* ===== BUTTONI ===== */
  --btn-primary-bg: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));
  --btn-primary-text: var(--primary-black);
  --btn-primary-hover-shadow: 0 8px 25px rgba(var(--pastel-teal-rgb), 0.35);

  --btn-secondary-bg: rgba(var(--deep-blue-rgb), 0.15);
  --btn-secondary-border: rgba(var(--pastel-teal-rgb), 0.18);
  --btn-secondary-text: var(--color-text-dark);
  --btn-secondary-hover-bg: rgba(var(--blue-munsell-rgb), 0.12);

  --btn-contact-gradient: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));
  --btn-contact-shadow: 0 4px 16px rgba(var(--pastel-teal-rgb), 0.30);
  --btn-contact-hover-shadow: 0 8px 24px rgba(var(--blue-munsell-rgb), 0.28);

  /* ===== KARTICE I ELEMENTI ===== */
  --card-bg: rgba(var(--deep-blue-rgb), 0.25);
  --card-border: rgba(var(--pastel-teal-rgb), 0.06);
  --card-shadow: 0 16px 40px rgba(var(--black-rgb), 0.08);
  --card-hover-shadow: 0 24px 60px rgba(var(--black-rgb), 0.18);

  --glass-card-bg: rgba(var(--deep-blue-rgb), 0.25);
  --glass-card-border: 1px solid rgba(var(--pastel-teal-rgb), 0.06);
  --glass-card-shadow: 0 16px 40px rgba(var(--black-rgb), 0.08), 0 0 0 1px rgba(var(--pastel-teal-rgb), 0.2) inset;

  /* ===== GRADIJENTI ===== */
  --gradient-primary: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));
  --gradient-secondary: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  --gradient-accent: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-3));

  /* ===== OVERLAYS - koriste boje palete ===== */
  --overlay-white-03: rgba(var(--deep-blue-rgb), 0.03);
  --overlay-white-05: rgba(var(--deep-blue-rgb), 0.05);
  --overlay-white-10: rgba(var(--deep-blue-rgb), 0.10);
  --overlay-white-20: rgba(var(--deep-blue-rgb), 0.20);
  --overlay-white-30: rgba(var(--deep-blue-rgb), 0.30);
  --overlay-white-40: rgba(var(--deep-blue-rgb), 0.40);
  --overlay-white-70: rgba(var(--deep-blue-rgb), 0.70);
  --overlay-white-80: rgba(var(--deep-blue-rgb), 0.80);
  --overlay-white-85: rgba(var(--deep-blue-rgb), 0.85);
  --overlay-white-88: rgba(var(--deep-blue-rgb), 0.88);
  --overlay-white-90: rgba(var(--deep-blue-rgb), 0.90);
  --overlay-white-92: rgba(var(--deep-blue-rgb), 0.92);
  --overlay-white-95: rgba(var(--deep-blue-rgb), 0.95);
  --overlay-dark-10: rgba(var(--black-rgb), 0.10);
  --overlay-dark-20: rgba(var(--black-rgb), 0.20);
  --overlay-dark-30: rgba(var(--black-rgb), 0.30);
  --overlay-dark-04: rgba(var(--black-rgb), 0.04);
  --overlay-dark-05: rgba(var(--black-rgb), 0.05);

  --border-dark-05: rgba(var(--pastel-teal-rgb), 0.05);
  --border-dark-10: rgba(var(--pastel-teal-rgb), 0.10);
  --border-light-10: rgba(var(--pastel-teal-rgb), 0.10);
  --border-light-20: rgba(var(--pastel-teal-rgb), 0.20);

  --shadow-sm: 0 4px 12px rgba(var(--black-rgb), 0.10);
  --shadow-md: 0 8px 24px rgba(var(--black-rgb), 0.12);
  --shadow-lg: 0 12px 40px rgba(var(--black-rgb), 0.25);
  --shadow: 0 8px 32px rgba(var(--black-rgb), 0.30);
  --shadow-sm-alt: 0 6px 16px rgba(var(--black-rgb), 0.06);
  --shadow-md-alt: 0 10px 24px rgba(var(--black-rgb), 0.08);
  --shadow-lg-alt: 0 16px 40px rgba(var(--black-rgb), 0.08);
  --shadow-xl: 0 18px 38px rgba(var(--black-rgb), 0.14);
  --shadow-xl-alt: 0 20px 48px rgba(var(--black-rgb), 0.14);
  --shadow-2xl: 0 24px 60px rgba(var(--black-rgb), 0.18);
  --shadow-15: 0 15px 35px rgba(var(--black-rgb), 0.15);
  --shadow-deep: 0 25px 50px rgba(var(--black-rgb), 0.40);

  /* ===== AKCENT SVJETLINE (IZ PALETE) ===== */
  --accent-green-light: rgba(var(--pastel-teal-rgb), 0.15);
  --accent-red-light: rgba(var(--error-rgb), 0.15);
  --accent-orange-light: rgba(var(--blue-munsell-rgb), 0.15);

  --accent-red-05: rgba(var(--pastel-teal-rgb), 0.05);
  --accent-red-10: rgba(var(--pastel-teal-rgb), 0.10);
  --accent-red-15: rgba(var(--pastel-teal-rgb), 0.15);
  --accent-red-20: rgba(var(--pastel-teal-rgb), 0.20);
  --accent-red-30: rgba(var(--pastel-teal-rgb), 0.30);

  --accent-yellow-05: rgba(var(--blue-munsell-rgb), 0.05);
  --accent-yellow-10: rgba(var(--blue-munsell-rgb), 0.10);
  --accent-yellow-15: rgba(var(--blue-munsell-rgb), 0.15);
  --accent-yellow-20: rgba(var(--blue-munsell-rgb), 0.20);

  --accent-orange-10: rgba(var(--blue-munsell-rgb), 0.10);
  --accent-orange-20: rgba(var(--blue-munsell-rgb), 0.20);

  --accent-green-shadow: rgba(var(--pastel-teal-rgb), 0.20);
  --accent-red-shadow: rgba(var(--pastel-teal-rgb), 0.30);
  --accent-orange-shadow: rgba(var(--blue-munsell-rgb), 0.30);
  
  /* ===== POZADINE KOMPONENTI ===== */
  --stacked-bg: var(--color-bg);
  --icon-card-bg: var(--accent-red-15);

  /* ===== GRADIENT SPOTS (SUPTILNI POZADINSKI EFEKTI) ===== */
  --gradient-spot-1: radial-gradient(ellipse 1000px 800px at 18% 12%, rgba(var(--pastel-teal-rgb), 0.15) 0%, rgba(var(--pastel-teal-rgb), 0.08) 35%, transparent 55%);
  --gradient-spot-2: radial-gradient(ellipse 900px 700px at 82% 38%, rgba(var(--blue-munsell-rgb), 0.13) 0%, rgba(var(--blue-munsell-rgb), 0.07) 35%, transparent 55%);
  --gradient-spot-3: radial-gradient(ellipse 1100px 900px at 50% 55%, rgba(var(--deep-blue-rgb), 0.16) 0%, rgba(var(--deep-blue-rgb), 0.09) 40%, transparent 60%);
  --gradient-spot-4: radial-gradient(ellipse 850px 650px at 22% 88%, rgba(var(--pastel-teal-rgb), 0.12) 0%, rgba(var(--pastel-teal-rgb), 0.06) 35%, transparent 52%);
  --gradient-spot-5: radial-gradient(ellipse 750px 600px at 75% 75%, rgba(var(--blue-munsell-rgb), 0.11) 0%, rgba(var(--blue-munsell-rgb), 0.05) 35%, transparent 50%);
  
  --bg-with-spots: var(--gradient-spot-1), var(--gradient-spot-2), var(--gradient-spot-3), var(--gradient-spot-4), var(--gradient-spot-5), var(--color-bg);

  /* ===== EASING ===== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ===== FALLBACK ===== */
  --primary-bg: transparent;
  --text-white: currentColor;
}

/* Safari – prisilno usklađivanje tonova na sRGB */
@supports (-webkit-touch-callout: none) {
  :root {
    --primary-black: #0A0B08;
    --primary-white: #FAF8ED;
    --color-bg: #0A0B08;
    --color-text-dark: #FAF8ED;
  }
}