/* ==========================================================================
   VS Design System — base: fontes self-hosted e elementos globais.
   ========================================================================== */

@font-face {
    font-family: 'Geist';
    src: url('../../fonts/geist/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('../../fonts/geist/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    font-family: var(--vs-font-sans);
    background-color: var(--vs-bg-canvas);
    color: var(--vs-text);
    line-height: var(--vs-leading);
}

body {
    font-size: var(--vs-text-base);
}

/* Números de dados sempre tabulares (valores, contagens, datas em tabelas). */
table,
.vs-num {
    font-variant-numeric: tabular-nums;
}

code, kbd, pre, samp {
    font-family: var(--vs-font-mono);
}
/* O Bootstrap pinta code de rosa (#d63384, abaixo do AA no canvas): no DS, tinta do texto. */
code { color: var(--vs-text); font-size: .92em; overflow-wrap: anywhere; }

::selection {
    background: rgba(var(--vs-accent-rgb), .18);
}

:focus-visible {
    outline: var(--vs-focus-outline);
    outline-offset: 2px;
}

a {
    color: var(--vs-accent);
}

a:hover {
    color: var(--vs-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important; /* reduz movimento por acessibilidade (justificado) */
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}