/* Marroaccell: colores derivados del azul del logotipo entregado. */
:root {
    --color-accent: #365b9a;
    --color-accent-content: #365b9a;
    --color-accent-foreground: #ffffff;
    --color-violet-50: #eef4ff;
    --color-violet-100: #e2edff;
    --color-violet-200: #c4d9ff;
    --color-violet-300: #a8c7f7;
    --color-violet-400: #8fb4eb;
    --color-violet-500: #6f98d8;
    --color-violet-600: #537cbd;
    --color-violet-700: #3e61a1;
    --color-violet-800: #304d82;
    --color-violet-900: #1d3159;
    --color-violet-950: #111e3a;
    --color-purple-100: #e2edff;
    --color-purple-800: #304d82;
}

html.dark {
    --color-accent: #b8d2ff;
    --color-accent-content: #b8d2ff;
    --color-accent-foreground: #101827;
}

html.dark body { background-color: #151c2a; }
html.dark [data-flux-sidebar] {
    background-color: #101827;
    border-color: #2d3b56;
}
html:not(.dark) [data-flux-sidebar] {
    background-color: #f5f8ff;
    border-color: #dce6f7;
}

.brand-wordmark {
    position: relative;
    display: inline-block;
    width: min(14rem, 100%);
    height: 3rem;
    overflow: hidden;
    border-radius: .4rem;
    background: #fff;
    flex-shrink: 0;
}
.brand-wordmark-image {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    transform: translateY(-50%);
}
html.dark .brand-wordmark { background: #000; }
html.dark .brand-mark-image { filter: none; }
html:not(.dark) .brand-mark-image { filter: invert(1) hue-rotate(175deg); }

[data-flux-button]:focus-visible,
button:focus-visible,
a:focus-visible {
    outline-color: var(--color-accent);
}
.brand-wordmark-image:nth-of-type(2) { display: none; }
html.dark .brand-wordmark-image:nth-of-type(1) { display: none; }
html.dark .brand-wordmark-image:nth-of-type(2) { display: block; }