/*
 * Fonte única de identidade visual (CLAUDE.md, Hierarquia 0 — IDENTIDADE VISUAL).
 * Toda página HTML do sistema deve carregar este arquivo.
 *
 * Este arquivo só declara VARIÁVEIS — nenhuma regra aqui muda a aparência de
 * elemento nenhum (body, h1, botão, etc). É por isso que carregá-lo em uma
 * página existente não muda nada nela: a página continua com o CSS que já
 * tinha, só ganha acesso às variáveis para usar quando for adotada de
 * propósito. As regras que de fato aplicam essas variáveis a elementos
 * concretos ficam em `componentes.css`, camada separada e opcional.
 */

:root {
  /* Marca */
  --inaut-blue-700: #1b4164;
  --inaut-blue-800: #14334f;
  --inaut-orange-500: #f14c23;
  --inaut-orange-600: #d93d17;
  --inaut-graphite-700: #403d36;
  --inaut-gray-600: #6b6862;
  --inaut-gray-200: #e8e6e2;
  --inaut-warm-white: #f3f3f2;
  --inaut-white: #ffffff;

  /* Semântica */
  --color-primary: var(--inaut-blue-700);
  --color-primary-hover: var(--inaut-blue-800);
  --color-action: var(--inaut-orange-500);
  --color-action-hover: var(--inaut-orange-600);
  --color-text: var(--inaut-graphite-700);
  --color-text-muted: var(--inaut-gray-600);
  --color-border: var(--inaut-gray-200);
  --color-background: var(--inaut-warm-white);
  --color-surface: var(--inaut-white);

  /* Tipografia */
  --font-heading: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif;
  --font-body: "DM Sans", Inter, "Segoe UI", Arial, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-h3: clamp(1.3125rem, 1.15rem + 0.6vw, 1.5rem);
  --text-h2: clamp(1.875rem, 1.45rem + 1.8vw, 2.5rem);
  --text-h1: clamp(2.375rem, 1.75rem + 2.6vw, 3.5rem);

  /* Espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Forma e elevação */
  --radius-button: 0.625rem;
  --radius-card: 0.75rem;
  --radius-feature: 1rem;
  --shadow-card: 0 10px 30px rgb(27 65 100 / 8%);
  --focus-ring: 0 0 0 3px rgb(27 65 100 / 28%);
  --container-width: 75rem;
}