:root {
  /* ---- Cores principais da marca ---- */
  --color-cyan:        #00E5FF; /* ciano — cor de destaque (botões, links, ícones) */
  --color-cyan-dark:   #0891B2; /* ciano mais escuro — usado em hover/gradientes */
  --color-black:       #0A0E12; /* preto principal — fundo das seções escuras */
  --color-black-soft:  #12181F; /* preto levemente mais claro — cards em fundo escuro */
  --color-white:       #FFFFFF; /* branco principal — fundo das seções claras */
  --color-gray-light:  #F3F6F8; /* cinza bem claro — fundo alternativo de seção */
  --color-gray-text:   #5B6672; /* cinza para textos secundários em fundo claro */
  --color-line:        #21292F; /* linhas/divisórias em fundo escuro */

  /* ---- Texto ---- */
  --text-on-dark:      #FFFFFF;
  --text-on-dark-soft: #AEBAC2;
  --text-on-light:     #0A0E12;
  --text-on-light-soft:#5B6672;

  /* ---- Tipografia ---- */
  --font-display: 'Space Grotesk', sans-serif; /* usada em títulos */
  --font-body:    'Inter', sans-serif;         /* usada em textos corridos */

  /* ---- Espaçamentos e formas ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --container-width: 1140px;
  --container-width-narrow: 760px;

  /* ---- Sombras ---- */
  --shadow-cyan: 0 0 0 rgba(0, 229, 255, 0);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.25);
}