/* ========================================================================== Premium News 2026 — Design Tokens ========================================================================== */ :root { /* ---- Boje: osnovne ---- */ --pn-white: #ffffff; --pn-bg: #ffffff; --pn-bg-subtle: #f7f8fa; --pn-bg-muted: #eef0f3; --pn-black: #0a0b0d; --pn-text: #14161a; --pn-text-secondary: #565b66; --pn-text-tertiary: #8a8f99; --pn-border: #e6e8ec; --pn-border-strong: #d2d5db; /* ---- Akcent boja: plava ---- */ --pn-accent: #1a56db; --pn-accent-hover: #1445b0; --pn-accent-light: #eaf0fd; --pn-accent-tint: rgba(26, 86, 219, 0.08); /* ---- Semantičke boje ---- */ --pn-success: #16794f; --pn-error: #d92d20; /* ---- Tipografija ---- */ --pn-font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pn-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pn-fs-xs: 0.75rem; /* 12px */ --pn-fs-sm: 0.875rem; /* 14px */ --pn-fs-base: 1rem; /* 16px */ --pn-fs-md: 1.125rem; /* 18px */ --pn-fs-lg: 1.375rem; /* 22px */ --pn-fs-xl: 1.75rem; /* 28px */ --pn-fs-2xl: 2.25rem; /* 36px */ --pn-fs-3xl: 3rem; /* 48px */ --pn-fs-hero: 3.25rem; /* 52px */ --pn-lh-tight: 1.15; --pn-lh-snug: 1.35; --pn-lh-normal: 1.6; --pn-lh-relaxed: 1.75; /* ---- Razmaci ---- */ --pn-space-1: 0.25rem; --pn-space-2: 0.5rem; --pn-space-3: 0.75rem; --pn-space-4: 1rem; --pn-space-5: 1.5rem; --pn-space-6: 2rem; --pn-space-7: 2.5rem; --pn-space-8: 3rem; --pn-space-9: 4rem; --pn-space-10: 5rem; /* ---- Container ---- */ --pn-container-max: 1280px; --pn-container-padding: 1.5rem; /* ---- Radius ---- */ --pn-radius-sm: 8px; --pn-radius-md: 12px; --pn-radius-lg: 16px; --pn-radius-xl: 18px; --pn-radius-full: 999px; /* ---- Senke ---- */ --pn-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --pn-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08); --pn-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12); --pn-shadow-hover: 0 16px 40px rgba(16, 24, 40, 0.16); /* ---- Tranzicije ---- */ --pn-ease: cubic-bezier(0.4, 0, 0.2, 1); --pn-transition-fast: 150ms var(--pn-ease); --pn-transition-base: 250ms var(--pn-ease); --pn-transition-slow: 400ms var(--pn-ease); /* ---- Header ---- */ --pn-header-height: 76px; --pn-header-height-scrolled: 64px; /* ---- Z-index skala ---- */ --pn-z-header: 100; --pn-z-overlay: 200; --pn-z-modal: 300; --pn-z-toast: 400; } /* ========================================================================== Dark Mode — aktivira se preko [data-theme="dark"] na ========================================================================== */ [data-theme='dark'] { --pn-bg: #0e1013; --pn-bg-subtle: #16181c; --pn-bg-muted: #1e2126; --pn-black: #ffffff; --pn-text: #f2f3f5; --pn-text-secondary: #a8adb8; --pn-text-tertiary: #767c88; --pn-border: #262a31; --pn-border-strong: #34383f; --pn-accent: #4d82f3; --pn-accent-hover: #6f9af6; --pn-accent-light: rgba(77, 130, 243, 0.15); --pn-accent-tint: rgba(77, 130, 243, 0.12); --pn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --pn-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --pn-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); --pn-shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.55); }