:root {
  /* Neutros */
  --color-black: #000000;
  --color-900: #212121;
  --color-white: #ffffff;

  /* Paleta - tons de laranja */
  --orange-900: #f25c05;
  /* mais escuro / principal */
  --orange-700: #f28505;
  /* tom intermediário */
  --orange-500: #f2a505;
  /* tom claro / highlight */

  /* Usos semânticos */
  --bg: #f5f6f8;
  /* fundo principal */
  --surface: var(--color-900);
  /* cartões / superfícies escuras */
  --text: var(--color-black);
  /* texto padrão sobre fundo claro */
  --text-inv: var(--color-white);
  /* texto sobre fundos escuros/laranjas */
  --primary: var(--orange-900);
  /* cor de ação principal (botões, links) */
  --primary-2: var(--orange-700);
  /* variação para hover / foco */
  --accent: var(--orange-500);
  /* destaques / badges */
  --muted: #9e9e9e;
  /* texto secundário (padrão) */
  --focus: color-mix(in srgb, var(--primary) 85%, black 15%);
  /* sugestão dinâmica */
  --danger: #d32f2f;

  .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
  }

  .btn-primary:active {
    background-color: var(--primary-2);
    border-color: var(--primary);
  }
}