:root {
    --marca: #d4af37;
    --marca-forte: #bf9b2b;
    --marca-texto: #7d6212;
    --marca-texto-forte: #5c4708;
    --marca-lavado: #faf1d6;
    --marca-sobre: #1c211d;
    --marca-rgb: 212, 175, 55;

    --marca-sobre-rgb: 28, 33, 29;

    --selo-azul: #0a2c5c;
    --selo-azul-lavado: #eaf1f8;

    --escuro: #1c211d;
    --escuro-2: #262c27;
    --fundo: #f4f6f4;
    --superficie: #fff;
    --superficie-2: #fafbfa;
    --texto: #2b2b2b;
    --texto-invertido: #fff;
    --sobre-escuro: #eaeaea;
    --sobre-escuro-2: #cbd3cb;
    --sobre-escuro-3: #8d968d;
    --cinza: #626976;
    --cinza-forte: #63696b;
    --cinza-escuro: #4a4a4a;
    --borda: #e3e6e3;
    --verde-aberto: #2f6b3f;
    --verde-aberto-lavado: #eaf3ec;
    --vermelho: #d9534f;
    --vermelho-forte: #b32d29;
    --vermelho-escuro: #8f231f;
    --ambar-fundo: #fff3e0;
    --ambar-texto: #975a00;

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.75rem;

    --fonte-titulo: 'Raleway', 'Segoe UI', system-ui, sans-serif;
    --fonte-corpo: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
    --fs-xs: 0.78rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.15rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.8rem;

    --radius: 12px;
    --radius-sm: 8px;
    --sombra: 0 4px 20px rgba(0, 0, 0, 0.06);
    --sombra-alta: 0 12px 30px rgba(0, 0, 0, 0.1);
    --anel: 0 0 0 3px rgba(var(--marca-rgb), 0.35);

    --sidebar-w: 240px;
    --toque: 44px;
}

:focus-visible {
    outline: 2px solid var(--marca-texto);
    outline-offset: 2px;
    border-radius: 4px;
}

.superficie-escura {
    background: var(--escuro);
    color: var(--texto-invertido);
}

.superficie-escura h1,
.superficie-escura h2,
.superficie-escura h3,
.superficie-escura p {
    color: inherit;
}

.superficie-escura :focus-visible {
    outline-color: var(--marca);
}

.btn:focus-visible {
    outline: 2px solid var(--marca-texto);
    outline-offset: 2px;
    box-shadow: none;
}

.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
    outline: 2px solid var(--marca-sobre);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--marca);
}

::placeholder {
    color: var(--cinza);
    opacity: 1;
}