/**
 * Tokens do design system — fonte única de verdade para cor, tipografia,
 * espaçamento, raio e elevação. Ajustes de identidade visual acontecem aqui.
 *
 * @package ABDC
 */

:root {
	/* — Superfícies e texto — */
	--color-bg: #f3f2f2;
	--color-surface: #eae9e9;
	--color-text: #201e1d;
	--color-divider: color-mix(in srgb, #201e1d 40%, transparent);

	/* — Cores da marca (logotipo) — */
	--color-logo-blue: #008cff;
	--color-logo-blue-deep: #3172eb;
	--color-logo-green: #6eae59;
	--color-logo-green-deep: #427457;
	--color-logo-yellow: #ffcc00;
	--color-logo-yellow-deep: #ebc21d;

	/* — Acento: azul institucional, em rampa tonal de valor constante — */
	--color-accent: #008cff;
	--color-accent-100: #e6f3ff;
	--color-accent-200: #cce7ff;
	--color-accent-300: #99cfff;
	--color-accent-400: #66b6ff;
	--color-accent-500: #008cff;
	--color-accent-600: #0074d6;
	--color-accent-700: #005ca3;
	--color-accent-800: #004070;
	--color-accent-900: #00263d;

	--color-accent-2: #008cff;
	--color-accent-2-100: #e6f3ff;
	--color-accent-2-800: #004070;

	/* — Neutros — */
	--color-neutral-100: #f8f4f4;
	--color-neutral-200: #eae7e7;
	--color-neutral-300: #d7d3d3;
	--color-neutral-400: #bab6b6;
	--color-neutral-500: #9b9797;
	--color-neutral-600: #7d7979;
	--color-neutral-700: #605d5d;
	--color-neutral-800: #444141;
	--color-neutral-900: #2d2b2b;

	/* — Texto em opacidades recorrentes — */
	--color-text-85: color-mix(in srgb, var(--color-text) 85%, transparent);
	--color-text-80: color-mix(in srgb, var(--color-text) 80%, transparent);
	--color-text-78: color-mix(in srgb, var(--color-text) 78%, transparent);
	--color-text-65: color-mix(in srgb, var(--color-text) 65%, transparent);
	--color-text-60: color-mix(in srgb, var(--color-text) 60%, transparent);
	--color-text-55: color-mix(in srgb, var(--color-text) 55%, transparent);

	/* — Tipografia — */
	--font-heading: "Archivo", system-ui, sans-serif;
	--font-heading-weight: 800;
	--font-body: "Archivo", system-ui, sans-serif;

	/* — Espaçamento — */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;

	/* — Métricas de seção — */
	--wrap: 1160px;
	--section-py: clamp(32px, 4.5vw, 56px);
	--section-px: clamp(20px, 5vw, 64px);
	--header-offset: 84px;

	/* — Raio — */
	--radius-sm: 0;
	--radius-md: 0;
	--radius-lg: 0;

	/* — Elevação — */
	--shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
	--shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
	--shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

	/* — Sobreposição usada nos heros — */
	--overlay-hero: linear-gradient(90deg, rgba(10, 10, 10, 0.75) 0%, rgba(10, 10, 10, 0.45) 55%, rgba(10, 10, 10, 0.2) 100%);
}