:root{
    --fross-blue: #2f6fa1; /* cor principal das letras */
    --fross-wave: #8fbfe8; /* azul claro das ondas */
    --fross-dark: #1f4d6f; /* azul escuro para contrastes */
    --fross-gray: #9da3a6; /* cinza do subtítulo */
    --fross-ring: #d6d8da; /* tom de cinza claro do anel */
    --fross-white: #ffffff;
}

/* utilitários simples para uso com Tailwind CDN */
.text-fross-blue{ color: var(--fross-blue) !important; }
.text-fross-wave{ color: var(--fross-wave) !important; }
.text-fross-gray{ color: var(--fross-gray) !important; }
.bg-fross-blue{ background-color: var(--fross-blue) !important; }
.bg-fross-wave{ background-color: var(--fross-wave) !important; }
.border-fross-ring{ border-color: var(--fross-ring) !important; }
.stroke-fross-blue{ stroke: var(--fross-blue) !important; }

.btn-fross{ background-color: var(--fross-blue); color: var(--fross-white); }
.btn-fross:hover{ background-color: var(--fross-dark); }

/* pequena classe para o logo circular */
.logo-circle{ width:48px; height:48px; border-radius:9999px; background: linear-gradient(180deg, var(--fross-white), #f3f5f6); display:flex; align-items:center; justify-content:center; border:6px solid var(--fross-ring); }