:root {
  /* ====== Paleta (nova) ====== */
  --brand-black: #000000;
  --brand-yellow: #FFFF00; /* destaque / hover */
  --brand-gray: #808080;   /* textos secundários */
  --brand-blue-brand: #0081BA; /* Novo Azul (Nav e Footer) */
  --brand-blue: #486BCB;   /* destaque secundário */
  --brand-white: #FFFFFF;

  /* Cor Cinza para o fundo do Modo Escuro */
  --brand-dark-gray: #1F1F1F;

  /* ====== Raio ====== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 10px;

  /* ====== Layout ====== */
  --container: 1120px;
  --gutter: clamp(1rem, 4vw, 2.25rem);

  /* ====== Tokens (Light) ====== */
  --color-bg: var(--brand-white);
  --color-surface: var(--brand-white);
  --color-surface-2: rgba(0, 129, 186, 0.04);

  --color-text: var(--brand-black);

  --color-text-nav: var(--brand-white);
  --color-text-nav-hover: var(--brand-yellow);

  --color-heading: var(--brand-blue-brand);

  --color-muted-text: var(--brand-gray);
  --color-border: rgba(0, 129, 186, 0.14);
  --color-border-nav: rgba(255, 255, 255, 0.14);

  --color-primary: var(--brand-blue-brand);
  --color-primary-hover: var(--brand-yellow);
  --color-secondary: var(--brand-blue-brand);
  --color-link: var(--brand-blue-brand);

  --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.16);

  /* Navbar e Topbar (Light Mode) */
  --topbar-bg: #0076a8;
  --topbar-text: rgba(255, 255, 255, 0.92);
  --header-bg: rgba(255, 255, 255, 0.86);
  --header-nav-bg: var(--brand-blue-brand);
  --header-border: rgba(0, 129, 186, 0.14);

  /* Footer Tokens (Light Mode) */
  --footer-bg: var(--brand-blue-brand);
  --footer-text: var(--brand-white);
  --footer-hover: var(--brand-yellow);

  --focus-ring: 0 0 0 3px rgba(255, 255, 0, 0.45);
}