/* ===================================================================== GESTÃO DE PROJETOS — DESIGN TOKENS (tema CLARO) Tema "terminal financeiro": fundo claro, cartões brancos, acento verde-limão, superfícies pretas no topo/login. Fontes Gabarito + IBM Plex. Ordem de carregamento (definida no ): fonte Google → design-system.css → tokens.css → styles.css Os primitivos oficiais (--toll-*) e os semânticos do produto (--brand, --ink, --card, --pos/--neg/--warn, --font-display…) vêm do design-system.css. Aqui eu (re)defino EXATAMENTE os nomes de variável que o styles.css do gestor consome, apontando-os para essa paleta — assim o styles.css continua referenciando var(--surface), var(--st-*), var(--accent)… porém agora em claro, sem trocar um único seletor. ===================================================================== */ :root { /* ---------- FUNDO E SUPERFÍCIES (claro: papel + cartão branco) ---------- */ --ground: var(--bg); /* #F5F5F5 — fundo geral da página */ --ground-2: #EFEFEF; /* áreas recuadas */ --surface: var(--card); /* #FFFFFF — card de projeto */ --surface-2: #FAFDE6; /* hover (lavado de verde-limão) */ --surface-3: #FFFFFF; /* elementos elevados: chips claros */ --surface-sunken:#F3F4F0; /* trilho da barra / campos recuados */ /* ---------- TEXTO ---------- */ --text: var(--toll-grey-900); /* texto principal escuro */ --text-muted: var(--toll-grey-300); /* secundário / descrições */ --text-dim: var(--toll-grey-200); /* labels, metadados, placeholders */ --text-on-accent:var(--toll-grey-900); /* texto sobre verde-limão (alto contraste) */ --text-on-danger:#FFFFFF; /* texto sobre vermelho */ /* ---------- BORDAS E DIVISORES ---------- */ --border: var(--toll-grey-100); /* #D6D6D7 — borda padrão */ --border-strong: #BCC1C6; /* foco/hover, divisor mais visível */ --border-hair: #ECECED; /* hairline entre processos */ /* ===================================================================== CORES SEMÂNTICAS DE STATUS — "sinais iluminados", agora em claro. Mapeadas para o semáforo oficial do design-system (--pos/--warn/--neg) mais um neutro e um roxo sóbrio para os estados próprios do gestor. --st-* = cor do sinal (texto/lâmpada/ícone) --st-*-bg = preenchimento translúcido do pill/badge --st-*-edge = borda do pill e barra-sinal lateral do card --st-*-glow = halo (no tema claro fica bem discreto) ===================================================================== */ /* TRAVADO — vermelho do semáforo (lane fechada) */ --st-travado: var(--neg); /* #E84A4C */ --st-travado-bg: var(--neg-bg); /* #FFEEEE */ --st-travado-edge: #F3C9C9; --st-travado-glow: rgba(232, 74, 76, .18); /* EM ANDAMENTO — âmbar/laranja (cancela operando) */ --st-andamento: var(--warn); /* #B57C3A */ --st-andamento-bg: var(--toll-orange-50); /* #FFF7EE */ --st-andamento-edge: #F2D9B8; --st-andamento-glow: rgba(181, 124, 58, .16); /* CONCLUÍDO — verde do semáforo (lane aberta) */ --st-concluido: var(--pos); /* #438C2D */ --st-concluido-bg: var(--pos-bg); /* #F2FFEE */ --st-concluido-edge: #BFE6CC; --st-concluido-glow: rgba(67, 140, 45, .16); /* PARA COMEÇAR — cinza neutro (standby, sem sinal) */ --st-comecar: var(--toll-grey-300); /* #6A6B6E */ --st-comecar-bg: #F0F0F1; --st-comecar-edge: var(--toll-grey-100); --st-comecar-glow: rgba(0, 0, 0, 0); /* AGUARDANDO (rótulo manual) — roxo sóbrio (espera) */ --st-aguardando: #6D4FC0; --st-aguardando-bg: #F1ECFB; --st-aguardando-edge:#D8CBF1; --st-aguardando-glow:rgba(109, 79, 192, .14); /* ---------- AÇÃO / ACENTO (verde-limão) ---------- */ --accent: var(--brand); /* #E5FF51 — botão primário, checkbox */ --accent-hover: var(--brand-700); /* #D0E84A */ --accent-press: var(--toll-yellow-700); /* #A3B53A */ --accent-bg: var(--brand-soft); /* #F7FFC9 */ --accent-ring: var(--brand-700); /* anel de foco (sobre claro fica nítido) */ --accent-ink: var(--toll-yellow-800); /* verde-limão escurecido p/ texto legível */ /* ---------- TIPOGRAFIA (Gabarito + IBM Plex, herdadas do design-system) ---------- */ /* corpo de UI = IBM Plex Sans; títulos = Gabarito; dados/numérico = IBM Plex Mono */ --font-ui: var(--font-body); --font-display: var(--font-display); --font-mono: var(--font-mono); /* Escala de tipo (1.250 — major third), base 16px */ --fs-eyebrow: 0.6875rem; /* 11px — eyebrows/labels MAIÚSCULOS mono */ --fs-caption: 0.75rem; /* 12px — metadados, motivo curto, contadores */ --fs-body: 0.875rem; /* 14px — corpo de UI, nomes de processo */ --fs-base: 1rem; /* 16px — base */ --fs-h3: 1.0625rem; /* 17px — nome do projeto no card */ --fs-h2: 1.375rem; /* 22px — títulos de seção */ --fs-h1: 1.75rem; /* 28px — título do app no cabeçalho */ --fs-display: 2.5rem; /* 40px — números grandes da faixa de resumo */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.55; --tracking-eyebrow: 0.09em; /* eyebrows mono-caps espaçados */ --tracking-tight: -0.01em; /* títulos Gabarito */ /* ---------- ESPAÇAMENTO (escala base 4px) ---------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10:2.5rem; /* 40px */ --sp-12:3rem; /* 48px */ --maxw: 920px; /* largura máxima do conteúdo */ /* ---------- RAIO DE BORDA (alinhado ao design-system: --r-sm/--r/--r-lg/--r-pill) ---------- */ --r-sm: 9px; /* chips, checkbox */ --r-md: 11px; /* inputs, botões (≈ raio dos itens da nav) */ --r-lg: 14px; /* cards de projeto (= --r do DS) */ --r-xl: 18px; /* containers grandes (= --r-lg do DS) */ --r-pill:999px; /* pills de status, botões */ /* ---------- SOMBRAS (claras e sutis, como --sh-1/--sh-2 do DS) ---------- */ --shadow-card: 0 1px 2px rgba(10,10,10,.05), 0 8px 24px rgba(10,10,10,.07); --shadow-pop: 0 18px 48px rgba(10,10,10,.18); --shadow-inset: none; /* no tema claro o "captar luz" interno não se aplica */ /* ---------- MOVIMENTO ---------- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; /* ---------- FOCO (acessibilidade WCAG AA sobre claro) ---------- */ --focus-ring: 0 0 0 2px var(--card), 0 0 0 4px var(--accent-ring); } /* Respeitar usuários que preferem menos movimento */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }