/*
 * Viva Vôlei — tokens do portal público ("Álbum da Temporada").
 * Cada torneio é uma figurinha colada na folha do álbum: cores chapadas,
 * borda branca de figurinha, profundidade só por sobreposição (sem sombra
 * difusa, sem gradiente). Paleta fechada, tirada do logo:
 *   tinta   — texto e a figurinha especial (invertida, uma por tela)
 *   papel   — a folha do álbum
 *   azul    — links e ações secundárias
 *   amarelo — SÓ o "Inscrever-se" (nada mais usa esta cor de fundo)
 *   vermelho— a marca (os V do logo), esgotado e erro
 * Tema: padrão = prefers-color-scheme; o botão do cabeçalho grava a escolha
 * (localStorage "vv-tema") e o script do <head> põe data-tema no <html> antes
 * de pintar. "data-tema" e não "data-theme": o style.css antigo tem regras
 * próprias para [data-theme="dark"].
 */

@font-face {
    font-family: "Archivo";
    src: url("../../fonts/vv/archivo-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../../fonts/vv/atkinson-next-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../../fonts/vv/atkinson-next-italic-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* tintas (claro) */
    --vv-folha: #ffffff;
    /* papel do álbum */
    --vv-cab: #f5f5f5;
    /* cabeçalho */
    --vv-rod: #dde0e4;
    /* rodapé */
    --vv-folha-2: #eceef1;
    /* faixa da folha (busca, hover, campo) */
    --vv-figura: #ffffff;
    /* corpo da figurinha / superfície */
    --vv-borda-fig: #ffffff;
    /* borda branca da figurinha (os dois temas) */
    --vv-tinta: #0c1838;
    /* texto principal */
    --vv-tinta-2: #4b5675;
    /* texto secundário (6,2:1 na folha) */
    --vv-fio: #8a93a6;
    /* fio de contorno (botões, campos, réguas): discreto, 3:1 no branco */
    --vv-fio-leve: #d5d9e0;
    /* divisor discreto */
    --vv-azul: #1d4fd6;
    --vv-azul-tinta: #ffffff;
    /* texto sobre o azul */
    --vv-amarelo: #fcc000;
    /* reservado: Inscrever-se */
    --vv-amarelo-tinta: #0c1838;
    --vv-vermelho: #d6000e;
    --vv-vermelho-tinta: #ffffff;
    --vv-especial: #0c1838;
    /* figurinha especial (invertida) */
    --vv-especial-tinta: #f8f3ea;
    --vv-azul-inv: #7ea3ff;
    /* azul e vermelho sobre a especial */
    --vv-vermelho-inv: #ff6a5c;
    --vv-selecao: #1d4fd6;
    /* seleção de texto: o azul (o amarelo é só do Inscrever-se) */
    --vv-foco: #1d4fd6;

    /* tipo */
    --vv-fonte: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
    --vv-fonte-titulo: "Archivo", "Arial Narrow", system-ui, sans-serif;
    --vv-t-xs: 0.8125rem;
    /* 13 */
    --vv-t-s: 0.9375rem;
    /* 15 */
    --vv-t-m: 1rem;
    /* 16 */
    --vv-t-l: 1.25rem;
    /* 20 */
    --vv-t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --vv-t-xxl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    --vv-largo: 112%;
    /* font-stretch dos títulos */
    --vv-largo-max: 125%;
    /* números de canto da figurinha */

    /* espaço (base 4) */
    --vv-e1: 4px;
    --vv-e2: 8px;
    --vv-e3: 12px;
    --vv-e4: 16px;
    --vv-e5: 24px;
    --vv-e6: 32px;
    --vv-e7: 48px;
    --vv-e8: 72px;
    --vv-gutter: 16px;
    --vv-largura: 1200px;

    /* forma: figurinha quase reta, borda branca */
    --vv-raio-fig: 3px;
    --vv-raio-ctl: 8px;
    --vv-borda-larg: 6px;
    /* borda branca da figurinha */
    --vv-fio-larg: 1px;

    /* sobreposição: o deslocamento de uma figurinha sobre a folha */
    --vv-desloca: 6px;

    /* movimento */
    --vv-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --vv-rapido: 160ms;
    --vv-medio: 320ms;
}

@media (min-width: 768px) {
    :root {
        --vv-gutter: 24px;
    }
}

/* escuro: o álbum aberto à noite — folha azul-noite, figurinha mantém a borda branca */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;
        --vv-folha: #0b1430;
        --vv-cab: #0b1430;
        --vv-rod: #111d3f;
        --vv-folha-2: #111d3f;
        --vv-figura: #16244c;
        --vv-tinta: #f8f3ea;
        --vv-tinta-2: #aab4cf;
        --vv-fio: #5f6e9a;
        --vv-fio-leve: #2a3a68;
        --vv-azul: #7ea3ff;
        --vv-azul-tinta: #0b1430;
        --vv-vermelho: #ff6a5c;
        --vv-vermelho-tinta: #0b1430;
        --vv-especial: #f8f3ea;
        --vv-especial-tinta: #0b1430;
        --vv-azul-inv: #1d4fd6;
        --vv-vermelho-inv: #c4000d;
        --vv-foco: #7ea3ff;
    }
}

