/* ==========================================
   font Google and all fonts
   ==========================================*/
/* Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* ==============================
   ZMIENNE CSS DLA SZABLONU
   NORMALNA I KONTRASTOWA
   ZGODNE Z WCAG 2.0
   ============================== */



body {
    /* --- Tło --- */
    --background-color: #ffffff;   /* białe tło */
    --background-color2: #dfe4ea;  /* np. sekcje / karty */
    --background-color3: #ff4757;
  
    --background-color5: #ffffff;   /* białe tło */
     --background-color6: #151517; 
     --background-color7: #FF6348; 
  

   --gradient-color1: linear-gradient(90deg, rgba(255, 71, 87, 0.69) 0%, rgba(255, 165, 2, 0.51) 31%, rgba(255, 71, 87, 0.02) 74%);;

    /* --- Kolory tekstu --- */
    --color-primary: #000000;      /* główny tekst, nagłówki, linki */
    --color-link: #ffffff;         /* tekst linków + inne teksty */
    --color-secondary: #0d0d0f;   /* standardowy tekst */
    --color-inne: #ffffff;        /* inne teksty */
     --color-inne2: #ffffff;        /* inne teksty */
     

    /* --- Czcionki --- */
    --font-family-text: "Roboto", sans-serif;;
    --font-family-heading: "Poppins", sans-serif;

    /* --- Rozmiary tekstu i line-height --- */
   --font-size-small: 0.7rem;     /* drobny tekst, np. przypisy */
   --line-height-small: 1rem;

    --font-size-smallx: 1rem;     /* drobny tekst, np. przypisy */
   --line-height-smallx: 1.2rem;

   --font-size-base: 1.2rem;      /* tekst standardowy */
   --line-height-base: 1.4rem;

   --font-size-medium: 1.4rem;    /* podtytuły, większe elementy tekstu */
   --line-height-medium: 1.6rem;

   --font-size-large: 1.6rem;     /* nagłówki H3/H4 */
   --line-height-large: 1.9rem;

   --font-size-xlarge: 2rem;    /* nagłówki H2 */
   --line-height-xlarge: 2.3rem;

   --font-size-xxlarge: 2.5rem;   /* nagłówki H1 */
   --line-height-xxlarge: 2.9rem;

    /* --- Waga czcionki --- */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

}

/* ==============================
   FOCUS 
   ============================== */

:focus-visible,
a:active {
 outline: 8px solid #4cd137 !important;   /* czerwony fokus */
  background-color: #4cd137 !important;    /* delikatne tło, kontrast z tekstem */
               /* ciemniejszy czerwony tekst dla czytelności */
  border-radius: 0.5rem !important;
color: #fff !important;
border-color: #4cd137 !important;
 animation: pulse-focus 1s infinite;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
   outline: 8px solid #4cd137 !important;   /* zielony fokus */
   background-color: #4cd137 !important;    /* delikatne tło, kontrast z tekstem */
   border-radius: 0.5rem !important;
   color: #fff !important;
   border-color: #4cd137 !important;
   animation: pulse-focus 1s infinite;
}

/* Wymuszenie hover na całej stronie */





/* ==============================
   WERSJA KONTRASTOWA
   ============================== */
body.accessibility-contrast {
    --background-color: #0d0d0f;   /* czarne tło */
    --background-color2: #151517;  /* sekcje / karty */
    --background-color3: #FF6348;
    --background-color3: #ffa502;
     --background-color5: #0d0d0f;   /* białe tło */
     --background-color6: #000000; 
     --background-color7: #5352ed; 


    --gradient-color1: linear-gradient(90deg,rgba(255, 71, 87, 0.69) 0%, rgba(255, 165, 2, 0.73) 31%, rgba(255, 71, 87, 0.55) 74%);

    --color-primary: #ffa502;      /* nagłówki */
    --color-link: #0d0d0d;         /* linki */
    --color-secondary: #ffa502;   /* standardowy tekst */
    --color-inne: #FF6348;        /* inne teksty */
    --color-inne2: #ffa502;        /* inne teksty */

   
}

/* ==============================
   POWIĘKSZENIE CZCIONKI
   ============================== */
body.accessibility-font {
      /* --- Rozmiary tekstu i line-height --- */
   --font-size-small: 1.2rem;     /* drobny tekst, np. przypisy */
   --line-height-small: 1.4rem;

    --font-size-smallx: 1.9rem;     /* drobny tekst, np. przypisy */
   --line-height-smallx: 2.1rem;

   --font-size-base: 1.6rem;      /* tekst standardowy */
   --line-height-base: 1.8rem;

   --font-size-medium: 2.4rem;    /* podtytuły, większe elementy tekstu */
   --line-height-medium: 2.6rem;

   --font-size-large: 2.5rem;     /* nagłówki H3/H4 */
   --line-height-large: 3rem;

   --font-size-xlarge: 3.5rem;    /* nagłówki H2 */
   --line-height-xlarge: 3.8rem;

   --font-size-xxlarge: 4rem;   /* nagłówki H1 */
   --line-height-xxlarge: 4.4rem;

}

/* ==============================
   FOCUS 
   ============================== */


@keyframes pulse-focus {
   0% {
      box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.9), 0 0 0 12px rgba(46,213,115,0.5);
      border-color: #4cd137;
   }
   50% {
      box-shadow: 0 0 0 12px rgba(46, 213, 115, 0.7), 0 0 0 24px rgba(46,213,115,0.25);
      border-color: #4cd137;
   }
   100% {
      box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.9), 0 0 0 12px rgba(46,213,115,0.5);
      border-color: #4cd137;
   }
}





/* ==============================
   ZMIENNE CSS DLA SZABLONU
   NORMALNA I KONTRASTOWA
   ZGODNE Z WCAG 2.0
   ============================== */





body{
   margin: 0;
   padding: 0;
   font-family: var(--font-family-text);
   font-size: var(--font-size-base);
   color: var(--color-secondary);
   background-color: var(--background-color);
}



/* ==========================================
   Animacja //Efekt snap scroll, znany też jako scroll hijacking lub scroll snapping, polega na tym, że podczas przewijania strona zatrzymuje się "na sztywno" na kolejnych sekcjach — często pełnoekranowych.
   ========================================== */


/* ==========================================
   Animacja //Efekt snap scroll, znany też jako scroll hijacking lub scroll snapping, polega na tym, że podczas przewijania strona zatrzymuje się "na sztywno" na kolejnych sekcjach — często pełnoekranowych.
   ========================================== */


/* ==========================================
   SMALL MOBILE (max-width: 1199px)
   ========================================== */
@media (max-width: 1199px) {
/* CSS Custom Properties */

/* CSS Custom Properties */




}



/* ==========================================
   SMALL MOBILE (max-width: 767px)
   ========================================== */
@media (max-width: 767px) {
/* CSS Custom Properties */
body {
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   /* Pozostałe zmienne dostępne przez var() */
}
/* CSS Custom Properties */




}



/* ==========================================
   SMALL MOBILE (max-width: 480px)
   ========================================== */
@media (max-width: 480px) {
/* CSS Custom Properties */
body {
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
}
}


/* CSS Custom Properties */