/* ============================================================
   Design tokens — HSO Serviços
   Fonte canônica: docs/design-system.md (§2)
   Carregar ANTES de style.css (ver frontend/templates/base.html).
   Regra: nenhum hex/sombra/raio solto fora daqui.
   ============================================================ */
:root {
	/* Cores */
	--primary: #2c3e50;
	--primary-dark: #1a2530;
	--secondary: #3498db;
	--accent: #e74c3c;
	--light: #ecf0f1;
	--dark: #2c3e50;
	--text: #333;
	--bg-body: #f9f9f9;
	--surface: #ffffff; /* superfície de cards/tabelas (request-table, request-card) */
	--text-muted: #777;
	--border: #ddd;
	--overlay-hero: rgba(0, 0, 0, 0.7);
	--footer-divider: rgba(255, 255, 255, 0.1);

	/* Tipografia */
	--font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.2rem;
	--fs-lg: 1.5rem;
	--fs-xl: 1.8rem;
	--fs-2xl: 2.5rem;
	--fs-3xl: 3.5rem;
	--line-height-base: 1.6;

	/* Espaçamento (base 0.5rem) */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 5rem;

	/* Raios */
	--radius-sm: 5px;
	--radius-md: 10px;
	--radius-pill: 50px;

	/* Sombras */
	--shadow-header: 0 2px 10px rgba(0, 0, 0, 0.2);
	--shadow-card: 0 5px 15px rgba(0, 0, 0, 0.1);

	/* Layout */
	--container-max: 1200px;
	--header-height: 80px;
	--z-header: 1000;
	/* Breakpoint de referência: 768px (valor literal nas media queries) */

	/* Foco e limites de controle (a11y — WCAG 1.4.11) */
	--focus-ring: var(--primary); /* anel de foco; NÃO usar --secondary (2.99:1 sobre --bg-body) */
	--focus-halo: #ffffff; /* halo interno: mantém o anel visível sobre header/footer navy */
	--border-control: var(--text-muted); /* limite de controle >= 3:1; --border é só divisória */
}