/* Palette condivisa da sito, area personale e back office. */
:root {
    --brand-primary: #176b7a;
    --brand-hover: #105463;
    --brand-deep: #103d49;
    --brand-light: #c4e8ed;
    --brand-light-hover: #e0f2f5;
    --brand-soft: #edf5f7;
    --brand-border: #d9e6ea;
    --brand-ink: #1b3038;
    --brand-muted: #52666e;
    --brand-primary-rgb: 23, 107, 122;
    --brand-dark-ink: #edf6f8;
    --brand-dark-muted: #b7cbd1;
    --brand-dark-surface: #202d33;
    --brand-dark-soft: #293c44;
    --brand-dark-border: #3b525c;
    --brand-dark-accent: #99d9e4;
    --primary: var(--brand-primary);
    accent-color: var(--brand-primary);
}

::selection { background: var(--brand-primary); color: #fff; }
:is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 3px;
}
.btn-primary:focus, .btn-outline-primary:focus, .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .22);
}
.form-control:focus { border-color: var(--brand-primary); }
.btn-success, .btn-info {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active,
.btn-info:hover, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .22);
}
.btn-outline-info { color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-info:hover, .btn-outline-info:focus {
    color: #fff; background-color: var(--brand-primary); border-color: var(--brand-primary);
}
.alert-primary { color: var(--brand-deep); background: var(--brand-soft); border-color: var(--brand-border); }
.alert-primary .alert-link { color: var(--brand-hover); }
.dark-mode :is(a, button, input, select, textarea, summary):focus-visible {
    outline-color: var(--brand-dark-accent);
}
.app-sidebar .side-menu__item.active,
.app-sidebar .side-menu__item:hover,
.app-sidebar .slide.is-expanded > .side-menu__item {
    color: var(--brand-primary);
    background: var(--brand-soft);
}
.app-sidebar .side-menu__item.active .side-menu__icon,
.app-sidebar .side-menu__item:hover .side-menu__icon,
.app-sidebar .slide-menu a.active { color: var(--brand-primary); }
.dark-mode .app-sidebar .side-menu__item.active,
.dark-mode .app-sidebar .side-menu__item:hover {
    color: var(--brand-dark-accent);
    background: var(--brand-dark-soft);
}