/* Frontend color layer. Keep after the compiled Nuxt CSS so the original files remain untouched. */
:root {
    --frontend-primary: #005e60;
    --frontend-primary-hover: #004746;
    --frontend-accent: #c8ff08;
    --frontend-surface: #f5fbfb;
    --frontend-surface-strong: #e4f1f1;
    --frontend-ink: #212121;
}

body {
    background-color: var(--frontend-surface);
    color: var(--frontend-ink);
}

.bg-main,
.bg-orange-500,
.bg-orange-600 {
    background-color: var(--frontend-primary);
}

.text-main,
.text-orange-500,
.text-orange-600 {
    color: var(--frontend-primary);
}

.border-main,
.border-orange-500,
.border-orange-600 {
    border-color: var(--frontend-primary);
}

.bg-orange-100 {
    background-color: var(--frontend-surface);
}

.bg-orange-200 {
    background-color: var(--frontend-surface-strong);
}

.bg-orange-300 {
    background-color: var(--frontend-primary);
}

.border-orange-100,
.border-orange-200,
.border-orange-300 {
    border-color: #cde4e4;
}

.bg-main.text-black,
.bg-orange-500.text-black,
.bg-orange-600.text-black {
    color: #fff;
}

.bg-main:hover,
.bg-orange-500:hover,
.bg-orange-600:hover {
    background-color: var(--frontend-primary-hover);
}

.router-link-active.router-link-exact-active {
    color: var(--frontend-primary);
    border-bottom: 2px solid var(--frontend-accent);
}

/* :where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--frontend-primary);
    outline-offset: 2px;
} */

.dz-authentication-area .dz-bg-wrapper {
    background-color: var(--frontend-surface-strong);
}

/* Keep native scrolling without the bulky tracks on narrow frontend pages and dialogs. */
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}