/* ========================================================================== SIA.AI Design System v2 — Tokens Direção visual: "Precisão tranquila" -------------------------------------------------------------------------- Fonte dos valores: docs/design-system-v2/ (referência aprovada, quadro "1d · Fundações — design tokens iniciais" e "3a · Barra lateral colapsada"). Os valores foram extraídos da referência; nenhum bloco de CSS do HTML exportado foi copiado. Regras: - todo token é prefixado com --sia-v2- para não colidir com o legado; - nenhum seletor global é declarado aqui além de :root; - este arquivo deve ser sempre o primeiro CSS carregado no layout v2. Breakpoints (documentados — custom properties não funcionam em @media, por isso os valores abaixo são a referência única para todos os arquivos do v2; ao alterar aqui, alterar também as media queries correspondentes): mobile : até 767px → drawer + barra inferior tablet : 768px a 1023px → drawer, conteúdo em largura total desktop : a partir de 1024px → sidebar fixa (aberta ou trilho) wide : a partir de 1440px → apenas mais respiro lateral ========================================================================== */ :root { /* ---------------------------------------------------------------------- Cor · marca e ação ---------------------------------------------------------------------- */ --sia-v2-brand-green: #0E7C42; /* ação primária, seleção, confirmação */ --sia-v2-brand-green-hover: #0A6534; --sia-v2-brand-green-active: #0A5D33; --sia-v2-brand-green-soft: #E8F3EC; /* fundo de item selecionado */ --sia-v2-brand-green-soft-border: #BFE0CD; --sia-v2-brand-green-bright: #2FB56B; /* marcador de item ativo na navegação */ --sia-v2-brand-graphite: #14201A; /* navegação global (grafite-verde) */ --sia-v2-brand-yellow: #E8C400; /* realce pontual — contadores da fila */ --sia-v2-brand-yellow-text: #14201A; /* ---------------------------------------------------------------------- Cor · superfícies Neutros com leve tom verde (croma ≈ 0,01). ---------------------------------------------------------------------- */ --sia-v2-surface: #FFFFFF; /* superfície */ --sia-v2-surface-raised: #FFFFFF; --sia-v2-surface-muted: #FAFBFA; --sia-v2-surface-app: #F3F5F4; /* fundo do app */ --sia-v2-surface-sunken: #EEF1EF; --sia-v2-surface-selected: #E8F3EC; --sia-v2-surface-disabled: #EDF0EE; --sia-v2-surface-nav: #14201A; --sia-v2-surface-nav-hover: rgba(255, 255, 255, 0.06); --sia-v2-surface-nav-active: rgba(47, 181, 107, 0.10); --sia-v2-surface-nav-avatar: rgba(47, 181, 107, 0.22); --sia-v2-surface-overlay: rgba(20, 32, 26, 0.48); /* ---------------------------------------------------------------------- Cor · texto ---------------------------------------------------------------------- */ --sia-v2-text: #182420; /* texto */ --sia-v2-text-secondary: #3A463F; /* secundário */ --sia-v2-text-muted: #55625C; /* mudo */ --sia-v2-text-subtle: #7E8B85; --sia-v2-text-disabled: #8B948F; --sia-v2-text-on-brand: #FFFFFF; --sia-v2-text-on-nav: #B4C2BA; --sia-v2-text-on-nav-soft: #E9F0EC; /* hover na navegação escura */ --sia-v2-text-on-nav-strong: #FFFFFF; --sia-v2-text-on-nav-muted: #5F6F66; --sia-v2-text-on-nav-brand: #7E8F86; --sia-v2-text-on-nav-avatar: #7FD8A8; /* Link textual. Consumidos apenas por `.sia-v2-link` e `.sia-v2-prose a` — não existe regra de cor para todo . */ --sia-v2-text-link: #0E7C42; --sia-v2-text-link-hover: #0A5D33; --sia-v2-text-link-active: #08492A; /* ---------------------------------------------------------------------- Cor · navegação global (semântico) A navegação escura tem vocabulário próprio: o item em repouso é neutro e discreto; o verde entra apenas no indicador do item ativo. Nada aqui usa a cor de ação primária como cor de texto padrão — do contrário todos os itens parecem selecionados ao mesmo tempo. Referência: quadros "navegação global", "sidebar aberta" e "trilho colapsado". ---------------------------------------------------------------------- */ --sia-v2-nav-item-text: var(--sia-v2-text-on-nav); --sia-v2-nav-item-text-hover: var(--sia-v2-text-on-nav-soft); --sia-v2-nav-item-text-active: var(--sia-v2-text-on-nav-strong); --sia-v2-nav-section-text: var(--sia-v2-text-on-nav-muted); --sia-v2-nav-item-surface-hover: var(--sia-v2-surface-nav-hover); --sia-v2-nav-item-surface-active: var(--sia-v2-surface-nav-active); --sia-v2-nav-item-indicator: var(--sia-v2-brand-green-bright); /* ---------------------------------------------------------------------- Cor · bordas Profundidade vem de bordas hairline e contraste de fundo. ---------------------------------------------------------------------- */ --sia-v2-border: #E3E8E5; /* borda */ --sia-v2-border-strong: #CBD5CF; /* borda forte */ --sia-v2-border-subtle: #EEF1EF; --sia-v2-border-nav: rgba(255, 255, 255, 0.08); --sia-v2-border-nav-strong: rgba(255, 255, 255, 0.14); --sia-v2-border-width: 1px; /* ---------------------------------------------------------------------- Cor · estados semânticos Estado nunca depende só da cor: sempre texto + ponto quadrado. ---------------------------------------------------------------------- */ --sia-v2-info-text: #1866C0; --sia-v2-info-surface: #EAF2FC; --sia-v2-info-border: #C4D9F2; --sia-v2-info-mark: #1866C0; --sia-v2-success-text: #0E7C42; --sia-v2-success-surface: #E8F3EC; --sia-v2-success-border: #BFE0CD; --sia-v2-success-mark: #0E7C42; --sia-v2-warning-text: #8A6400; --sia-v2-warning-surface: #FBF3D9; --sia-v2-warning-border: #EAD98F; --sia-v2-warning-mark: #C99A00; --sia-v2-danger-text: #BE3A2C; --sia-v2-danger-surface: #FBEDEA; --sia-v2-danger-border: #F0CFC9; --sia-v2-danger-mark: #BE3A2C; --sia-v2-neutral-text: #5C6862; --sia-v2-neutral-surface: #EDF0EE; --sia-v2-neutral-border: #D8DDD9; --sia-v2-neutral-mark: #8B948F; /* ---------------------------------------------------------------------- Foco Anel azul 2px com offset 2px — visível sobre verde e superfícies claras. ---------------------------------------------------------------------- */ --sia-v2-focus-color: #1866C0; --sia-v2-focus-width: 2px; --sia-v2-focus-offset: 2px; --sia-v2-focus-color-on-nav: #7FD8A8; /* ---------------------------------------------------------------------- Tipografia · IBM Plex Sans + IBM Plex Mono As famílias são hospedadas localmente (ver css/fonts.css); a pilha de fallback cobre o intervalo entre o primeiro paint e o carregamento do woff2, e os pesos que não declaramos. ---------------------------------------------------------------------- */ --sia-v2-font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sia-v2-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --sia-v2-font-size-page-title: 22px; /* título de página 22 / 700 */ --sia-v2-font-size-section: 16px; /* título de seção 16 / 600 */ --sia-v2-font-size-card-title: 14px; /* título de cartão 14 / 600 */ --sia-v2-font-size-body: 13px; /* corpo 13 / 400 */ --sia-v2-font-size-secondary: 12px; /* secundário 12 / 400 */ --sia-v2-font-size-caption: 11px; --sia-v2-font-size-micro: 10px; /* cabeçalho de tabela 10 mono / 600 */ --sia-v2-font-weight-regular: 400; --sia-v2-font-weight-medium: 500; --sia-v2-font-weight-semibold: 600; --sia-v2-font-weight-bold: 700; --sia-v2-line-height-tight: 1.2; --sia-v2-line-height-snug: 1.35; --sia-v2-line-height-base: 1.5; --sia-v2-line-height-relaxed: 1.6; --sia-v2-letter-spacing-tight: -0.01em; --sia-v2-letter-spacing-normal: 0; --sia-v2-letter-spacing-label: 0.06em; --sia-v2-letter-spacing-section: 0.1em; /* ---------------------------------------------------------------------- Espaçamento · 4 · 8 · 12 · 16 · 24 · 32 ---------------------------------------------------------------------- */ --sia-v2-space-0: 0; --sia-v2-space-half: 2px; /* apenas ajustes ópticos */ --sia-v2-space-1: 4px; --sia-v2-space-2: 8px; --sia-v2-space-3: 12px; --sia-v2-space-4: 16px; /* gutter padrão */ --sia-v2-space-5: 24px; --sia-v2-space-6: 32px; --sia-v2-space-7: 48px; /* derivado — respiro entre blocos */ /* ---------------------------------------------------------------------- Raio · sem cápsulas ---------------------------------------------------------------------- */ --sia-v2-radius-mark: 2px; /* ponto quadrado de estado */ --sia-v2-radius-tag: 4px; /* etiquetas */ --sia-v2-radius-control: 6px; /* botões e campos */ --sia-v2-radius-card: 8px; /* cartões */ --sia-v2-radius-round: 50%; /* avatar */ /* ---------------------------------------------------------------------- Sombra Sombra zero em repouso. Sombra única reservada a modal, drawer e menus. ---------------------------------------------------------------------- */ --sia-v2-shadow-none: none; --sia-v2-shadow-overlay: 0 8px 24px rgba(20, 32, 26, 0.14); /* ---------------------------------------------------------------------- Camadas ---------------------------------------------------------------------- */ --sia-v2-z-base: 0; --sia-v2-z-sticky: 10; --sia-v2-z-sidebar: 20; --sia-v2-z-bottom-bar: 30; --sia-v2-z-overlay: 40; --sia-v2-z-drawer: 50; --sia-v2-z-tooltip: 60; --sia-v2-z-skip-link: 70; /* ---------------------------------------------------------------------- Layout do shell Grid: sidebar 232 · barra superior 52 · conteúdo máx. 1200 · gutter 16. Trilho colapsado 64. Leitura limitada a ~720px. ---------------------------------------------------------------------- */ --sia-v2-sidebar-width: 232px; --sia-v2-sidebar-collapsed-width: 64px; --sia-v2-topbar-height: 52px; --sia-v2-bottom-bar-height: 56px; --sia-v2-content-max-width: 1200px; --sia-v2-reading-max-width: 720px; --sia-v2-drawer-width: 288px; --sia-v2-gutter: 16px; /* ---------------------------------------------------------------------- Densidade e alvos ---------------------------------------------------------------------- */ --sia-v2-row-height-reading: 48px; /* leitura e conhecimento */ --sia-v2-row-height-default: 40px; /* operação — padrão */ --sia-v2-row-height-compact: 32px; /* gestão — compacta */ --sia-v2-control-height: 36px; --sia-v2-control-height-sm: 32px; --sia-v2-touch-target: 48px; /* formulário mobile */ --sia-v2-hit-target: 40px; /* alvo mínimo desktop */ --sia-v2-icon-size: 16px; --sia-v2-icon-size-nav: 15px; --sia-v2-icon-size-rail: 17px; /* ---------------------------------------------------------------------- Movimento · 120–160 ms ease-out, sem animação decorativa ---------------------------------------------------------------------- */ --sia-v2-duration-fast: 120ms; --sia-v2-duration-base: 160ms; --sia-v2-easing: ease-out; --sia-v2-transition-fast: var(--sia-v2-duration-fast) var(--sia-v2-easing); --sia-v2-transition-base: var(--sia-v2-duration-base) var(--sia-v2-easing); }