:root[data-tema="escuro"] {
    color-scheme: dark;
    --vv-folha: #0b1430;
    --vv-cab: #0b1430;
    --vv-rod: #111d3f;
    --vv-folha-2: #111d3f;
    --vv-figura: #16244c;
    --vv-tinta: #f8f3ea;
    --vv-tinta-2: #aab4cf;
    --vv-fio: #5f6e9a;
    --vv-fio-leve: #2a3a68;
    --vv-azul: #7ea3ff;
    --vv-azul-tinta: #0b1430;
    --vv-vermelho: #ff6a5c;
    --vv-vermelho-tinta: #0b1430;
    --vv-especial: #f8f3ea;
    --vv-especial-tinta: #0b1430;
    --vv-azul-inv: #1d4fd6;
    --vv-vermelho-inv: #c4000d;
    --vv-foco: #7ea3ff;
}

/* impressão sempre no claro, mesmo com o tema escuro escolhido ou do sistema
   (vale no iframe do printThis, que importa este CSS; :not(#x) ganha das
   regras do escuro acima sem !important) */
@media print {
    :root:not(#vv-x) {
        color-scheme: light;
        --vv-folha: #ffffff;
        --vv-folha-2: #eceef1;
        --vv-figura: #ffffff;
        --vv-tinta: #0c1838;
        --vv-tinta-2: #4b5675;
        --vv-fio: #8a93a6;
        --vv-fio-leve: #d5d9e0;
        --vv-azul: #1d4fd6;
        --vv-azul-tinta: #ffffff;
        --vv-vermelho: #d6000e;
        --vv-especial: #0c1838;
        --vv-especial-tinta: #f8f3ea;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --vv-rapido: 0ms;
        --vv-medio: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* base da página (vale também nas páginas antigas: a casca é nova em todas) */
html {
    -webkit-text-size-adjust: 100%;
}

body.vv {
    margin: 0;
    background: var(--vv-folha);
    color: var(--vv-tinta);
    font-family: var(--vv-fonte);
    font-size: var(--vv-t-m);
    line-height: 1.5;
}

body.vv ::selection {
    background: var(--vv-selecao);
    color: #ffffff;
}

body.vv :focus-visible {
    outline: 3px solid var(--vv-foco) !important;
    outline-offset: 2px;
}

.vv-num {
    font-family: var(--vv-fonte-titulo);
    font-variant-numeric: tabular-nums lining-nums;
    font-stretch: var(--vv-largo-max);
}

.vv-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.vv-conteudo {
    max-width: var(--vv-largura);
    margin-inline: auto;
    padding-inline: var(--vv-gutter);
}

/* botões do sistema */
.vv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vv-e2);
    min-height: 44px;
    padding: 0 var(--vv-e4);
    font: 700 var(--vv-t-s)/1 var(--vv-fonte);
    letter-spacing: 0.01em;
    border: var(--vv-fio-larg) solid var(--vv-fio);
    border-radius: var(--vv-raio-ctl);
    background: transparent;
    color: var(--vv-tinta);
    cursor: pointer;
    text-decoration: none !important;
    transition: transform var(--vv-rapido) var(--vv-ease), background-color var(--vv-rapido) var(--vv-ease);
}

.vv-btn:hover {
    background: var(--vv-folha-2);
    color: var(--vv-tinta);
}

.vv-btn:active {
    transform: translateY(1px);
}

.vv-btn[disabled],
.vv-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.vv-btn--azul {
    background: var(--vv-azul);
    border-color: var(--vv-azul);
    color: var(--vv-azul-tinta);
}

.vv-btn--azul:hover {
    background: var(--vv-azul);
    color: var(--vv-azul-tinta);
    filter: brightness(1.08);
}

/* reservado: Inscrever-se */
.vv-btn--inscrever {
    background: var(--vv-amarelo);
    border-color: var(--vv-amarelo-tinta);
    color: var(--vv-amarelo-tinta);
}

.vv-btn--inscrever:hover {
    background: var(--vv-amarelo);
    color: var(--vv-amarelo-tinta);
    transform: translateY(-1px);
}

.vv-btn--icone {
    width: 44px;
    padding: 0;
}

.vv-btn .bi {
    font-size: 1.15em;
    line-height: 1;
}

/* links: nunca sublinhados (nem no hover, foco ou clique), só trocam a cor.
   Sem sublinhado, a cor sozinha não basta dentro de uma frase: o link também
   vai em negrito (vale para as páginas antigas também). */
body.vv a,
body.vv a:hover,
body.vv a:focus,
body.vv a:active {
    text-decoration: none !important;
}

body.vv p a:not(.vv-btn):not(.btn) {
    font-weight: 700;
}

.vv-link {
    color: var(--vv-azul);
    font-weight: 700;
}

.vv-link:hover,
.vv-link:active {
    color: var(--vv-tinta);
}

/* link solto (ao lado de botões, fora de uma frase): alvo de toque de 44px */
div > a.vv-link,
li > a.vv-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* o mesmo link num <button> (abre o painel de entrar): sem a cara nativa */
button.vv-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}