/* ==========================================================================
   AVA — tokens (cores, tipo, raio, sombra, movimento).
   Carregado em todas as telas: site, painel e sala de aula.
   ========================================================================== */
:root {
	/* Identidade — troque aqui (ou no Customizer) quando tiver as cores finais */
	--ava-accent: #e0412b;
	/* Coral escuro: texto, links e botões com texto. O #e0412b puro dá 4,23:1 no
	   branco (abaixo dos 4,5:1 da WCAG); este dá ~5,2:1. O coral puro fica para
	   áreas grandes, capas e ícones. */
	--ava-accent-ink: color-mix(in srgb, var(--ava-accent) 88%, #000);
	--ava-accent-hover: color-mix(in srgb, var(--ava-accent) 76%, #000);
	--ava-accent-soft: color-mix(in srgb, var(--ava-accent) 10%, transparent);
	--ava-on-accent: #fff;

	--ava-bg: #ffffff;
	--ava-surface: #f6f4ef;
	--ava-surface-2: #eeebe4;
	--ava-ink: #151413;
	--ava-ink-2: #3b3936;
	--ava-muted: #6d6a64;
	--ava-line: #e5e1d9;
	--ava-line-strong: #cfcac0;
	--ava-field-line: #8f897f; /* borda de campo de formulário: 3,47:1 no branco */
	--ava-success: #1a7a42;
	/* Erro: vermelho frio e escuro, para nunca se confundir com o coral da marca */
	--ava-danger: #b42318;
	--ava-danger-soft: #fdeeec;
	--ava-danger-line: #e8a39c;
	/* Seleção (alternativa marcada no quiz) e anel de foco */
	--ava-select: #2563eb;
	--ava-select-soft: #eaf1ff;
	--ava-select-ink: #1e3a8a;
	--ava-focus: #2563eb;
	--ava-focus-ring: color-mix(in srgb, var(--ava-focus) 28%, transparent); /* halo dos campos */
	--ava-highlight: #fbe58a; /* marca-texto do Na prática (nunca vermelho nem coral) */
	--ava-star: #c98a0b;

	--ava-dark: #131211;
	--ava-dark-2: #1e1d1b;
	--ava-on-dark: #f5f3ee;
	--ava-on-dark-muted: #b9b5ad;
	/* Superfícies dentro de blocos escuros (ex.: "Além da videoaula" na Home) */
	--ava-dark-3: #2a2825;
	--ava-dark-4: #3a3733;
	--ava-dark-hover: #33302c;
	--ava-dark-line: #2c2a27;
	--ava-success-on-dark: #c8ecd6;
	--ava-success-dark-bg: #1f3a2a;

	--ava-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
	--ava-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ava-fs-xs: 0.8125rem;
	--ava-fs-sm: 0.875rem;
	--ava-fs-md: 1rem;
	--ava-fs-lg: 1.125rem;
	--ava-fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--ava-fs-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--ava-fs-3xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);
	--ava-fs-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);

	--ava-radius-sm: 4px;
	--ava-radius: 8px;
	--ava-radius-lg: 14px;
	--ava-shadow-sm: 0 1px 2px rgb(20 18 15 / 0.06);
	--ava-shadow: 0 10px 30px -12px rgb(20 18 15 / 0.22);
	--ava-shadow-lg: 0 24px 60px -20px rgb(20 18 15 / 0.35);

	--ava-gutter: 16px;
	--ava-container: 1280px;
	/* Celular: barra de cima mais baixa, já que há também a de baixo (logado) */
	--ava-header-h: 56px;
	--ava-barra-h: 64px; /* barra de baixo, sem a área segura (inc/barras.php) */
	/* Movimento: curvas fortes (as nativas do CSS são fracas demais) */
	--ava-ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entradas, feedback */
	--ava-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movimento na tela */
	--ava-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* gavetas (curva iOS) */
	--ava-ease: var(--ava-ease-out);
	--ava-press: 160ms var(--ava-ease-out);              /* feedback de toque */
	--ava-hover: 150ms ease;                             /* mudanças de cor */

	color-scheme: light;
}

/* Botões do Tutor 4 com a mesma cara do .ava-btn (componentes.css), em todas
   as telas. No body (e não no :root) para valer qualquer que seja a ordem em
   que o CSS do Tutor carrega. */
body {
	--tutor-button-radius: var(--ava-radius-sm);
	--tutor-button-font-weight: 600;
	--tutor-actions-brand-primary: var(--ava-accent-ink);
	--tutor-button-primary: var(--ava-accent-ink);
	--tutor-button-primary-hover: var(--ava-accent-hover);
	--tutor-button-primary-focused: var(--ava-accent-hover);
	--tutor-button-outline-border-shadow: 0 0 0 1.5px var(--ava-line-strong);
}

@media (min-width: 768px) {
	:root { --ava-gutter: 32px; --ava-header-h: 76px; }
}

/* Foco visível em todo controle, em todas as telas (só no teclado). Regras
   próprias de um componente podem trocar o anel, mas nunca removê-lo. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ava-focus);
	outline-offset: 2px;
}