@import url("https://fonts.googleapis.com/css2?family=Momo+Trust+Display&family=Quicksand:wght@400;700&display=swap");

/*
  Arquivo de variáveis do tema.
  Aqui ficam as cores e valores reutilizados em todo o site.
  Em vez de repetir valores em vários lugares, o CSS usa variáveis como --foundation-blue-blue-500.
  Isso facilita manutenção e padronização visual.
*/

:root {
  /*
    Paleta de cores principal do projeto.
    Essas variáveis são usadas no layout, botões, textos e fundos.
  */

  --rsm-azul: #0d2d35;
  --rsm-verde: #00b2a8;
  --rsm-branco: #e9f0f2;

  --foundation-green-green-50: #e6f7f6;
  --foundation-green-green-100: #b0e7e4;
  --foundation-green-green-200: #8adcd7;
  --foundation-green-green-300: #55cbc5;
  --foundation-green-green-400: #34c1b9;
  --foundation-green-green-500: #01b2a8;
  --foundation-green-green-600: #01a299;
  --foundation-green-green-700: #017e77;
  --foundation-green-green-800: #01625c;
  --foundation-green-green-900: #004b47;

  --foundation-blue-blue-50: #e7eaeb;
  --foundation-blue-blue-100: #b4bec0;
  --foundation-blue-blue-200: #909ea2;
  --foundation-blue-blue-300: #5e7278;
  --foundation-blue-blue-400: #3e575d;
  --foundation-blue-blue-500: #0e2d35;
  --foundation-blue-blue-600: #0d2930;
  --foundation-blue-blue-700: #0a2026;
  --foundation-blue-blue-800: #08191d;
  --foundation-blue-blue-900: #061316;

  --foundation-gray-gray-50: #fdfefe;
  --foundation-gray-gray-100: #f8fafb;
  --foundation-gray-gray-200: #f4f8f9;
  --foundation-gray-gray-300: #f0f5f6;
  --foundation-gray-gray-400: #edf3f5;
  --foundation-gray-gray-500: #e8f0f2;
  --foundation-gray-gray-600: #d3dadc;
  --foundation-gray-gray-700: #a5aaac;
  --foundation-gray-gray-800: #808485;
  --foundation-gray-gray-900: #616566;

  /*
    Fontes e efeitos podem ser adicionados aqui no futuro.
    Essa estrutura centraliza o tema visual do site.
  */
}

/*
  Arquivo gerado a partir do Figma.
  Quando quiser trocar a identidade visual, altere as variáveis acima em vez de repetir valores em vários arquivos CSS.
*/