/* ============================
   PALETA KOLORÓW (zmienne)
   ============================ */
:root {
    --blue-dark: #003366;
    --blue-mid: #0055AA;
    --blue-light: #D6E4FF;
    --blue-lighter: #E8F0FF;
    --blue-bg: #F0F6FF;

    --text-main: #003366;
    --text-light: #ffffff;

    --radius: 6px;
    --transition: 0.25s ease;
    --shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ============================
   GLOBAL
   ============================ */
body {
    color: var(--text-main);
    background-color: var(--blue-bg);
    font-family: "Inter", Tahoma, Verdana, Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Tła sekcji */
.bg-tlo {
    background-color: var(--blue-lighter);
}
.bg-navi {
    background-color: var(--blue-dark);
}
.bg-navi2,
.bg-odd {
    background-color: var(--blue-light);
}
.bg-even {
    background-color: var(--blue-lighter);
}

/* ============================
   LINKI
   ============================ */
a,
.a-alfabet,
.a-navi,
.a-navi3 {
    color: var(--blue-dark);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

a:hover,
.a-alfabet:hover,
.a-navi:hover,
.a-navi3:hover {
    background-color: var(--blue-mid);
    color: var(--text-light);
    padding: 2px 4px;
    border-radius: var(--radius);
}

/* ============================
   TEKST
   ============================ */
p, div {
    margin: 4px 0;
    font-size: 15px;
}

.s {
    font-size: 12px;
    color: var(--blue-dark);
}

/* ============================
   PRZYCISKI
   ============================ */
.submit {
    background-color: var(--blue-mid);
    border: none;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.submit:hover {
    background-color: var(--blue-dark);
    transform: translateY(-2px);
}

/* ============================
   FORMULARZE
   ============================ */
input,
select {
    background-color: #ffffff;
    color: var(--blue-dark);
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--blue-light);
    border-radius: var(--radius);
    transition: var(--transition);
}

input:focus,
select:focus {
    border-color: var(--blue-mid);
    box-shadow: 0 0 0 3px rgba(0, 85, 170, 0.2);
    outline: none;
}

/* ============================ OBRAZKI ============================ */

img { border: 0; border-radius: var(--radius); } 

/* ============================ NAWIGACJA ============================ */

.navi { color: var(--blue-light); font-size: 14px; font-weight: 600; }