/* ============================================================
   MILHÃ AUTOMAÇÃO — TOKENS DE DESIGN
   ------------------------------------------------------------
   Sistema de variáveis centralizado. Toda cor, fonte, espaço e
   sombra usada no site vem daqui — para ajustar a identidade
   visual inteira, basta editar este arquivo.
   ============================================================ */

:root {
   /* ---- Paleta nomeada (azul / amarelo / branco, conforme a marca) ---- */
   --blue-deep: #0D3B66;
   /* azul principal — confiança, estrutura */
   --blue-midnight: #082A4A;
   /* azul mais escuro — fundo de seções de destaque */
   --blue-signal: #1A5F9E;
   /* azul intermediário — gradientes, links, hover */
   --yellow-safety: #FFC233;
   /* amarelo — ação, alerta técnico, CTAs */
   --yellow-deep: #E8A100;
   /* amarelo escuro — hover dos CTAs */
   --white: #FFFFFF;
   --paper: #F5F7FA;
   /* branco levemente frio — alterna com o branco puro */
   --graphite: #19222E;
   /* texto principal — preto suavizado */
   --graphite-soft: #5B6A7C;
   /* texto secundário / legendas */
   --line: #E2E7ED;
   /* bordas finas */
   --line-on-dark: rgba(255, 255, 255, 0.16);

   /* ---- Aliases semânticos (usados nos componentes) ---- */
   --color-text: var(--graphite);
   --color-text-muted: var(--graphite-soft);
   --color-text-on-dark: rgba(255, 255, 255, 0.92);
   --color-text-on-dark-muted: rgba(255, 255, 255, 0.68);
   --color-bg: var(--white);
   --color-bg-alt: var(--paper);
   --color-bg-dark: var(--blue-midnight);
   --color-border: var(--line);
   --color-primary: var(--blue-deep);
   --color-accent: var(--yellow-safety);

   /* ---- Tipografia ----
     Display: Archivo — grotesco firme, com presença "industrial",
     usado com peso alto em títulos.
     Corpo: Inter — leitura limpa em parágrafos e formulários.
     Utilitária: IBM Plex Mono — usada propositalmente em poucos
     lugares (tags de categoria, números de destaque) para lembrar
     a linguagem de placas de identificação de equipamentos. */
   --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
   --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
   --font-mono: "IBM Plex Mono", "Courier New", monospace;

   /* ---- Espaçamento ---- */
   --space-3xs: 0.25rem;
   --space-2xs: 0.5rem;
   --space-xs: 0.75rem;
   --space-sm: 1rem;
   --space-md: 1.5rem;
   --space-lg: 2.5rem;
   --space-xl: 4rem;
   --space-2xl: 6rem;
   --space-3xl: 8rem;

   /* ---- Raios e bordas ----
     Raios pequenos de propósito: o site usa um vocabulário visual
     mais "técnico/preciso" do que o arredondado-suave padrão. */
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 10px;
   --radius-full: 999px;

   /* ---- Sombras ---- */
   --shadow-sm: 0 1px 3px rgba(8, 42, 74, 0.08), 0 1px 2px rgba(8, 42, 74, 0.06);
   --shadow-md: 0 6px 20px rgba(8, 42, 74, 0.12);
   --shadow-lg: 0 16px 40px rgba(8, 42, 74, 0.18);

   /* ---- Transições ---- */
   --transition-fast: 0.18s ease;
   --transition-base: 0.3s ease;
   --transition-slide: 0.7s ease;

   /* ---- Layout ---- */
   --container-width: 1180px;
   --header-height: 76px;
   --z-header: 100;
   --z-fab: 400;
   --z-modal: 1000;
}