prvi kod za live uporabu

frontend/src/styles/global.css

@@ -0,0 +1,61 @@
+/* src/styles/global.css */
+@import "tailwindcss";
+
+/* 1. Reci Tailwindu v4 da skenira Flowbite komponente unutar node_modules */
+@source "../../node_modules/flowbite/**/*.js";
+
+/* 2. Učitaj Flowbite plugin koristeći v4 sintaksu */
+@plugin "flowbite/plugin";
+
+@theme {
+  --color-canvas-base: var(--app-canvas-base);
+  --color-canvas-elevated: var(--app-canvas-elevated);
+  --color-canvas-deep: var(--app-canvas-deep);
+  
+  --color-brand-primary: var(--app-brand-primary);
+  --color-brand-accent: var(--app-brand-accent);
+  --color-brand-accent-bright: var(--app-brand-accent-bright);
+  
+  --color-text-main: var(--app-text-main);
+  --color-text-muted: var(--app-text-muted);
+  --color-border-hairline: var(--app-border-hairline);
+
+  /* Registracija globalne animacije */
+  --animate-blob-float: blobFloat 10s ease-in-out infinite;
+  
+  @keyframes blobFloat {
+    0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); }
+    50% { transform: translateY(-20px) scale(1.02) rotate(1deg); }
+  }
+}
+
+/* 🌙 DARK MOD: Kada 'html' element dobije klasu .dark, varijable poprimaju Blade Runner estetiku */
+@variant dark (&:where(.dark, .dark *));
+
+/* ==============================================================================
+   🚀 DRY UTILITY KOMPONENTE (Tailwind v4 Sintaksa)
+   ============================================================================== */
+
+/* Stvaramo unificiranu bazu gumba koja radi kroz Astro i Preact */
+@utility btn-erp {
+  @apply inline-flex items-center justify-center font-sans font-bold uppercase tracking-wider text-xs px-4 py-2.5 rounded-md shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+/* Primarni gumb (Popravljen s ispravnom v4 prozirnošću na hoveru) */
+@utility btn-erp-primary {
+  /* ✅ POPRAVLJENO: bg-brand-primary/90 postavlja prozirnost izravno na boju tijekom hover stanja */
+  @apply btn-erp bg-brand-primary text-white hover:bg-brand-primary/90 active:scale-[0.98];
+}
+
+/* Opcionalni Outline gumb */
+@utility btn-erp-outline {
+  @apply btn-erp border border-border-hairline text-text-muted hover:bg-canvas-deep;
+}
+
+/* Modal blur efekt — blurira main content, ali ne i Navbar */
+#main-content {
+  transition: filter 0.2s ease;
+}
+body.modal-open #main-content {
+  filter: blur(4px);
+}