/**
 * Management Solutions - Design System
 * Centralizované CSS premenné pre celú stránku
 * Verzia: 1.0.1
 */

html {
   scroll-behavior: smooth;
   scroll-padding-top: 100px;
}

:root {
   /* ═══════════════════════════════════════════════════════════════
       PRIMÁRNE FARBY (Žltá - Brand)
       ═══════════════════════════════════════════════════════════════ */
   --primary: #FDC600;
   --primary-hover: #e0b000;
   --primary-active: #c99e00;
   --primary-light: rgba(253, 198, 0, 0.12);
   --primary-lighter: rgba(253, 198, 0, 0.06);

   /* ═══════════════════════════════════════════════════════════════
       ACCENT FARBY (Modrá - CTA, Linky)
       ═══════════════════════════════════════════════════════════════ */
   --accent: #005588;
   --accent-hover: #004870;
   --accent-active: #003a5c;
   --accent-light: rgba(0, 85, 136, 0.12);
   --accent-lighter: rgba(0, 85, 136, 0.06);

   /* ═══════════════════════════════════════════════════════════════
       TMAVÉ FARBY (Text, Hero, Kontrasty)
       ═══════════════════════════════════════════════════════════════ */
   --dark: #161615;
   --dark-soft: #1a1a19;
   --dark-hero: #213035;
   /* Hero sekcie */
   --dark-deep: #141414;
   /* Alternatíva pre Hero - údernejšia */
   --cta-bg: #19262B;
   /* CTA pozadie */

   /* ═══════════════════════════════════════════════════════════════
       POZADIA (Surfaces)
       ═══════════════════════════════════════════════════════════════ */
   --bg: #F0F0F0;
   /* Hlavné pozadie stránky */
   --bg-surface: #ffffff;
   /* Karty, modály */
   --bg-subtle: #f9fafb;
   /* Jemné pozadie (tabuľky, summary) */
   --bg-muted: #f3f4f6;
   /* Tlmené pozadie (hover stavy) */
   --bg-elevated: #ffffff;
   /* Vyvýšené elementy */

   /* ═══════════════════════════════════════════════════════════════
       BORDER FARBY
       ═══════════════════════════════════════════════════════════════ */
   --border: #e2e8f0;
   /* Štandardný border */
   --border-light: #e5e7eb;
   /* Jemný border */
   --border-strong: #d1d5db;
   /* Výraznejší border */
   --border-focus: var(--accent);
   /* Focus stav */

   /* ═══════════════════════════════════════════════════════════════
       TEXT FARBY
       ═══════════════════════════════════════════════════════════════ */
   --text: #161615;
   /* Hlavný text */
   --text-secondary: #374151;
   /* Sekundárny text */
   --text-muted: #64748b;
   /* Tlmený text (meta info) */
   --text-subtle: #6b7280;
   /* Jemný text */
   --text-placeholder: #a1a1aa;
   /* Placeholder */
   --text-disabled: #d1d5db;
   /* Disabled stav */
   --text-inverse: #ffffff;
   /* Text na tmavom pozadí */

   /* ═══════════════════════════════════════════════════════════════
       STAVOVÉ FARBY
       ═══════════════════════════════════════════════════════════════ */
   /* Success */
   --success: #16a34a;
   --success-hover: #15803d;
   --success-light: #dcfce7;
   --success-border: #86efac;

   /* Error */
   --error: #E53220;
   --error-hover: #c82717;
   --error-light: rgba(229, 50, 32, 0.08);
   --error-border: #fca5a5;

   /* Warning */
   --warning: #f59e0b;
   --warning-hover: #d97706;
   --warning-light: #fef3c7;
   --warning-border: #fcd34d;

   /* Info */
   --info: #0ea5e9;
   --info-hover: #0284c7;
   --info-light: #e0f2fe;
   --info-border: #7dd3fc;

   /* ═══════════════════════════════════════════════════════════════
       BADGE/TAG FARBY
       ═══════════════════════════════════════════════════════════════ */
   --badge-new-bg: #dbeafe;
   --badge-new-text: #1e40af;
   --badge-urgent-bg: #fee2e2;
   --badge-urgent-text: #991b1b;
   --badge-immediate-bg: #dcfce7;
   --badge-immediate-text: #166534;
   --badge-neutral-bg: var(--bg-muted);
   --badge-neutral-text: var(--text-secondary);

   /* ═══════════════════════════════════════════════════════════════
       DEKORATÍVNE FARBY
       ═══════════════════════════════════════════════════════════════ */
   --divider: rgba(255, 255, 255, 0.43);
   --divider-dark: rgba(22, 22, 21, 0.08);
   --glass: rgba(255, 255, 255, 0.06);
   --overlay: rgba(22, 22, 21, 0.5);

   /* ═══════════════════════════════════════════════════════════════
       INPUT ŠTÝLY
       ═══════════════════════════════════════════════════════════════ */
   --input-bg: #f8fafc;
   /* Jemné sivé pozadie */
   --input-bg-focus: #ffffff;
   /* Biele pri focus */
   --input-bg-disabled: var(--bg-muted);
   --input-border: var(--border);
   --input-border-hover: var(--border-strong);
   --input-border-focus: var(--accent);
   --input-text: var(--text);
   --input-placeholder: var(--text-placeholder);
   --input-height: 46px;
   --input-height-sm: 38px;
   --input-height-lg: 54px;
   --input-padding-x: 1rem;
   --input-padding-y: 0.75rem;

   /* ═══════════════════════════════════════════════════════════════
       PAGINATION
       ═══════════════════════════════════════════════════════════════ */
   --pagination-bg: var(--bg-surface);
   --pagination-border: var(--border);
   --pagination-text: var(--text-muted);
   --pagination-active-bg: var(--accent);
   --pagination-active-text: var(--text-inverse);
   --pagination-active-border: var(--accent);
   --pagination-hover-border: var(--accent);
   --pagination-hover-text: var(--accent);

   /* ═══════════════════════════════════════════════════════════════
       TYPOGRAPHY
       ═══════════════════════════════════════════════════════════════ */
   --font-family-base: "Instrument Sans", sans-serif;
   --font-family-heading: "Instrument Sans", sans-serif;

   --font-size-xs: 0.75rem;
   /* 12px */
   --font-size-sm: 0.875rem;
   /* 14px */
   --font-size-base: 1rem;
   /* 16px */
   --font-size-md: 1.125rem;
   /* 18px */
   --font-size-lg: 1.25rem;
   /* 20px */
   --font-size-xl: 1.5rem;
   /* 24px */
   --font-size-2xl: 2rem;
   /* 32px */
   --font-size-3xl: 2.5rem;
   /* 40px */
   --font-size-4xl: 3rem;
   /* 48px */

   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;

   /* COMPONENT VARIABLES */
   --hero-title-size: clamp(3rem, 5vw, 4rem);
   --hero-title-weight: 800;
   --hero-title-line-height: 1.1;
   --hero-title-letter-spacing: -0.02em;
   --hero-subtitle-size: clamp(1.125rem, 2vw, 1.35rem);
   /* Increased based on feedback */
   --line-height-tight: 1.2;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.75;

   /* ═══════════════════════════════════════════════════════════════
       HERO PADDING (Standardized)
       ═══════════════════════════════════════════════════════════════ */
   --hero-padding-top-desktop: 10rem;
   --hero-padding-top-mobile: 8rem;
   --hero-padding-bottom-desktop: var(--section-spacing-desktop);
   --hero-padding-bottom-mobile: var(--section-spacing-mobile);

   /* ═══════════════════════════════════════════════════════════════
       HEADING SIZES (Fluid)
       ═══════════════════════════════════════════════════════════════ */
   --h1-size: clamp(2rem, 5vw, 3.75rem);
   --h2-size: clamp(1.75rem, 4vw, 3rem);
   --h3-size: clamp(1.5rem, 3vw, 2.5rem);
   --h4-size: clamp(1.25rem, 2.5vw, 2rem);
   --h5-size: clamp(1.125rem, 2vw, 1.5rem);
   --h6-size: clamp(1rem, 1.5vw, 1.25rem);
}


/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY RESET
   ═══════════════════════════════════════════════════════════════════════ */
body {
   font-weight: var(--font-weight-normal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
   color: var(--text);
   margin-bottom: 0.75em;
}

h1 {
   font-size: var(--h1-size);
   font-weight: var(--font-weight-extrabold);
}

h2 {
   font-size: var(--h2-size);
}

h3 {
   font-size: var(--h3-size);
}

h4 {
   font-size: var(--h4-size);
}

h5 {
   font-size: var(--h5-size);
}

h6 {
   font-size: var(--h6-size);
}

@media (max-width: 768px) {
   :root {
      --hero-title-letter-spacing: 0;
   }
}

:root {
   /* ═══════════════════════════════════════════════════════════════
       BORDER RADIUS
       ═══════════════════════════════════════════════════════════════ */
   --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-full: 9999px;

   /* ═══════════════════════════════════════════════════════════════
       TIENE
       ═══════════════════════════════════════════════════════════════ */
   --shadow-xs: 0 1px 2px rgba(20, 20, 20, 0.04);
   --shadow-sm: 0 2px 4px rgba(20, 20, 20, 0.06);
   --shadow: 0 6px 18px rgba(20, 20, 20, 0.08);
   --shadow-md: 0 8px 24px rgba(20, 20, 20, 0.1);
   --shadow-lg: 0 10px 30px rgba(20, 20, 20, 0.12);
   --shadow-xl: 0 20px 40px rgba(20, 20, 20, 0.16);
   --shadow-focus: 0 0 0 3px var(--accent-light);
   --shadow-focus-primary: 0 0 0 3px var(--primary-light);

   /* ═══════════════════════════════════════════════════════════════
       PRECHODY
       ═══════════════════════════════════════════════════════════════ */
   --transition-fast: 0.15s ease;
   --transition: 0.2s ease;
   --transition-slow: 0.3s ease;

   /* ═══════════════════════════════════════════════════════════════
       SPACING (voliteľné)
       ═══════════════════════════════════════════════════════════════ */
   --space-xs: 4px;
   --space-sm: 8px;
   --space-md: 16px;
   --space-lg: 24px;
   --space-xl: 32px;
   --space-2xl: 48px;

   --section-spacing-desktop: 100px;
   --section-spacing-mobile: 50px;

   /* ═══════════════════════════════════════════════════════════════
       GRADIENTY
       ═══════════════════════════════════════════════════════════════ */
   --gradient-primary: linear-gradient(180deg, #FDC600 0%, #e0b000 100%);
   --gradient-accent: linear-gradient(135deg, #005588 0%, #004466 100%);
   --gradient-dark: linear-gradient(180deg, #213035 0%, #141414 100%);
   --gradient-hero: linear-gradient(180deg, var(--dark-hero) 0%, var(--dark-deep) 100%);
   --gradient-surface: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);

   /* ═══════════════════════════════════════════════════════════════
       LAYOUT & ANIMATIONS
       ═══════════════════════════════════════════════════════════════ */
   --container-width: 1280px;
   --container-padding: 20px;
   --transition-duration: 0.2s;
}

/* ═══════════════════════════════════════════════════════════════════════
   MARGIN UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */
.mt-1 {
   margin-top: 0.25rem !important;
}

.mt-2 {
   margin-top: 0.5rem !important;
}

.mt-3 {
   margin-top: 0.75rem !important;
}

.mt-4 {
   margin-top: 1rem !important;
}

.mt-5 {
   margin-top: 1.5rem !important;
}

.mt-6 {
   margin-top: 2rem !important;
}

.mb-1 {
   margin-bottom: 0.25rem !important;
}

.mb-2 {
   margin-bottom: 0.5rem !important;
}

.mb-3 {
   margin-bottom: 0.75rem !important;
}

.mb-4 {
   margin-bottom: 1rem !important;
}

.mb-5 {
   margin-bottom: 1.5rem !important;
}

.mb-6 {
   margin-bottom: 2rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translate3d(0, 30px, 0);
   }

   to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

.scroll-hidden {
   opacity: 0;
}

.scroll-in-view {
   animation: fadeInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY TRIEDY - FARBY POZADIA
   ═══════════════════════════════════════════════════════════════════════ */
.bg-primary {
   background-color: var(--primary) !important;
}

.bg-primary-light {
   background-color: var(--primary-light) !important;
}

.bg-accent {
   background-color: var(--accent) !important;
}

.bg-accent-light {
   background-color: var(--accent-light) !important;
}

.bg-dark {
   background-color: var(--dark) !important;
}

.bg-dark-hero {
   background-color: var(--dark-hero) !important;
}

.bg-surface {
   background-color: var(--bg-surface) !important;
}

.bg-subtle {
   background-color: var(--bg-subtle) !important;
}

.bg-muted {
   background-color: var(--bg-muted) !important;
}

.bg-success {
   background-color: var(--success-light) !important;
}

.bg-error {
   background-color: var(--error-light) !important;
}

.bg-warning {
   background-color: var(--warning-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY TRIEDY - FARBY TEXTU
   ═══════════════════════════════════════════════════════════════════════ */
.text-primary {
   color: var(--primary) !important;
}

.text-accent {
   color: var(--accent) !important;
}

.text-dark {
   color: var(--dark) !important;
}

.text-muted {
   color: var(--text-muted) !important;
}

.text-subtle {
   color: var(--text-subtle) !important;
}

.text-inverse {
   color: var(--text-inverse) !important;
}

.text-success {
   color: var(--success) !important;
}

.text-error {
   color: var(--error) !important;
}

.text-warning {
   color: var(--warning) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY TRIEDY - BORDER
   ═══════════════════════════════════════════════════════════════════════ */
.border {
   border: 1px solid var(--border) !important;
}

.border-light {
   border: 1px solid var(--border-light) !important;
}

.border-strong {
   border: 1px solid var(--border-strong) !important;
}

.border-primary {
   border-color: var(--primary) !important;
}

.border-accent {
   border-color: var(--accent) !important;
}

.border-success {
   border-color: var(--success-border) !important;
}

.border-error {
   border-color: var(--error-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY TRIEDY - RADIUS
   ═══════════════════════════════════════════════════════════════════════ */
.rounded-sm {
   border-radius: var(--radius-sm) !important;
}

.rounded-md {
   border-radius: var(--radius-md) !important;
}

.rounded-lg {
   border-radius: var(--radius-lg) !important;
}

.rounded-xl {
   border-radius: var(--radius-xl) !important;
}

.rounded-full {
   border-radius: var(--radius-full) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY TRIEDY - TIENE
   ═══════════════════════════════════════════════════════════════════════ */
.shadow-sm {
   box-shadow: var(--shadow-sm) !important;
}

.shadow {
   box-shadow: var(--shadow) !important;
}

.shadow-md {
   box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
   box-shadow: var(--shadow-lg) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   UTILITY TRIEDY - LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
.container {
   width: 100%;
   max-width: 1280px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 20px;
   padding-right: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO LABEL UTILITY
   ═══════════════════════════════════════════════════════════════════════ */
.hero-label-pill {
   display: inline-block;
   font-size: var(--font-size-xs);
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: var(--primary);
   margin-bottom: 1.5rem;
   padding: 0.5rem 1rem;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL CTA SECTION
   ═══════════════════════════════════════════════════════════════════════ */

.cta-global {
   padding: var(--section-spacing-desktop) 20px;
   margin-top: 0;
   position: relative;
   overflow: hidden;
   background: var(--cta-bg);
   color: #ffffff;
}

@media (max-width: 768px) {
   .cta-global {
      padding: var(--section-spacing-mobile) 20px;
   }
}

.cta-global-content {
   max-width: 1024px;
   margin: 0 auto;
   text-align: center;
   position: relative;
   z-index: 2;
}

.cta-global-title {
   font-size: clamp(2rem, 5vw, 3rem);
   font-weight: 800;
   color: #ffffff;
   margin-bottom: 1rem;
   line-height: 1.2;
}

@media (max-width: 768px) {
   .cta-global-title {
      margin-bottom: 0.5rem;
      /* Reduced margin on mobile */
   }
}

.cta-global-text {
   font-size: clamp(1rem, 2.5vw, 1.25rem);
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 2.5rem;
   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
   line-height: 1.6;
}

.cta-global-buttons {
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
}

/* Global Typography Application */
html {
   font-size: 100%;
   /* 16px base for rem units */
   -webkit-text-size-adjust: 100%;
}

body {
   font-family: var(--font-family-base);
   color: var(--text);
   line-height: var(--line-height-normal);
}

/* Ensure form elements inherit font settings */
button,
input,
optgroup,
select,
textarea {
   font-family: inherit;
   font-size: 100%;
   line-height: 1.15;
   margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-family-heading);
   font-weight: var(--font-weight-bold);
   color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

/* Screen Reader Text - Visually hidden but accessible to screen readers */
.screen-reader-text,
.sr-only {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
   -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
   word-wrap: normal !important;
}

/* Skip Link - Visible on focus */
.skip-link {
   background-color: var(--bg-surface);
   color: var(--primary);
   font-weight: 700;
   left: 0;
   padding: 1rem;
   position: absolute;
   top: -9999px;
   z-index: 9999;
   transition: top 0.2s ease;
   text-decoration: none;
   box-shadow: var(--shadow-md);
   border-radius: 0 0 var(--radius-md) 0;
}

.skip-link:focus {
   top: 0;
   outline: 2px solid var(--primary);
   clip: auto;
   -webkit-clip-path: none;
   clip-path: none;
   height: auto;
   width: auto;
   overflow: visible;
   margin: 0;
}

/* Focus Styles - Ensure visibility */
:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}

/* Swiper Pagination - Accessible Touch Targets */
.swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   margin: 0 8px !important;
   position: relative;
}

.swiper-pagination-bullet::after {
   content: '';
   position: absolute;
   top: -12px;
   left: -12px;
   right: -12px;
   bottom: -12px;
   cursor: pointer;
}

/* Footer Links Weight */
.footer-nav-link,
.footer-contact-link,
.footer-social-link,
.footer-credits a {
   font-weight: 500;
}