/* ============================================================================
* DS SGC — Design Tokens v1.0
* ----------------------------------------------------------------------------
* Fonte única de verdade do Design System SGC.
* Origem: design-specimen-01..04 + tela-DA01-dashboard-central + telas R1
* Locked em: 2026-04-19
* Direção warm/institucional ratificada em: 2026-05-03
*
* COMO CONSUMIR:
*
*
*
*
* body {
* font-family: "Inter", system-ui, -apple-system, sans-serif;
* font-feature-settings: "ss01", "cv11";
* background: var(--bg);
* color: var(--ink);
* }
*
* REGRAS DE USO:
* 1. NÃO crie cor, raio ou sombra fora desta lista. Se faltar, proponha
* um novo token aqui antes de usar.
* 2. NÃO use cores semafóricas (vermelho/amarelo/verde como erro/aviso/ok).
* Status é não-semafórico — sand/terra/accent-green com função.
* 3. Tabular numerals em TODO número. Use `.tabular` ou
* `font-variant-numeric: tabular-nums` direto.
* 4. Eyebrow uppercase (label 11px / 700 / 0.12em) é a assinatura da
* hierarquia. Use generosamente.
* 5. Card padrão = surface + border 1px + radius-card + shadow-card.
* Não substitua a borda por sombra mais pesada.
* ========================================================================= */
:root {
/* ─────────────────────────────────────────────────────────────────────────
* COR · Superfícies (warm institucional)
* ──────────────────────────────────────────────────────────────────────── */
--bg: #FAF7F0; /* fundo de página — off-white creme, NÃO branco puro */
--surface: #FFFFFF; /* cards, painéis, modais */
--ink: #1A1915; /* texto principal, ícones — warm black */
--ink-muted: #6B6A63; /* texto secundário, meta, eyebrow */
--ink-soft: #9B988C; /* placeholder, divisores, ícones inativos */
--border: #EAE4D6; /* borda padrão de cards e divisores */
--border-strong: #D9D2BE; /* borda hover, separação mais firme */
/* ─────────────────────────────────────────────────────────────────────────
* COR · Brand accent (verde Brasil institucional)
* Use apenas para: success semântico, CTA primário verde (FAB),
* indicador online, classificação Apoiador, sync-dot.
* ──────────────────────────────────────────────────────────────────────── */
--accent-green: #2E7D4A;
--accent-green-soft: #E8F2EC;
--accent-green-ink: #1D5732;
/* ─────────────────────────────────────────────────────────────────────────
* COR · Escala warm (neutros quentes)
* Use para: fundo de chip, fundo de filter-group, fundo de input filled,
* sparkline area, estados desabilitados.
* ──────────────────────────────────────────────────────────────────────── */
--warm-50: #F3EFE4;
--warm-100: #E4DECE;
--warm-200: #CCC6B6;
--warm-300: #A8A293;
--warm-400: #7F7A6D;
/* ─────────────────────────────────────────────────────────────────────────
* COR · Status (não-semafóricos)
* sand = pendente / aviso brando / classificação Indeciso
* terra = em andamento / urgência branda / classificação Opositor
* Concluído = accent-green. Cancelado = warm-300 com riscado.
* ──────────────────────────────────────────────────────────────────────── */
--status-sand: #B89654;
--status-sand-soft: #F5EDD9;
--status-terra: #B0633F;
--status-terra-soft: #F3E1D5;
/* ─────────────────────────────────────────────────────────────────────────
* COR · Medalhas (gradientes metálicos — locked, NÃO alterar)
* Apenas o ouro recebe `twinkle` 2.2s. Silver e bronze ficam estáticos.
* Tamanho escalado: 26-28px em listas · 36px em rank-item · 72px+ em momentos.
* ──────────────────────────────────────────────────────────────────────── */
--gold: linear-gradient(135deg, #F5D27A 0%, #E8B547 50%, #C99530 100%);
--silver: linear-gradient(135deg, #DDD8E0 0%, #B8B3BC 50%, #8F8A93 100%);
--bronze: linear-gradient(135deg, #D8976A 0%, #B57744 50%, #8A5630 100%);
/* ─────────────────────────────────────────────────────────────────────────
* TIPOGRAFIA · Tamanhos
* Família: Inter (sempre). Hierarquia por peso e letter-spacing.
* Pesos disponíveis: 400, 500, 600, 700, 800.
* OpenType features no body: font-feature-settings: "ss01", "cv11";
* ──────────────────────────────────────────────────────────────────────── */
--font-display: 42px; /* hero de tela cheia (raro) */
--font-h1: 32px; /* título de página */
--font-h2: 26px; /* bloco / seção */
--font-h3: 18px; /* card title destacado */
--font-kpi: 40px; /* número grande do card B/C */
--font-body: 15px; /* parágrafo */
--font-small: 13px; /* meta, subtítulo */
--font-label: 11px; /* eyebrow uppercase 0.12em */
--font-caption: 10px; /* footnote uppercase 0.08em */
/* TIPOGRAFIA · Tracking (letter-spacing) */
--tracking-tight: -0.025em; /* h1, kpi */
--tracking-snug: -0.015em; /* h2 */
--tracking-normal: -0.01em; /* h3 */
--tracking-wide: 0.08em; /* caption uppercase */
--tracking-wider: 0.12em; /* eyebrow / label uppercase */
/* TIPOGRAFIA · Line-height */
--leading-tight: 1.05; /* hero / títulos grandes */
--leading-snug: 1.2; /* h1 / h2 */
--leading-base: 1.5; /* body */
--leading-loose: 1.6; /* parágrafo longo */
/* ─────────────────────────────────────────────────────────────────────────
* RAIO (round tier — 4 valores apenas)
* ──────────────────────────────────────────────────────────────────────── */
--radius-tight: 6px; /* chip pequeno, kbd, footnote tag */
--radius-input: 14px; /* inputs, textarea, select, botões compactos */
--radius-cta-mobile: 16px; /* CTA full-width mobile (altura 52px) */
--radius-card: 22px; /* cards, modais */
--radius-pill: 999px; /* botões contidos, chips, badges, avatar */
/* ─────────────────────────────────────────────────────────────────────────
* SOMBRA (soft diffuse — nunca dramática)
* Card é definido por borda + sombra leve. Sombra é semântica de elevação.
* ──────────────────────────────────────────────────────────────────────── */
--shadow-card: 0 1px 2px rgba(26,25,21,0.04), 0 8px 24px rgba(26,25,21,0.05);
--shadow-card-hover: 0 2px 4px rgba(26,25,21,0.05), 0 18px 40px rgba(26,25,21,0.08);
--shadow-overlay: 0 8px 32px rgba(26,25,21,0.10), 0 24px 48px rgba(26,25,21,0.08);
--shadow-sticky: 0 -4px 24px rgba(26,25,21,0.08); /* sticky-footer mobile */
--shadow-fab: 0 4px 12px rgba(46,125,74,0.30); /* FAB verde */
/* ─────────────────────────────────────────────────────────────────────────
* ESPAÇAMENTO (base 4px)
* Use múltiplos da escala. Evite valores fora desta lista.
* ──────────────────────────────────────────────────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* ESPAÇAMENTO · Padding canônico */
--pad-card: 22px; /* padding interno do card padrão */
--pad-card-large: 28px; /* padding de card destacado */
--pad-shell-desktop: 24px 32px 64px;
--pad-shell-mobile: 16px 16px 40px;
--gap-grid-desktop: 16px;
--gap-grid-mobile: 12px;
/* ─────────────────────────────────────────────────────────────────────────
* MOTION (timing + curvas)
* Respeite `prefers-reduced-motion: reduce` (regra global no fim).
* ──────────────────────────────────────────────────────────────────────── */
--ease: cubic-bezier(.22,.61,.36,1);
--duration-fast: 150ms; /* hover, focus, color transitions */
--duration-base: 240ms; /* card hover, transform */
--duration-slow: 520ms; /* fadeUp de entrada */
/* ─────────────────────────────────────────────────────────────────────────
* BREAKPOINTS (informativos — usar @media direto no CSS de consumo)
* ──────────────────────────────────────────────────────────────────────── */
/* mobile: até 640px */
/* tablet: 641px a 1100px */
/* desktop: 1101px+ */
/* max-shell: 1280px (largura máxima de container web) */
/* ─────────────────────────────────────────────────────────────────────────
* Z-INDEX (camadas)
* ──────────────────────────────────────────────────────────────────────── */
--z-sticky: 10;
--z-tab-bar: 20;
--z-fab: 30;
--z-overlay: 40;
--z-modal: 50;
--z-toast: 60;
}
/* ============================================================================
* UTILITIES
* Classes opcionais. Use direto no HTML para reduzir CSS de consumo.
* ========================================================================= */
/* Tabular numerals — obrigatório em qualquer número */
.tabular { font-variant-numeric: tabular-nums; }
/* Tipografia */
.t-display {
font-size: var(--font-display);
font-weight: 700;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
}
.t-h1 {
font-size: var(--font-h1);
font-weight: 700;
letter-spacing: var(--tracking-tight);
line-height: var(--leading-snug);
}
.t-h2 {
font-size: var(--font-h2);
font-weight: 700;
letter-spacing: var(--tracking-snug);
line-height: var(--leading-snug);
}
.t-h3 {
font-size: var(--font-h3);
font-weight: 600;
letter-spacing: var(--tracking-normal);
}
.t-kpi {
font-size: var(--font-kpi);
font-weight: 700;
letter-spacing: var(--tracking-tight);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.t-body {
font-size: var(--font-body);
line-height: var(--leading-loose);
}
.t-small {
font-size: var(--font-small);
color: var(--ink-muted);
}
.t-eyebrow {
font-size: var(--font-label);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--ink-muted);
}
.t-caption {
font-size: var(--font-caption);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--ink-muted);
}
/* ============================================================================
* KEYFRAMES (animações canônicas)
* Definidas globalmente. Componentes apenas referenciam pelo nome.
* ========================================================================= */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px var(--accent-green-soft); }
50% { box-shadow: 0 0 0 7px rgba(232,242,236,0); }
}
@keyframes live {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@keyframes twinkle {
/* Apenas para a estrela dourada da medalha de OURO. Ouro só. */
0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
50% { opacity: 0.6; transform: scale(1.15) rotate(15deg); }
}
/* ============================================================================
* ACCESSIBILITY · Reduced motion
* Desliga animações infinitas. Mantém transições de 1ms para preservar lógica.
* ========================================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}