/* ==========================================================================
Xablau Initiative — chassi de marca
--------------------------------------------------------------------------
Este arquivo define os NOMES de todos os tokens e os valores da Xablau.
Cada marca (tema-*.css) sobrescreve só os valores, nunca os nomes.
Uso num site:
Claro e escuro: as cores usam light-dark(claro, escuro). O modo segue o
sistema (color-scheme: light dark); para fixar um modo, ponha
data-tema="claro" ou data-tema="escuro" no — ou em qualquer
elemento, que passa a valer só para aquele trecho.
Prefixo --x-: evita colisão com as variáveis que cada site já tem.
========================================================================== */
:root {
color-scheme: light dark;
/* ---- Tipografia ------------------------------------------------------ */
--x-fonte-titulo: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
--x-fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--x-fonte-editorial: "Fraunces", Georgia, "Times New Roman", serif;
--x-fonte-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
--x-t-display: clamp(2.5rem, 4.2vw + 1rem, 4.25rem);
--x-t-h1: clamp(2rem, 2.6vw + 1rem, 3rem);
--x-t-h2: clamp(1.5rem, 1.2vw + 1rem, 2rem);
--x-t-h3: 1.25rem;
--x-t-corpo: 1rem;
--x-t-pequeno: 0.875rem;
--x-t-legenda: 0.75rem;
--x-peso-titulo: 600;
--x-entrelinha: 1.6;
--x-entrelinha-titulo: 1.1;
/* ---- Espaçamento (mesma escala do app GroovGym: 4 · 8 · 16 · 24 · 32 · 48) */
--x-esp-1: 4px;
--x-esp-2: 8px;
--x-esp-3: 16px;
--x-esp-4: 24px;
--x-esp-5: 32px;
--x-esp-6: 48px;
--x-esp-7: 72px;
--x-esp-8: 112px;
/* ---- Raios ----------------------------------------------------------- */
--x-raio-p: 8px; /* chips, etiquetas */
--x-raio-m: 12px; /* cards */
--x-raio-g: 16px; /* painéis, diálogos */
--x-raio-total: 999px;
/* ---- Movimento ------------------------------------------------------- */
--x-dur-rapida: 150ms;
--x-dur-normal: 300ms;
--x-dur-lenta: 500ms;
--x-curva: cubic-bezier(0.2, 0.7, 0.2, 1);
/* ---- Cores: Xablau (Pesto) ------------------------------------------- */
--x-fundo: light-dark(#F4F6F8, #121411);
--x-superficie: light-dark(#FFFFFF, #1A1D18);
--x-superficie-2: light-dark(#EAEEF1, #232720);
--x-texto: light-dark(#1C1C1C, #EEF0EA);
--x-texto-2: light-dark(#474D52, #BDC2B7);
--x-texto-3: light-dark(#5F666C, #979D90);
--x-borda: light-dark(#D9DFE3, #30352D);
--x-borda-forte: light-dark(#B5BEC4, #4A5145);
--x-lider: light-dark(#6C7D36, #A3B565); /* preenchimentos, botões */
--x-lider-texto: light-dark(#56652A, #B4C47A); /* links e texto na cor-líder */
--x-sobre-lider: light-dark(#FFFFFF, #161811); /* texto em cima da cor-líder */
--x-lider-suave: light-dark(#E9EEDC, #252B17); /* fundos tingidos */
--x-apoio: light-dark(#B7A25E, #CDB97A); /* Husk */
--x-apoio-texto: light-dark(#7A6A33, #D8C68C);
--x-sucesso: light-dark(#06392F, #7FC4A5); /* Tiber */
--x-aviso: light-dark(#8A7038, #E2C478);
--x-perigo: light-dark(#74070E, #F0959A); /* Cherry Red */
--x-info: light-dark(#35556E, #9CB9D1); /* San Juan */
--x-marca: light-dark(#6C7D36, #A3B565); /* tinta do símbolo/logotipo */
--x-sombra-1: 0 1px 2px light-dark(rgb(28 28 28 / 0.06), rgb(0 0 0 / 0.45));
--x-sombra-2: 0 10px 30px light-dark(rgb(28 28 28 / 0.08), rgb(0 0 0 / 0.5)),
0 2px 6px light-dark(rgb(28 28 28 / 0.05), rgb(0 0 0 / 0.35));
--x-anel-foco: 0 0 0 3px color-mix(in srgb, var(--x-lider) 45%, transparent);
}
[data-tema="claro"] { color-scheme: light; }
[data-tema="escuro"] { color-scheme: dark; }
/* ---- Selo do rodapé: "um projeto Xablau Initiative" ---------------------
Herda a cor do texto ao redor; funciona em qualquer fundo e nos dois
modos sem ajuste. Marcação em /marca/#selo. */
.x-selo {
display: inline-flex;
align-items: center;
gap: 0.5em;
font: 500 0.8125rem/1 var(--x-fonte-titulo);
letter-spacing: 0.01em;
color: inherit;
opacity: 0.85;
text-decoration: none;
transition: opacity var(--x-dur-rapida) var(--x-curva);
}
.x-selo:hover { opacity: 1; }
.x-selo svg { width: 1.35em; height: 1.35em; flex: none; }
.x-selo b { font-weight: 600; }