/* ============================
   PALETA KOLORÓW (zmienne)
   ============================ */
:root {
    --green-dark: #0B4F2F;      /* ciemna zieleń – odpowiednik maroon */
    --green-mid: #0F7A45;       /* mocniejsza zieleń – odpowiednik darkred */
    --green-light: #D7E8D0;     /* jasna zieleń – odpowiednik #E3DBBF */
    --green-lighter: #EEF5EA;   /* bardzo jasna zieleń – odpowiednik #F3EFE3 */
    --bg-main: #FAFFF8;         /* pastelowe tło – odpowiednik floralwhite */

    --text-main: #0B4F2F;
    --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(--bg-main);
    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(--green-lighter);
}
.bg-navi {
    background-color: var(--green-dark);
}
.bg-navi2,
.bg-odd {
    background-color: var(--green-light);
}
.bg-even {
    background-color: var(--green-lighter);
}

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

a:hover,
.a-alfabet:hover,
.a-navi:hover,
.a-navi3:hover {
    background-color: var(--green-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(--green-dark);
}

/* ============================
   PRZYCISKI
   ============================ */
.submit {
    background-color: var(--green-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(--green-dark);
    transform: translateY(-2px);
}

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

input:focus,
select:focus {
    border-color: var(--green-mid);
    box-shadow: 0 0 0 3px rgba(15, 122, 69, 0.25);
    outline: none;
}

/* ============================
   OBRAZKI
   ============================ */
img {
    border: 0;
    border-radius: var(--radius);
}

/* ============================
   NAWIGACJA
   ============================ */
.navi {
    color: var(--green-light);
    font-size: 14px;
    font-weight: 600;
}