/* ==========================================================================
   ACTIVE NETWORKING - GLOBALS CSS
   Główny plik stylów z bazowymi ustawieniami dla całej aplikacji
   ========================================================================== */

/* Import czcionki Inter z Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ==========================================================================
   CSS RESET & BAZOWE USTAWIENIA
   ========================================================================== */

/* Box sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Usunięcie domyślnych marginesów i paddingów */
* {
  margin: 0;
  padding: 0;
}

/* Ustawienia HTML i Body */
html {
  /* Smooth scrolling */
  scroll-behavior: smooth;
  /* Lepsze renderowanie tekstu */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ustawienie wysokości */
  height: 100%;
}

body {
  /* Czcionka Inter jako domyślna */
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  
  /* Domyślne tło - background (gray-50) */
  background-color: #f9fafb;
  
  /* Domyślny kolor tekstu - text-primary (gray-800) */
  color: #1f2937;
  
  /* Typografia */
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  
  /* Layout */
  min-height: 100vh;
  overflow-x: hidden;
  
  /* Lepsze renderowanie tekstu */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TYPOGRAFIA BAZOWA
   ========================================================================== */

/* Nagłówki */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.5em;
  color: #1f2937; /* text-primary */
}

h1 {
  font-size: 2.25rem; /* 36px */
  font-weight: 700;
  line-height: 1.111; /* 40px */
}

h2 {
  font-size: 1.875rem; /* 30px */
  font-weight: 600;
  line-height: 1.2; /* 36px */
}

h3 {
  font-size: 1.5rem; /* 24px */
  font-weight: 600;
  line-height: 1.333; /* 32px */
}

h4 {
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  line-height: 1.4; /* 28px */
}

h5 {
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  line-height: 1.556; /* 28px */
}

h6 {
  font-size: 1rem; /* 16px */
  font-weight: 500;
  line-height: 1.5; /* 24px */
}

/* Akapity */
p {
  margin-bottom: 1em;
  color: #1f2937; /* text-primary */
}

/* Tekst pomocniczy */
.text-secondary {
  color: #4b5563; /* text-secondary (gray-600) */
}

.text-tertiary {
  color: #6b7280; /* text-tertiary (gray-500) */
}

/* ==========================================================================
   LINKI
   ========================================================================== */

a {
  color: #0d9488; /* primary-600 */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #0f766e; /* primary-700 */
  text-decoration: underline;
}

a:focus {
  outline: 2px solid #0d9488; /* primary-600 */
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   FORMULARZE
   ========================================================================== */

/* Reset dla elementów formularzy */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Podstawowe style dla inputów */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  border: 1px solid #d1d5db; /* secondary-300 */
  border-radius: 6px;
  padding: 8px 12px;
  background-color: #ffffff; /* background-secondary */
  color: #1f2937; /* text-primary */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #0d9488; /* primary-600 */
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1); /* primary-600 with opacity */
}

::placeholder {
  color: #9ca3af; /* secondary-400 */
}

/* ==========================================================================
   SELEKCJA TEKSTU
   ========================================================================== */

::selection {
  background-color: #ccfbf1; /* primary-100 */
  color: #134e4a; /* primary-900 */
}

::-moz-selection {
  background-color: #ccfbf1; /* primary-100 */
  color: #134e4a; /* primary-900 */
}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f3f4f6; /* secondary-100 */
}

::-webkit-scrollbar-thumb {
  background: #9ca3af; /* secondary-400 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280; /* secondary-500 */
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #9ca3af #f3f4f6; /* secondary-400 secondary-100 */
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Focus visible dla lepszej dostępności */
*:focus-visible {
  outline: 2px solid #0d9488; /* primary-600 */
  outline-offset: 2px;
  border-radius: 2px;
}

/* Ukryj outline dla myszy, pokaż dla klawiatury */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Reduced motion dla użytkowników z preferencjami */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Layout utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.container-fluid {
  width: 100%;
  padding: 0 16px;
}

/* Text utilities */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Display utilities */
.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

/* Spacing utilities (bazowane na systemie 8px) */
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-6 { margin-bottom: 48px; }
.mb-8 { margin-bottom: 64px; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-6 { margin-top: 48px; }
.mt-8 { margin-top: 64px; }

.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }
.p-4 { padding: 32px; }
.p-6 { padding: 48px; }
.p-8 { padding: 64px; }

/* ==========================================================================
   DARK MODE PREPARATION
   ========================================================================== */

/* Przygotowanie na dark mode */
@media (prefers-color-scheme: dark) {
  /* 
   * Tutaj można dodać style dla dark mode w przyszłości
   * Przykład:
   * body {
   *   background-color: #1f2937;
   *   color: #f9fafb;
   * }
   */
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.3;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  p, li {
    orphans: 3;
    widows: 3;
  }
  
  a {
    text-decoration: underline;
  }
  
  a[href^="http"]:after {
    content: " (" attr(href) ")";
  }
}