/* ==========================================================================
   SIMPLIFIED STYLE CONFIG - Uproszczona konfiguracja stylów
   ========================================================================== */

:root {
  /* ==========================================================================
     FONTS - Fonty
     ========================================================================== */
  
  --font-primary: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-secondary: "Lato", sans-serif;
  --font-heading: "Lato", sans-serif;
  --font-body: "Lato", sans-serif;
  --font-mono: "SF Mono", Monaco, Inconsolata, "Roboto Mono", monospace;

  /* ==========================================================================
     MAIN COLORS - Główne kolory
     ========================================================================== */
  
  /* Primary & Secondary */
  --color-primary: #004080;
  --color-primary-hover: #0056b3;
  --color-secondary: #6c757d;
  --color-secondary-hover: #545b62;
  
  /* Text Colors */
  --color-text: #2c3e50;
  --color-text-light: #6c757d;
  --color-text-white: #ffffff;
  
  /* Background Colors */
  --color-bg: #ffffff;
  --color-bg-light: #f8f9fa;
  --color-bg-dark: #2c3e50;
  
  /* ==========================================================================
     SECTIONS - Sekcje strony
     ========================================================================== */
  
  /* Header */
  --header-bg: #ffffff;
  --header-bg-transparent: rgba(255, 255, 255, 0);
  --header-bg-semi: rgba(255, 255, 255, 0.9);
  --header-text: #2c3e50;
  --header-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  /* Footer */
  --footer-bg: #2c3e50;
  --footer-text: #ffffff;
  --footer-text-muted: #bdc3c7;
  
  /* Hero Sections */
  --hero-bg: url('/assets/images/bg.webp') no-repeat top center/cover;
  --hero-overlay: rgba(0, 0, 0, 0.5);
  --hero-text: #ffffff;
  
  /* Content Areas */
  --content-bg: #ffffff;
  --content-text: #2c3e50;
  
  /* Cards */
  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
  --card-shadow-hover: 0 8px 15px rgba(0,0,0,0.2);
  
  /* Forms */
  --form-bg: #f8f9fa;
  --form-input-bg: #ffffff;
  --form-input-border: #6c757d;
  --form-input-focus: #004080;
  
  /* ==========================================================================
     STATUS COLORS - Kolory statusów (opcjonalne)
     ========================================================================== */
  
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  
  /* ==========================================================================
     BASIC SPACING & SIZING - Podstawowe rozmiary
     ========================================================================== */
  
  /* Basic spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  
  /* Border radius */
  --radius: 4px;
  --radius-lg: 8px;
  
  /* Transitions */
  --transition: all 0.3s ease;
}

/* ==========================================================================
   UTILITY CLASSES - Podstawowe klasy
   ========================================================================== */

/* Font utilities */
.font-primary { font-family: var(--font-primary); }
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

/* Color utilities */
.color-primary { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }
.color-text { color: var(--color-text); }
.color-text-light { color: var(--color-text-light); }
.color-text-white { color: var(--color-text-white); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-light { background-color: var(--color-bg-light); }
.bg-dark { background-color: var(--color-bg-dark); }

/* Section utilities */
.bg-header { 
  background-color: var(--header-bg); 
  color: var(--header-text);
  box-shadow: var(--header-shadow);
}

.bg-footer { 
  background-color: var(--footer-bg); 
  color: var(--footer-text);
}

.bg-hero { 
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
}

.bg-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--hero-overlay);
  z-index: 1;
}

.bg-hero > * {
  position: relative;
  z-index: 2;
}

.bg-content { 
  background-color: var(--content-bg); 
  color: var(--content-text);
}

.bg-card { 
  background-color: var(--card-bg); 
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}

.bg-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.bg-form { 
  background-color: var(--form-bg); 
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

/* Spacing utilities */
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }