/* variables.css
   Design tokens (cores, tipografia, espaçamentos).
   Paleta institucional: vermelho, branco, cinza escuro.
*/

:root {
  /* Brand (como estava no layout original) */
  --color-brand-500: #b5121b; /* vermelho institucional */
  --color-brand-600: #931016;
  --color-brand-700: #7a0d12;

  /* Auxiliares (para CSS moderno com rgb/alpha) */
  --color-brand-primary: var(--color-brand-500);
  --color-brand-secondary: #9e151b; /* usado em cards brand do layout */
  --color-ink: #111827;
  --color-white: #ffffff;

  --color-brand-primary-rgb: 181, 18, 27;
  --color-brand-secondary-rgb: 158, 21, 27;
  --color-ink-rgb: 17, 24, 39;

  /* Neutrals (tema claro por padrão) */
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-2: #eef1f5;
  --color-text: #111827;
  --color-muted: rgba(17, 24, 39, 0.72);
  --color-border: rgba(17, 24, 39, 0.14);

  /* Úteis para overlays e estados */
  --color-hero-text: var(--color-ink);
  --color-hero-overlay-a: rgba(255, 255, 255, 0.92);
  --color-hero-overlay-b: rgba(255, 255, 255, 0.66);

  /* Shadows */
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 14px 38px rgba(0, 0, 0, 0.24);

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  /* Layout */
  --container: 1120px;
  --gutter: 20px;
  --header-h: 76px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-1: clamp(2rem, 3.6vw, 3.4rem);
  --fs-2: clamp(1.6rem, 2.2vw, 2.2rem);
  --fs-3: 1.25rem;
  --fs-body: 1rem;
  --lh: 1.55;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}