:root {
    --base-1:#0b4251;
    --base-2:#87bbd7;
    --base-3:#f2c864;
    --color-1: #062a34;  /* Ciemny odcień, idealny do nagłówków i stopki */
    --color-2: #5a97b9;  /* Jasny niebieski do hovera na przyciskach, ikonach, linkach */
    --color-3: #f8fbfd;  /* Subtelne, prawie białe tło strony */
    --color-4: #e1e9ed;  /* Delikatny szary do podziałów, obramowań i tła kart */
    --color-5: #fdf6e7;  /* Jasnożółte, subtelne tło do wyróżnienia sekcji */
    --color-5-1: #ffe7b4;
    --color-6: #d9a941;  /* Ciemniejszy odcień żółtego */
    --color-6-1: #ffcf5e;
    --color-7: #d65a47;  /* Ciepły, stonowany czerwony */
    --color-7-1: #e8624d;/* Hover */
    --color-8: #4a7c66;  /* Stonowany zielony */
    --color-8-1: #558d75;/* Hover */ 
    --color-9: #fdecea;  /* Bardzo jasny czerwony do alertów */
    --color-10: #888888; /* Ciemnny szary */
    --color-10-1: #a1a1a1;/* hover */ 
    --color-11: #3B2616;  /* Timer */
    --white: #ffffff;
    --white-opacity: rgba(255, 255, 255, 0.85);
    --black-opacity: rgba(0, 0, 0, 0.75);
    --shadow-light: 0 4px 10px rgba(0, 0, 0, 0.1);
    --shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.2);
    --scale: 1.05;
    --header-blur: blur(10px);
    --header-border: 1px solid rgba(0,0,0,0.08);
    --header-shadow: 0 2px 15px rgba(0,0,0,0.05);
    --touch-target: 44px;
    --logo-radius: 0.5vw;
}