/* ============================================================================ SIGL Design System v1.0 — Agosto 2026 Origem: pacote "SIGL Design System" (tokens.css), importado sem alteração de valores. Único ajuste: caminhos das @font-face de Montserrat apontam para os estáticos do Django. FONTE DA VERDADE dos tokens do sistema: --igp-* tokens de marca (base IntGest LegisVoto, app tablet Flutter) --sigl-* extensão da interface web administrativa Nenhum outro CSS deve redefinir estes valores. `design-tokens.css` passa a ser apenas alias/compatibilidade dos nomes legados. Regra: nunca escreva um hex direto em componente. Sempre var(--igp-*) ou var(--sigl-*). Se um valor não existe aqui, ele não existe no sistema. ESTE ARQUIVO É INERTE: contém apenas @font-face, custom properties e @keyframes — nada aqui pinta pixel sem alguém consumir. O reset, a base de `body`, o foco e os utilitários `.sigl-*` vivem em `css/sigl-base.css`, escopados sob a classe raiz `.sigl-ds`. ============================================================================ */ /* -- Fontes --------------------------------------------------------------- O app tablet usa Montserrat (empacotada). O web administrativo usa Public Sans (UI), Archivo (títulos) e JetBrains Mono (números/códigos), self-hosted em `css/sigl-fonts.css`. Montserrat fica disponível para materiais impressos e telas que espelham o app. Os TTF de Montserrat já existem no repositório em `sapl/static/fonts/Montserrat/ttf/` (família completa, com itálicos). Os `url()` abaixo são relativos a este arquivo, para resolverem também quando STATIC_URL aponta para o bucket S3/CloudFront. O diretório é `Montserrat` com M maiúsculo — em produção (Linux) o caminho é sensível a maiúsculas. ------------------------------------------------------------------------- */ @font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/ttf/Montserrat-Light.ttf') format('truetype'); font-weight:300; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/ttf/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/ttf/Montserrat-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/ttf/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/ttf/Montserrat-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; } :root { /* == MARCA =============================================================== */ --igp-primary: #133968; /* navy institucional — barras, CTA primário */ --igp-primary-700: #0B213C; /* hover do primário, fim de gradiente */ --igp-primary-500: #133968; --igp-primary-300: #3982DB; --igp-primary-100: #BED6F3; /* bordas de superfície navy clara */ --igp-primary-050: #DDE9F9; /* fundo de item ativo, chip navy */ --igp-secondary: #428BA5; /* teal de apoio — ícones, chips */ --igp-secondary-700: #275362; /* texto sobre teal claro */ --igp-secondary-300: #87BCCF; --igp-secondary-100: #D7E9EF; --igp-secondary-050: #EDF5F8; --igp-accent-orange: #ec6500; /* cronômetro de orador (uso restrito) */ /* == SEMÂNTICO =========================================================== */ --igp-success: #4CAF50; --igp-success-700: #388E3C; --igp-success-100: #C8E6C9; --igp-success-050: #E8F5E9; --igp-error: #F44336; --igp-error-700: #D32F2F; --igp-error-100: #FFCDD2; --igp-error-050: #FFEBEE; --igp-warning: #FF9800; --igp-warning-700: #F57C00; --igp-warning-100: #FFE0B2; --igp-warning-050: #FFF3E0; --igp-info: #2196F3; --igp-info-700: #1976D2; --igp-info-100: #BBDEFB; --igp-info-050: #E3F2FD; /* == VOTO (contraste reforçado — nunca use o verde/vermelho genérico) ==== */ --igp-voto-sim: #2E7D32; --igp-voto-nao: #C62828; --igp-voto-abster: #BF360C; --igp-on-voto: #FFFFFF; /* == NEUTROS (app tablet) ================================================ */ --igp-bg: #F5F5F5; --igp-surface: #FFFFFF; --igp-surface-2: #FAFAFA; --igp-border: #E0E0E0; --igp-divider: #EEEEEE; --igp-text-1: #1A1A1A; --igp-text-2: #666666; --igp-text-3: rgba(0,0,0,.38); --igp-black-10: rgba(0,0,0,.10); --igp-black-25: rgba(0,0,0,.25); --igp-overlay: rgba(0,0,0,.50); /* == ESPAÇO (base 4) ===================================================== */ --igp-space-xxs: 4px; --igp-space-xs: 8px; --igp-space-sm: 12px; --igp-space-md: 16px; --igp-space-lg: 24px; --igp-space-xl: 32px; --igp-space-2xl: 48px; --igp-space-hero:64px; /* == RAIO ================================================================ */ --igp-radius-xs: 4px; --igp-radius-sm: 8px; --igp-radius-md: 16px; --igp-radius-lg: 24px; --igp-radius-xl: 32px; --igp-radius-full: 999px; /* == SOMBRA (par chave + ambiente) ======================================= */ --igp-shadow-1: 0 2px 4px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05); --igp-shadow-2: 0 4px 8px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.07); --igp-shadow-3: 0 8px 16px rgba(0,0,0,.20), 0 16px 32px rgba(0,0,0,.10); --igp-shadow-4: 0 12px 24px rgba(0,0,0,.25), 0 24px 48px rgba(0,0,0,.15); --igp-shadow-success: 0 4px 12px rgba(76,175,80,.30); --igp-shadow-error: 0 4px 12px rgba(244,67,54,.30); --igp-shadow-warning: 0 4px 12px rgba(255,152,0,.30); --igp-shadow-primary: 0 4px 12px rgba(19,57,104,.30); /* == MOVIMENTO =========================================================== */ --igp-dur-instant: 50ms; --igp-dur-fast: 150ms; --igp-dur-quick: 200ms; --igp-dur-normal: 250ms; --igp-dur-slow: 400ms; --igp-dur-vslow: 600ms; --igp-ease-standard: cubic-bezier(.4,0,.2,1); --igp-ease-out: cubic-bezier(0,0,.58,1); --igp-ease-in: cubic-bezier(.4,0,1,1); --igp-ease-snappy: cubic-bezier(.4,0,.2,1); --igp-ease-overlay: cubic-bezier(.76,0,.24,1); /* == TIPO (escala do app) ================================================ */ /* Token sans do DS admin = Public Sans (a família oficial do web administrativo). Montserrat continua disponível via utilitário `font-montserrat`/@font-face para os contextos que legitimamente a usam (app tablet, portal, painel_votacao). */ --igp-font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --igp-fs-micro: 10px; --igp-fs-caption: 12px; --igp-fs-label: 14px; --igp-fs-body: 16px; --igp-fs-body-l: 18px; --igp-fs-title: 20px; --igp-fs-h2: 24px; --igp-fs-h1: 32px; --igp-fs-hero: 40px; --igp-fs-mega: 48px; /* ======================================================================== */ /* == EXTENSÃO SIGL — WEB ADMINISTRATIVO ================================== */ /* ======================================================================== */ /* -- Tipografia web ----------------------------------------------------- */ --sigl-font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Alias temporário consumido por CSS administrativo já migrado. */ --sigl-font-body: var(--sigl-font); --sigl-font-display: 'Archivo', 'Public Sans', system-ui, sans-serif; --sigl-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Escala densa: a tela administrativa comporta mais informação que o tablet. Densidade padrão 13–15px; nunca abaixo de 11px em texto legível. */ --sigl-fs-micro: 9px; /* badge de atalho, contador de dock */ --sigl-fs-caption: 11px; /* rótulo caps de selo */ --sigl-fs-label: 12.5px; /* breadcrumb, rodapé, meta */ --sigl-fs-body-s: 13px; /* corpo denso de tabela e botão */ --sigl-fs-body: 13.5px; /* corpo padrão de lista e card */ --sigl-fs-body-l: 15px; /* corpo de leitura, valor de campo */ --sigl-fs-title: 17px; /* título de modal */ --sigl-fs-h2: 22px; /* destaque em card */ --sigl-fs-h1: 27px; /* título de tela */ --sigl-fs-metric: 25px; /* número de KPI */ /* -- Neutros web (mais frios e com mais degraus que o app) -------------- */ --sigl-page: #F4F6F9; /* fundo de página */ --sigl-surface: #FFFFFF; --sigl-surface-2: #FAFBFC; /* linha zebrada, campo desabilitado */ --sigl-line: #E4E8EE; /* borda de card e input */ --sigl-line-soft: #EEF1F5; /* divisor interno */ --sigl-ink-1: #132133; /* texto primário */ --sigl-ink-2: #5B6B80; /* texto secundário */ --sigl-ink-3: #94A2B4; /* texto terciário, placeholder */ /* Aliases do Template SIGL.dc.html (mesmo valor, nomes usados no protótipo) */ --igp-t1: var(--sigl-ink-1); --igp-t2: var(--sigl-ink-2); --igp-t3: var(--sigl-ink-3); /* -- Raio web (o web usa 10–20px; o app usa 16/24/32) ------------------- */ --sigl-radius-sm: 9px; /* botão pequeno, selo quadrado */ --sigl-radius-md: 11px; /* botão padrão, input */ --sigl-radius-lg: 14px; /* card de métrica, aviso */ --sigl-radius-xl: 16px; /* card de conteúdo */ --sigl-radius-2xl: 20px; /* modal */ --sigl-radius-full: 999px; /* pill, chip, selo de estado */ /* -- Sombra web (mais suave que a do app) ------------------------------- */ --sigl-shadow-card: 0 1px 2px rgba(19,33,51,.04), 0 2px 8px rgba(19,33,51,.05); --sigl-shadow-pop: 0 24px 60px rgba(19,33,51,.30); /* modal */ --sigl-shadow-nav: 0 10px 30px rgba(19,57,104,.28); /* CTA navy, toast */ --sigl-shadow-dock: -10px 0 32px rgba(19,33,51,.24); /* dock lateral */ /* -- Camadas (z-index) — escala única do admin -------------------------- Shell (utilitários Tailwind em core.html): rodapé 20 · topbar 30 · sidebar 40. Conteúdo de tela: no máximo --sigl-z-content (nunca acima do shell). Popover/menu/submenu: acima do shell, abaixo do modal (.sigl-scrim = 50) e do toast (70). Todo menu flutuante é position:fixed no contexto raiz. */ --sigl-z-content: 10; --sigl-z-popover: 45; /* -- Alturas de controle ------------------------------------------------ */ --sigl-h-chip: 30px; --sigl-h-sm: 32px; /* botão de linha de tabela */ --sigl-h-md: 38px; /* botão da barra de ações */ --sigl-h-lg: 44px; /* botão de rodapé de modal */ --sigl-h-input: 46px; --sigl-h-xl: 48px; /* CTA de bloco */ --sigl-h-nav: 46px; /* navegação de etapa */ --sigl-h-topbar: 72px; /* -- Grade de layout ---------------------------------------------------- */ --sigl-sidebar: 266px; --sigl-sidebar-mini: 78px; --sigl-dock: 188px; --sigl-dock-mini: 72px; --sigl-content-max: 1240px; --sigl-page-pad: 32px; --sigl-page-pad-sm: 16px; /* Padding responsivo consumido pelo shell (sobrescrito por viewport). */ --pad: var(--sigl-page-pad); /* -- Breakpoints canônicos (documentação; @media usa os px literais) ---- 375 · 768 · 1024 · 1280 · 1920 Não inventar breakpoints locais em CSS dedicado. */ --sigl-bp-phone: 375px; --sigl-bp-tablet: 768px; --sigl-bp-laptop: 1024px; --sigl-bp-desktop:1280px; --sigl-bp-wide: 1920px; /* -- Foco (acessibilidade) ---------------------------------------------- */ --sigl-focus-ring: 0 0 0 3px var(--igp-secondary-050); --sigl-focus-color: var(--igp-secondary); /* -- Texto de botões semânticos (WCAG AA, texto normal >= 4,5:1) -------- on-warning: texto sobre o âmbar chapado (#F57C00 / #FF9800). Branco dá 2,70:1 e 2,16:1; #132133 dá 6,01:1 e 7,54:1 — o mesmo nos dois temas porque o fundo não muda. danger-text: texto/borda do botão de perigo em contorno (surface): error-700 dá 4,98:1 no claro; no escuro cai a 3,22:1 e o bloco [data-theme="dark"] redefine para um vermelho mais claro. */ --sigl-on-warning: #132133; --sigl-danger-text: var(--igp-error-700); } /* == TEMA ESCURO WEB ======================================================== Ativado por theme-switcher.js em . Os tokens do app (voto/semânticos) permanecem; somente marca web, superfícies e contraste mudam para os valores do template profissional. */ [data-theme="dark"] { --igp-primary: #4C86C6; --igp-primary-700: #3E7CB1; --igp-primary-500: #4C86C6; --igp-primary-300: #6FA3D6; --igp-primary-100: #2B4A6E; --igp-primary-050: #182B44; --igp-secondary: #5AA6C0; --igp-secondary-700: #87BCCF; --igp-secondary-100: #274A57; --igp-secondary-050: #16303A; --sigl-page: #0E1826; --sigl-surface: #152233; --sigl-surface-2: #1B2A3D; --sigl-line: #27374C; --sigl-line-soft: #1E2D40; --sigl-ink-1: #EAF0F7; --sigl-ink-2: #9DB0C6; --sigl-ink-3: #647890; /* Perigo em contorno sobre surface escura: #FF6B6B dá 5,78:1 (error-700 dava 3,22:1). */ --sigl-danger-text: #FF6B6B; /* Neutros do app usados por CSS de tela do admin (tabelas básicas, criar matéria, painel): sem valor escuro, superfícies ficavam brancas com texto claro (--igp-t1 = ink-1) — ilegível no tema escuro. */ --igp-bg: var(--sigl-page); --igp-surface: var(--sigl-surface); --igp-surface-2: var(--sigl-surface-2); --igp-border: var(--sigl-line); --igp-divider: var(--sigl-line-soft); --igp-text-1: var(--sigl-ink-1); --igp-text-2: var(--sigl-ink-2); --igp-text-3: var(--sigl-ink-3); --sigl-shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.30); --sigl-shadow-pop: 0 24px 60px rgba(0,0,0,.55); --sigl-shadow-nav: 0 8px 22px rgba(0,0,0,.50); --sigl-shadow-dock: -10px 0 32px rgba(0,0,0,.48); } /* ============================================================================ Animações do sistema Keyframes são inertes: só valem para quem declarar `animation`. ============================================================================ */ @keyframes sigl-live { 0%,100% { opacity: 1 } 50% { opacity: .25 } } @keyframes sigl-pop { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } } @keyframes sigl-fade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } @keyframes sigl-toast { from { opacity: 0; transform: translate(-50%,16px) } to { opacity: 1; transform: translate(-50%,0) } }