/*
 * Tokens do site judovale. Paleta, tipografia e medidas.
 *
 * Os valores hexadecimais aqui são os mesmos medidos em
 * tools/contraste.mjs e registrados em wordpress-src/CONTRATO.md.
 * Mudou cor, roda `node tools/contraste.mjs` antes de commitar.
 *
 * Este arquivo não desenha nada: ele só declara. Componente vai em
 * style.css e nos arquivos de cada tela.
 */

/* ---------------------------------------------------------------------
 * Fontes, self-hosted. Nenhuma requisição a servidor externo.
 * Source Serif 4 e Source Sans 3, ambas OFL-1.1. Licenças em fonts/.
 * Só existem arquivos para 400 normal, 400 itálico, 600 e 700 normal.
 * Pedir outro peso faz o navegador sintetizar, e fica feio.
 * ------------------------------------------------------------------ */

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-ext-400-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-400-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-ext-400-italic.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-ext-600-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-ext-700-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-ext-400-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-400-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-ext-400-italic.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-ext-600-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/source-sans-3-latin-ext-700-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------ */

:root {
	/* Cor. Contrastes medidos em CONTRATO.md. */
	--cor-tinta: #16191A;
	--cor-tinta-fraca: #4A5150;
	--cor-tinta-apagada: #6C7573;
	--cor-papel: #F4F5F2;
	--cor-branco: #FFFFFF;
	--cor-linha: #D8DBD7;
	--cor-serra: #2A5C46;
	--cor-rio: #1C556E;

	/* Ocre é preenchimento e grafismo. Como texto ele mede 4.34:1 e
	   reprova em AA, por isso existe a variante escurecida abaixo. */
	--cor-ocre: #B45A1F;
	--cor-ocre-texto: #8A4515;

	/* Situações do calendário. Quatro valores cada: preenchimento da
	   pastilha, texto dentro dela, borda e quadradinho marcador.
	   A borda existe porque o preenchimento claro sozinho fica em 1.25:1
	   contra a célula branca, longe dos 3:1 exigidos. */
	--cor-sit-etapa-fundo: #D6E7EF;
	--cor-sit-etapa-texto: #0E3D52;
	--cor-sit-etapa-borda: #54869E;
	--cor-sit-etapa-marca: #1C556E;

	--cor-sit-inscricao-aberta-fundo: #F6E6CC;
	--cor-sit-inscricao-aberta-texto: #6B3A06;
	--cor-sit-inscricao-aberta-borda: #9E7433;
	--cor-sit-inscricao-aberta-marca: #B45A1F;

	--cor-sit-realizado-fundo: #E4E6E3;
	--cor-sit-realizado-texto: #3C4443;
	--cor-sit-realizado-borda: #7D8482;
	--cor-sit-realizado-marca: #6C7573;

	--cor-sit-regional-fundo: #DCE9E1;
	--cor-sit-regional-texto: #1D4433;
	--cor-sit-regional-borda: #59856C;
	--cor-sit-regional-marca: #2A5C46;

	/* Estados de mensagem do formulário. Vocabulário próprio, e não o do
	   calendário: azul de "etapa do circuito" numa caixa de erro seria cor
	   dizendo uma coisa e texto dizendo outra.
	   Sucesso e aviso repetem hex já medidos do verde e do ocre. O erro é o
	   único trio novo, e entrou porque formulário sem estado de erro
	   vermelho obriga a inventar sentido para uma cor que não tem. */
	--cor-msg-sucesso-fundo: #DCE9E1;
	--cor-msg-sucesso-texto: #1D4433;
	--cor-msg-sucesso-borda: #59856C;

	--cor-msg-aviso-fundo: #F6E6CC;
	--cor-msg-aviso-texto: #6B3A06;
	--cor-msg-aviso-borda: #9E7433;

	--cor-msg-erro-fundo: #F6E0DB;
	--cor-msg-erro-texto: #7A2418;
	--cor-msg-erro-borda: #A0554A;

	/* Tipografia. Toda pilha termina em genérico. */
	--fonte-titulo: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--fonte-interface: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--peso-texto: 400;
	--peso-destaque: 600;
	--peso-titulo: 700;

	/* Escala de corpo, em rem, para respeitar o tamanho do navegador. */
	--corpo-xs: 0.8125rem;
	--corpo-sm: 0.9375rem;
	--corpo-base: 1.0625rem;
	--corpo-lg: 1.25rem;
	--corpo-xl: 1.5rem;
	--corpo-2xl: 2rem;
	--corpo-3xl: 2.75rem;

	--entrelinha-apertada: 1.2;
	--entrelinha-normal: 1.6;

	/* Espaço, em múltiplos de 4 px. */
	--esp-1: 0.25rem;
	--esp-2: 0.5rem;
	--esp-3: 0.75rem;
	--esp-4: 1rem;
	--esp-5: 1.5rem;
	--esp-6: 2rem;
	--esp-8: 3rem;
	--esp-10: 4rem;

	/* Medidas de layout. */
	--largura-texto: 38rem;
	--largura-conteudo: 72rem;
	--raio: 6px;
	--raio-pequeno: 4px;

	/* Alvo de toque mínimo, WCAG 2.5.8. */
	--alvo-minimo: 44px;

	/* Foco. Contraste ≥ 3:1 contra o fundo adjacente, WCAG 2.4.11. */
	--foco-cor: var(--cor-rio);
	--foco-espessura: 3px;
	--foco-afastamento: 2px;

	/* Quebra da grade do calendário para lista.

	   Atenção: CSS não aceita var() dentro de uma condição de @media, então
	   calendario.css repete este valor à mão como 699.98px. Mudou aqui,
	   muda lá. */
	--quebra-calendario: 700px;
}

/* Quem pede mais contraste recebe borda mais firme e texto mais escuro. */
@media (prefers-contrast: more) {
	:root {
		--cor-tinta-fraca: #2E3433;
		--cor-tinta-apagada: #4A5150;
		--cor-linha: #9AA09D;
		--foco-espessura: 4px;
	}
}

/* Nenhuma animação para quem pediu para não ter. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}