/* Vratarnica. Jedna datoteka, bez gradnje, bez vanjskih fontova. */

:root {
    --tlo: #f1f3f6;
    --ploha: #ffffff;
    --tinta: #1a1e26;
    --prigušeno: #5f6878;
    --crta: #d9dee6;
    --naglasak: #3a4b95;
    --naglasak-tlo: #e3e7f6;
    --zamjerka: #8a2f2f;
    --zamjerka-tlo: #f7e8e8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tlo: #101319;
        --ploha: #171b23;
        --tinta: #dde2ea;
        --prigušeno: #939cac;
        --crta: #282e3a;
        --naglasak: #93a4ef;
        --naglasak-tlo: #202844;
        --zamjerka: #e09393;
        --zamjerka-tlo: #2b1a1a;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 2rem 1rem 1rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--tlo);
    color: var(--tinta);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.okvir {
    width: 100%;
    max-width: 26rem;
    margin: auto;
    padding: 2rem 1.75rem 2.25rem;
    background: var(--ploha);
    border: 1px solid var(--crta);
    border-radius: 3px;
}

h1 {
    margin: 0 0 0.35rem;
    font-family: 'Iowan Old Style', Palatino, Georgia, serif;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }
.uvod { color: var(--prigušeno); }
.mirno { margin-top: 1.5rem; font-size: 0.86rem; color: var(--prigušeno); }

a { color: var(--naglasak); }

.zamjerka {
    padding: 0.7rem 0.9rem;
    background: var(--zamjerka-tlo);
    border-left: 2px solid var(--zamjerka);
    color: var(--zamjerka);
    font-size: 0.92rem;
}

form { margin-top: 1.5rem; }

fieldset.braca {
    margin: 0 0 1.4rem;
    padding: 0;
    border: 0;
}

fieldset.braca legend {
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--prigušeno);
}

label.brat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--crta);
    border-radius: 2px;
    cursor: pointer;
}

label.brat + label.brat { margin-top: -1px; }
label.brat:hover { background: var(--naglasak-tlo); }
label.brat:has(input:checked) {
    background: var(--naglasak-tlo);
    border-color: var(--naglasak);
    position: relative;
    z-index: 1;
}

label.brat input { accent-color: var(--naglasak); }

label.polje {
    display: block;
    margin-bottom: 0.4rem;
    margin-top: 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--prigušeno);
}

label.polje.razmak { margin-top: 1.2rem; }

input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.7rem;
    background: var(--tlo);
    border: 1px solid var(--crta);
    border-radius: 2px;
    color: var(--tinta);
    font: inherit;
}

input:focus-visible,
button:focus-visible,
label.brat:focus-within {
    outline: 2px solid var(--naglasak);
    outline-offset: 1px;
}

button {
    width: 100%;
    margin-top: 1.4rem;
    padding: 0.7rem;
    background: var(--naglasak);
    border: 0;
    border-radius: 2px;
    color: #ffffff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

button:hover { filter: brightness(1.08); }

.podnozje {
    margin: 2rem auto 0;
    font-size: 0.78rem;
    color: var(--prigušeno);
    text-align: center;
}