/* ========================================================================== GransoftWeb · Design tokens Fonte: Claude Design "Admin GransoftWeb" (handoff 18/10/2026). ÚNICO lugar com valores de cor, tipografia, raio, sombra e movimento. Os demais arquivos (layout.css, componentes.css, painel.css) só usam var(--gs-*). Tema: claro (padrão) / escuro via atributo . ========================================================================== */ :root { /* ---- Marca (não mudam com o tema) ---- */ --gs-navy: #16233F; /* trilho, cabeçalho de modal, toast */ --gs-navy-2: #1E3050; /* flyout do menu (claro) */ --gs-verde: #2FBF9B; /* acento principal / botão primário */ --gs-verde-hover: #3FD4AE; --gs-verde-escuro: #157F73; /* links e bordas de campo (claro) */ --gs-azul: #0D6EFD; /* botão confirmar / salvar */ --gs-azul-hover: #0B57C8; --gs-vermelho: #E24C5B; /* perigo / excluir */ --gs-vermelho-hover: #C2384A; --gs-laranja: #FFB347; /* alerta (cards de status) */ --gs-ambar: #B8690A; /* texto de alerta (claro) */ --gs-cinza: #8494A8; /* botão neutro / fechar */ --gs-cinza-hover: #6C7F95; --gs-branco: #FFFFFF; --gs-trilho-texto: #B9C7D4; /* ícones inativos do trilho */ --gs-flyout-texto: #E4ECF3; /* Transparências derivadas da marca */ --gs-verde-a12: rgba(47, 191, 155, .12); --gs-verde-a16: rgba(47, 191, 155, .16); --gs-verde-a18: rgba(47, 191, 155, .18); --gs-verde-a22: rgba(47, 191, 155, .22); --gs-verde-a28: rgba(47, 191, 155, .28); --gs-vermelho-a25: rgba(226, 76, 91, .25); --gs-branco-a06: rgba(255, 255, 255, .06); --gs-branco-a08: rgba(255, 255, 255, .08); --gs-branco-a18: rgba(255, 255, 255, .18); --gs-branco-a30: rgba(255, 255, 255, .3); --gs-overlay: rgba(22, 35, 63, .55); /* ---- Tema claro (semânticos) ---- */ --gs-bg: #F0F0F0; /* fundo da página */ --gs-card: #FFFFFF; /* superfícies (cards, tabelas, modal) */ --gs-ink: #16233F; /* texto principal */ --gs-muted: #6C7F95; /* texto secundário */ --gs-thead: #F7F7FA; /* cabeçalho de tabela / faixa de abas */ --gs-linha: #EDF0F4; /* divisórias */ --gs-hover: #E8F3F1; /* hover/seleção de linha */ --gs-rail2: #1E3050; /* fundo do flyout */ --gs-borda: #157F73; /* borda de campos */ --gs-linha2: #16233F; /* série "emitidos" do gráfico */ --gs-acento: #157F73; /* links / destaque sobre card */ --gs-sucesso: #157F73; /* delta positivo, "em dia" */ --gs-perigo-texto: #C2384A; --gs-alerta-texto: #B8690A; --gs-grade: #EDF0F4; /* grade do gráfico */ --gs-ponto-grafico: #FFFFFF; /* Badges (fundo / texto) */ --gs-badge-verde-bg: #E8F3F1; --gs-badge-verde-fg: #157F73; --gs-badge-azul-bg: #E4EEFF; --gs-badge-azul-fg: #0B57C8; --gs-badge-cinza-bg: #EDF0F4; --gs-badge-cinza-fg: #16233F; --gs-badge-amarelo-bg: #FFF3DD; --gs-badge-amarelo-fg: #B8690A; --gs-badge-vermelho-bg: #FCE7EA; --gs-badge-vermelho-fg: #C2384A; /* Paleta de séries (donut / participação) */ --gs-serie-1: #2FBF9B; --gs-serie-2: #16233F; --gs-serie-3: #0D6EFD; --gs-serie-4: #8494A8; --gs-serie-5: #FF8A80; --gs-serie-6: #157F73; /* ---- Tipografia ---- */ --gs-fonte: Poppins, "Segoe UI", Roboto, Arial, sans-serif; --gs-fs-2xs: 10.5px; --gs-fs-xs: 11px; --gs-fs-sm: 11.5px; --gs-fs-md: 12px; --gs-fs-base: 12.5px; --gs-fs-lg: 13px; --gs-fs-campo: 13.5px; --gs-fs-xl: 14.5px; --gs-fs-titulo-card: 15px; --gs-fs-modal: 16px; --gs-fs-h1: 22px; --gs-fs-kpi: 38px; --gs-fw-normal: 400; --gs-fw-medio: 500; --gs-fw-semi: 600; --gs-fw-bold: 700; --gs-tracking-titulo: -.02em; --gs-tracking-card: -.01em; --gs-tracking-kpi: -.04em; --gs-tracking-caps: .04em; --gs-tracking-rotulo: .08em; /* ---- Raios ---- */ --gs-raio-xs: 7px; --gs-raio-sm: 9px; --gs-raio-md: 10px; --gs-raio-campo: 8px; --gs-raio-lg: 12px; --gs-raio-xl: 14px; --gs-raio-card: 16px; --gs-raio-modal: 20px; --gs-raio-pill: 999px; /* ---- Espaçamento ---- */ --gs-esp-1: 4px; --gs-esp-2: 8px; --gs-esp-3: 10px; --gs-esp-4: 14px; --gs-esp-5: 18px; --gs-esp-6: 22px; --gs-esp-7: 32px; --gs-gap-grade: 14px; --gs-pad-linha: 7px; /* densidade "Compacta" (Média = 11px, Confortável = 15px) */ --gs-pad-pagina: 32px; /* ---- Dimensões do layout ---- */ --gs-trilho-largura: 64px; --gs-flyout-largura: 248px; --gs-botao-trilho: 44px; --gs-altura-controle: 34px; /* selects, segmentados, botões do cabeçalho */ --gs-altura-botao: 40px; /* botões de formulário / modal */ /* ---- Sombras ---- */ --gs-sombra-flyout: 12px 0 40px rgba(22, 35, 63, .28); --gs-sombra-modal: 0 30px 80px rgba(22, 35, 63, .4); --gs-sombra-toast: 0 14px 40px rgba(22, 35, 63, .35); --gs-sombra-foco: 0 0 0 3px rgba(47, 191, 155, .28); /* ---- Movimento ---- */ --gs-ease: cubic-bezier(.32, .72, 0, 1); --gs-dur-rapida: .2s; --gs-dur-media: .25s; --gs-dur-tema: .35s; /* ---- Camadas ---- */ --gs-z-header: 10; --gs-z-flyout: 1029; --gs-z-trilho: 1030; --gs-z-toast: 2060; } /* ---- Tema escuro ---- */ html[data-gs-tema="escuro"] { --gs-bg: #122D3E; --gs-card: #1A3650; --gs-ink: #FFFFFF; --gs-muted: #8EA6C0; --gs-thead: #16304A; --gs-linha: rgba(255, 255, 255, .07); --gs-hover: rgba(47, 191, 155, .12); --gs-rail2: #1A3650; --gs-borda: #2FBF9B; --gs-linha2: #C6D2E0; --gs-acento: #2FBF9B; --gs-sucesso: #2FBF9B; --gs-perigo-texto: #FF8A80; --gs-alerta-texto: #FFC06B; --gs-grade: rgba(255, 255, 255, .08); --gs-ponto-grafico: #1A3650; --gs-badge-verde-bg: rgba(47, 191, 155, .18); --gs-badge-verde-fg: #2FBF9B; --gs-badge-azul-bg: rgba(13, 110, 253, .22); --gs-badge-azul-fg: #8EB8FF; --gs-badge-cinza-bg: rgba(255, 255, 255, .1); --gs-badge-cinza-fg: #C6D2E0; --gs-badge-amarelo-bg: rgba(255, 192, 107, .18); --gs-badge-amarelo-fg: #FFC06B; --gs-badge-vermelho-bg: rgba(226, 76, 91, .22); --gs-badge-vermelho-fg: #FF8A80; --gs-serie-2: #C6D2E0; --gs-serie-3: #4D8DFF; --gs-serie-4: #8EA6C0; }