/* Brand palette. Tints mix the base colours with Birta. */
:root {
    accent-color: #1F4A6B;
    --lk-vatn-djupt: #1F4A6B;
    --lk-mosi: #66775A;
    --lk-jord: #8D7A65;
    --lk-birta: #F4F0E7;
    --lk-hraun: #B96835;
    --lk-eldgos: #9A3B34;
    --lk-kol: #252A27;
    --lk-tre: #4E6B46;
    --lk-completed: #7B915D;
    --lk-ljosgraenn: #A8C08F;
    --lk-steinn: #6E7B84;
    --lk-vatn: #2F7EA6;
    --lk-fjolublar: #8B6BB3;
    --lk-bleikur: #E9A3B8;
    --lk-gulur: #E4C153;
    --lk-sandur: #D9C9B4;
    --lk-joklaris: #CFE2EE;
    --lk-moberg: #6A4E3A;
    --lk-vatn-djupt-80: #4A6B84;
    --lk-vatn-djupt-60: #748C9D;
    --lk-vatn-djupt-40: #9FAEB5;
    --lk-vatn-djupt-20: #C9CFCE;
    --lk-mosi-80: #828F76;
    --lk-mosi-60: #9FA792;
    --lk-mosi-40: #BBC0AF;
    --lk-mosi-20: #D8D8CB;
    --lk-jord-80: #A2927F;
    --lk-jord-60: #B6A999;
    --lk-jord-40: #CBC1B3;
    --lk-jord-20: #DFD8CD;
    --lk-hraun-80: #C58359;
    --lk-hraun-60: #D19E7C;
    --lk-hraun-40: #DCBAA0;
    --lk-hraun-20: #E8D5C3;
    --lk-eldgos-80: #AC5F58;
    --lk-eldgos-60: #BE837C;
    --lk-eldgos-40: #D0A89F;
    --lk-eldgos-20: #E2CCC3;
    --lk-kol-80: #4E524D;
    --lk-kol-60: #787974;
    --lk-kol-40: #A1A19A;
    --lk-kol-20: #CBC8C1;
    --lk-tre-80: #6F8666;
    --lk-tre-60: #90A086;
    --lk-tre-40: #B2BBA7;
    --lk-tre-20: #D3D5C7;
    --lk-ljosgraenn-80: #B7CAA1;
    --lk-ljosgraenn-60: #C6D3B2;
    --lk-ljosgraenn-40: #D6DDC4;
    --lk-ljosgraenn-20: #E5E6D5;
    --lk-steinn-80: #899298;
    --lk-steinn-60: #A4AAAC;
    --lk-steinn-40: #BEC1BF;
    --lk-steinn-20: #D9D9D3;
    --lk-vatn-80: #5695B3;
    --lk-vatn-60: #7EACC0;
    --lk-vatn-40: #A5C2CD;
    --lk-vatn-20: #CDD9DA;
    --lk-fjolublar-80: #A086BD;
    --lk-fjolublar-60: #B5A0C8;
    --lk-fjolublar-40: #CABBD2;
    --lk-fjolublar-20: #DFD5DD;
    --lk-bleikur-80: #EBB2C1;
    --lk-bleikur-60: #EDC2CB;
    --lk-bleikur-40: #F0D1D4;
    --lk-bleikur-20: #F2E1DE;
    --lk-gulur-80: #E7CA71;
    --lk-gulur-60: #EAD48E;
    --lk-gulur-40: #EEDDAC;
    --lk-gulur-20: #F1E7C9;
    --lk-sandur-80: #DED1BE;
    --lk-sandur-60: #E4D9C8;
    --lk-sandur-40: #E9E0D3;
    --lk-sandur-20: #EFE8DD;
    --lk-joklaris-80: #D6E5ED;
    --lk-joklaris-60: #DEE8EB;
    --lk-joklaris-40: #E5EAEA;
    --lk-joklaris-20: #EDEDE8;
    --lk-moberg-80: #866E5D;
    --lk-moberg-60: #A18F7F;
    --lk-moberg-40: #BDAFA2;
    --lk-moberg-20: #D8D0C4;
}

/* Native controls should use the brand colours, too. Page styles refine these. */
button, input, select, textarea {
    accent-color: var(--lk-vatn-djupt);
    color: var(--lk-kol);
    background-color: var(--lk-birta);
    border-color: var(--lk-steinn-40);
}
:focus-visible { outline-color: var(--lk-vatn); }
.nav-overview-icon { display: block; width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }
.distance-icon { display: inline-block; width: 18px; height: 18px; object-fit: contain; vertical-align: -0.25em; }
.elevation-icon { display: inline-block; width: 26px; height: 18px; object-fit: contain; vertical-align: -0.25em; }
.time-icon { display: inline-block; width: 16px; height: 16px; object-fit: contain; vertical-align: -0.18em; }

/* Shared action style for notices and asynchronously created retry controls. */
.lk-button {
    appearance: none;
    border: 1px solid var(--lk-vatn-djupt);
    border-radius: 9px;
    padding: 8px 13px;
    background: var(--lk-vatn-djupt);
    color: var(--lk-birta);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.lk-button:hover:not(:disabled) { background: var(--lk-vatn); border-color: var(--lk-vatn); }
.lk-button:focus-visible { outline: 2px solid var(--lk-vatn); outline-offset: 3px; }
.lk-button:disabled { opacity: .5; cursor: default; }
.lk-button--light { background: var(--lk-birta); color: var(--lk-vatn-djupt); border-color: var(--lk-birta); }
.lk-button--light:hover:not(:disabled) { background: var(--lk-joklaris); border-color: var(--lk-joklaris); }
.lk-button--light:focus-visible { outline-color: var(--lk-birta); }
@media (prefers-reduced-motion: reduce) { .lk-button { transition: none; } }