:root {
  /* Definiowanie kolorów */

  /* Biały.
     Użycie:
     - section:nth-of-type(odd) { background-color }
     - .read-more-btn, .cta-button { background-color } (stan bazowy)
     - .cta-button:hover { color } (kolor tekstu po najechaniu)
     - .toast-notification--success { color } (kolor tekstu i ikon w powiadomieniu) */
  --colorNo01: #ffffff;

  /* Bardzo jasny róż.
     Użycie:
     - body { background-color }
     - section:nth-of-type(even) { background-color }
     - .menu-toggle { background-color } (tło "hamburgera" na mobile)
     - .main-nav { background-color } (tło wysuwanego menu na mobile) */
  --colorNo02: #fff1fc;

  /* Jasny, zgaszony róż.
     Użycie:
     - .page-loader { background-color }
     - .site-header::before { background-color } (tło nagłówka)
     - .site-footer { background-color }
     - .cta-button--instagram-promo { background: linear-gradient(...) } */
  --colorNo03: #ecdae4;

  /* Ciemny, śliwkowy róż.
     Użycie:
     - body { color } (główny kolor tekstu)
     - h1, h2, h3, p, li { color }
     - .logo-text, .main-nav a { color } (elementy w menu)
     - .cta-button { color } (kolor tekstu i ikon w stanie bazowym) */
  --colorNo04: #744356;

  /* Intensywny róż (główny akcent).
     Użycie:
     - .cta-button { border-color }
     - .cta-button:hover { background-color }
     - .footer-social-links a:hover .social-icon { background-color }
     - .cta-button--instagram-promo { background: linear-gradient(...) } */
  --colorNo05: #d96c98;

  /* Zgaszony, średni róż (kolor cieni i tła).
     Użycie:
     - .section-image-placeholder { box-shadow }
     - .pagination-dot { background-color } (nieaktywne kropki w sliderze)
     - .menu-toggle, .main-nav { box-shadow } (cienie w menu mobilnym) */
  --colorNo06: #c895af;

  /* Brudny róż (drugorzędny akcent).
     Użycie:
     - .section-content ul li::before { background-color } (punktory w listach)
     - .site-footer p, .social-icon { color, background-color } (elementy stopki)
     - .main-nav a:hover::after { background-color } (podkreślenie linku w menu)
     - .pagination-dot.active { background-color } (aktywna kropka w sliderze) */
  --colorNo07: #A6858D;
  --colorNo08: #cbb5c1;
  --colorNo09: #f8f8f8;
}