/* ============================================================ DESIGN TOKENS — Gestão 360 Base: roxo #410E6D / ouro #C9A227 (realces herdados do Diagnóstico 360 que está no ar em gestao360-diagnostico.vercel.app) Tipografia: IBM Plex Sans + IBM Plex Mono Densidade: alta no painel de quem aplica, confortável na tela que o dono do salão abre no celular ============================================================ DE ONDE VEIO CADA COR --------------------------------------------------------------- As seis cores de realce não foram escolhidas aqui: são as do sistema publicado (Sistema/app/estilo.css), e estão marcadas com "no ar" na lista abaixo. As escalas em volta delas foram derivadas mantendo a matiz — 272° no roxo, 46° no ouro — para que o sistema novo apareça como o mesmo produto. --violet-800 #410E6D no ar (--deep) ação --violet-900 #35095A no ar (hover do deep) --violet-700 #49326B no ar (--violet) marcas, numeração --violet-500 #6E5793 no ar (--violet-soft) borda em hover --gold-500 #C9A227 no ar (--gold-line) traço e preenchimento --gold-700 #8A6410 no ar (--gold) o ouro legível Os neutros também vêm de lá: são cinzas arroxeados, não cinzas puros. Cinza neutro ao lado de #410E6D sai esverdeado. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); :root { /* --- MARCA ------------------------------------------------ */ --brand-violet: #410E6D; /* no ar */ --brand-gold: #C9A227; /* no ar */ /* --- ESCALA PRIMÁRIA (matiz 272°, do roxo da marca) ------- Duas coisas para saber antes de usar: 800 é a ação, e não 500. O roxo da marca é escuro — 13,92:1 sobre branco — e é ele que veste botão primário, item aberto do menu e número grande. 500 e 400 existem para borda, preenchimento de barra e hover, onde um roxo cheio pesa. 900 é o hover de 800, não um degrau a mais: quem clica um botão #410E6D vê #35095A. Era assim no sistema no ar. */ --violet-25: #FAF7FC; --violet-50: #F5EFFA; --violet-100: #EBE0F5; --violet-200: #D7C4E9; --violet-300: #B797D3; --violet-400: #916AB4; --violet-500: #6E5793; /* no ar */ --violet-600: #563E7F; --violet-700: #49326B; /* no ar */ --violet-800: #410E6D; /* = brand-violet, a ação */ --violet-900: #35095A; /* no ar — hover de 800 */ --violet-950: #230A38; /* --- ACENTO (ouro, uso restrito) ------------------------- Os dois ouros NÃO são intercambiáveis, e trocar um pelo outro é o erro mais fácil de cometer neste arquivo: --gold-500 (#C9A227) tem 2,42:1 sobre branco. É traço, preenchimento, régua de progresso, linha de gráfico. Nunca texto, nunca ícone que carrega informação. --gold-700 (#8A6410) tem 5,37:1 sobre branco e 4,90:1 sobre --gold-100. É o único ouro que pode virar palavra. */ --gold-50: #FCF9EE; --gold-100: #FBF4E4; /* no ar — fundo de atenção */ --gold-200: #F0E2B2; --gold-300: #E4CD81; --gold-500: #C9A227; /* = brand-gold — só traço */ --gold-700: #8A6410; /* no ar — o ouro legível */ /* --- NEUTROS (frios arroxeados, matiz 272° da marca) ----- */ --gray-0: #FFFFFF; --gray-25: #FAF9FC; /* superfície elevada, cabeçalho de tabela */ --gray-50: #F4F2F7; /* fundo da aplicação */ --gray-100: #EFEBF4; /* hover de linha */ --gray-200: #EAE5F0; /* borda interna, divisória de lista */ --gray-300: #DED8E7; /* borda */ --gray-400: #9A93A6; /* placeholder e desativado — 2,96:1 de propósito: aqui o apagado é o recado. Não usar em nada que informe. */ --gray-500: #726980; /* texto secundário — 5,19:1 */ --gray-600: #5C5270; /* texto de apoio — 7,25:1 */ --gray-700: #3E3450; --gray-800: #211830; /* texto primário — 16,96:1 */ --gray-900: #14101C; /* --- SEMÂNTICAS ------------------------------------------ As três primeiras vêm do sistema no ar. Cada uma tem fundo e borda própria porque a tarja de aviso precisa dos três: sem borda, o fundo claro some no papel impresso. */ --success: #356F43; /* no ar */ --success-bg: #EDF5EF; /* no ar */ --success-line: #BFD9C6; --warning: #8A6410; /* no ar */ --warning-bg: #FBF4E4; /* no ar */ --warning-line: #E4CD81; --danger: #A3231C; /* no ar */ --danger-bg: #FBEDEC; /* no ar */ --danger-line: #E7C7C4; /* no ar */ --info: #410E6D; --info-bg: #F5EFFA; --info-line: #EBE0F5; /* --- PAPÉIS ---------------------------------------------- */ --bg-app: var(--gray-50); --bg-surface: var(--gray-0); --bg-sunken: var(--gray-25); --bg-hover: var(--gray-100); --bg-selected: var(--violet-50); --bg-accent: var(--violet-100); /* quadro de ícone, chip roxo */ --border: var(--gray-300); --border-soft: var(--gray-200); --border-strong: var(--gray-400); --border-focus: var(--violet-800); --text: var(--gray-800); --text-muted: var(--gray-500); --text-disabled: var(--gray-400); --text-invert: var(--gray-0); --text-link: var(--violet-800); --text-accent: var(--gold-700); /* chapéu, etiqueta "quando" */ --action: var(--violet-800); --action-hover: var(--violet-900); --action-active: var(--violet-950); --action-soft: var(--violet-50); /* fundo do secundário em hover */ /* --- NÍVEL (o resultado de um pilar, do total, de um salão) -- Quatro faixas, e elas são de negócio, não de estilo: quem manda nos cortes é faixas.js. Aqui só mora a cor. Nunca aparecem sozinhas — a regra 3 embaixo explica. */ --nivel-crit: var(--danger); --nivel-crit-bg: var(--danger-bg); --nivel-atencao: var(--warning); --nivel-atencao-bg:var(--warning-bg); --nivel-bom: var(--success); --nivel-bom-bg: var(--success-bg); --nivel-ref: var(--violet-800); --nivel-ref-bg: var(--violet-50); /* --- TIPOGRAFIA ------------------------------------------- */ --font-sans: 'IBM Plex Sans', -apple-system, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; /* Display = a sans, por ora. O sistema no ar usa serifa (ui-serif/New York/Georgia) em título e número grande. Trocar é esta linha só — ver "decisões em aberto" no fim do arquivo. */ --font-display: var(--font-sans); /* escala com contraste real — pula 500/600 nos pesos */ --text-xs: 11px; /* rótulo de campo, badge */ --text-sm: 13px; /* corpo de tabela, UI padrão */ --text-base: 15px; /* corpo de leitura */ --text-lg: 18px; --text-xl: 24px; /* título de página */ --text-2xl: 32px; --text-3xl: 42px; /* nota do diagnóstico, KPI */ --leading-tight: 1.2; --leading-normal: 1.45; --leading-loose: 1.6; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; --track-tight: -0.015em; /* títulos grandes */ --track-normal: 0; --track-wide: 0.02em; /* texto de 11px */ --track-caps: 0.12em; /* a única caixa alta: chapéu e etiqueta */ /* --- ESPAÇAMENTO (base 4px) ------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* --- DENSIDADE -------------------------------------------- */ --row-height: 36px; /* linha de tabela */ --row-height-cozy: 44px; --control-height: 32px; /* input, select, botão */ --control-height-sm: 26px; --tap-min: 32px; /* vira 44px no dedo, ver base */ --sidebar-width: 236px; /* a do sistema no ar */ --topbar-height: 52px; --content-max: 1240px; --reading-max: 70ch; /* devolutiva, biblioteca, texto corrido */ /* --- RAIO (linguagem única: 4px técnico) ------------------ */ --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; /* só modal e popover */ --radius-full: 999px; /* só badge de status e avatar */ /* --- ELEVAÇÃO -------------------------------------------- Borda primeiro. Sombra só onde a peça tem altura de verdade: popover, modal, e o cartão que é link e se levanta no hover. Todas tingidas de #211830 (o roxo do texto), não de preto — preto sobre fundo lilás sai acinzentado e sujo. */ --shadow-none: none; --shadow-raise: 0 1px 2px rgba(33, 24, 48, 0.05), 0 1px 1px rgba(33, 24, 48, 0.03); --shadow-popover: 0 4px 12px -2px rgba(33, 24, 48, 0.14), 0 0 0 1px rgba(33, 24, 48, 0.06); --shadow-modal: 0 16px 40px -8px rgba(33, 24, 48, 0.22), 0 0 0 1px rgba(33, 24, 48, 0.06); --focus-ring: 0 0 0 2px var(--gray-0), 0 0 0 4px var(--violet-500); /* --- MOVIMENTO -------------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0.13, 1); --duration-fast: 100ms; --duration: 160ms; } /* ============================================================ DENSIDADE DE LEITURA ------------------------------------------------------------ O painel de quem aplica o diagnóstico é denso: tabela de carteira, heatmap, fila de urgência, uso de horas seguidas. A tela que o dono do salão abre é outra coisa — 60 perguntas num celular, e depois uma devolutiva que sai impressa. Ali 13px e controle de 32px erram o alvo, literalmente. Uma marcação no , e a escala inteira muda. Nenhuma cor, nenhum raio, nenhum componente muda com ela. ============================================================ */ [data-densidade="leitura"] { --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 28px; --leading-normal: 1.6; --row-height: 44px; --control-height: 44px; --control-height-sm: 36px; --tap-min: 44px; } /* ============================================================ BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text); background: var(--bg-app); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; } body { margin: 0; } [hidden] { display: none !important; } /* Números alinhados em coluna — obrigatório em tabela, nota e KPI */ table, .num, .kpi, .nota, input[type="number"], td, th { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Código de convite, nota de pilar, letra da alternativa, versão do questionário. Tudo que é identificador, não é frase. */ .mono, code, kbd, .codigo, .letra { font-family: var(--font-mono); font-size: 0.94em; letter-spacing: var(--track-normal); } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--track-tight); text-wrap: balance; } h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-lg); } h3 { font-size: var(--text-base); } h4 { font-size: var(--text-sm); } p { margin: 0 0 var(--space-3); } a { color: var(--text-link); } strong, b { font-weight: var(--weight-bold); } /* Rótulo de campo — sentence case, nunca caixa alta */ label, .field-label { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--track-wide); color: var(--text-muted); } /* A única caixa alta do sistema: chapéu de seção e etiqueta de duas ou três palavras. Nunca uma frase — em caixa alta o tracking larga as letras e a leitura cai. */ .eyebrow { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-accent); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* Alvo de toque. No mouse, 32px mantém a tela densa, que é o que o painel quer. No dedo o mínimo é 44px, e abaixo disso erra-se o botão. Em vez de escolher um e penalizar metade dos usos, a altura cresce só onde o ponteiro é grosso — celular, tablet e notebook com tela sensível ao toque. */ @media (pointer: coarse) { :root { --tap-min: 44px; --control-height: 44px; --row-height: 44px; } } @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; } } /* A devolutiva sai em PDF, e o PDF é o que a Elaine entrega. No papel, fundo colorido não imprime: quem carrega a informação é a borda, a palavra e o número. */ @media print { :root { --bg-app: #FFFFFF; --bg-sunken: #FFFFFF; --shadow-raise: none; --shadow-popover: none; --shadow-modal: none; } .nao-imprime { display: none !important; } .so-imprime { display: revert !important; } } /* ============================================================ PONTE PARA O SISTEMA NO AR ------------------------------------------------------------ Sistema/app/estilo.css e as 13 telas já publicadas falam em --deep, --ink, --line, --e-4, --r-lg. Este bloco aponta esses nomes para os tokens acima, então a migração pode ser tela por tela em vez de num fim de semana só. Três coisas que a ponte MUDA de propósito, e é aqui que se vê: - o raio. O sistema no ar usa 6/10/14/20px; aqui tudo cai em 4px, que é a linguagem única deste arquivo. Cantos mais secos, painel mais técnico. Se a preferência for manter a curva, é trocar os quatro valores de --r-* abaixo. - --e-5 e --e-7 (22px e 44px) não existem na grade de 4px; viram 20px e 40px. É o único lugar onde a ponte desalinha em 2px com o que está no ar. - --w-semibold (600) cai em 500. Esta escala tem três pesos de propósito — 400, 500, 700 — porque 500 e 600 lado a lado não se distinguem em 13px. Botão e h3 saem um grau mais leves. Os `font-weight:650` escritos à mão no estilo.css não passam pela ponte e continuam 650 até serem trocados. Ao terminar a migração, apagar este bloco inteiro. ============================================================ */ :root { /* cor */ --deep: var(--violet-800); --violet: var(--violet-700); --violet-soft: var(--violet-500); --gold: var(--gold-700); --gold-line: var(--gold-500); --ground: var(--bg-app); --surface: var(--bg-surface); --surface-2: var(--bg-sunken); --ink: var(--gray-800); --ink-2: var(--gray-600); --ink-3: var(--gray-500); --ink-4: var(--gray-400); --line: var(--border); --line-soft: var(--border-soft); --crit: var(--danger); --crit-bg: var(--danger-bg); --warn: var(--warning); --warn-bg: var(--warning-bg); --ok: var(--success); --ok-bg: var(--success-bg); /* tipografia */ --f-display: var(--font-display); --f-body: var(--font-sans); --f-mono: var(--font-mono); --t-title-1: var(--text-2xl); --t-title-2: var(--text-xl); --t-title-3: var(--text-lg); --t-headline: var(--text-lg); --t-body: var(--text-base); --t-callout: var(--text-base); --t-subhead: var(--text-sm); --t-footnote: var(--text-sm); --t-caption: var(--text-xs); --t-caption-2: var(--text-xs); --tr-display: var(--track-tight); --tr-tight: var(--track-tight); --tr-caption: var(--track-wide); --w-regular: var(--weight-normal); --w-medium: var(--weight-medium); --w-semibold: var(--weight-medium); --w-bold: var(--weight-bold); /* espaço e forma */ --e-1: var(--space-1); --e-2: var(--space-2); --e-3: var(--space-3); --e-4: var(--space-4); --e-5: var(--space-5); --e-6: var(--space-8); --e-7: var(--space-10); --e-8: var(--space-12); --r-sm: var(--radius-sm); --r: var(--radius); --r-lg: var(--radius); --r-xl: var(--radius-lg); --r-full: var(--radius-full); --sombra-1: var(--shadow-raise); --sombra-2: var(--shadow-popover); --sombra-3: var(--shadow-modal); } /* ============================================================ REGRAS DE USO — colar junto em todo prompt de UI ============================================================ 1. A ação é o roxo --action (#410E6D), sólido, texto branco. Secundário é borda 1px --border-strong com fundo branco. Terciário é só texto --text-link. Nada de gradiente. 2. O ouro ocupa no máximo 5% da tela, e tem dois papéis separados que não se trocam: --gold-500 é traço (régua de progresso, linha de gráfico, filete de callout) e não pode virar texto — 2,42:1; --gold-700 é o ouro que vira palavra (chapéu, etiqueta "QUANDO", numeração de pergunta). Ouro nunca é fundo de card e nunca é botão primário. 3. Nada só por cor. Sempre cor + palavra + número. Um pilar em vermelho traz "crítico" escrito e "14/40" ao lado. É a lei mais antiga deste produto: o mesmo diagnóstico é lido no celular, no notebook e impresso em preto. 4. Separação vem de borda 1px --border. Sombra só em dropdown, popover, modal — e --shadow-raise no cartão que é link e levanta no hover. Card parado com sombra difusa = não. 5. Tabela: linha --row-height, cabeçalho em --bg-sunken com peso 500 e 11px, zebra desligada, borda só horizontal, coluna numérica alinhada à direita em --font-mono. 6. Um raio só: --radius (4px) em tudo, exceto badge de status (--radius-full) e overlay (--radius-lg). 7. Ícone: Lucide com stroke-width 1.5 e 16px na UI densa, 20px no menu. Traço, nunca emoji — no item aberto do menu o ícone precisa virar branco junto com o texto, coisa que emoji nunca fez. Proibidos Sparkles, Zap, Rocket. 8. Copy no vocabulário do método, não no do software: "Aplicar diagnóstico", "Enviar convite", "Abrir devolutiva", "Reaplicar em 12 meses" — não "Criar novo item". 9. Todo estado tem tela: vazio com a ação que sai dele, carregando com skeleton no formato do conteúdo, erro com causa e saída, e lista longa paginada ou virtualizada. 10. Nenhum alert() nem confirm(), nunca na abertura de página. Trava a tela e, no celular, aparece descolado do contexto. Aviso é bloco dentro da página, com o botão ainda vivo. 11. No dedo, 44px de alvo. Já está na base por pointer:coarse — não desfazer em componente. Quem responde as 60 perguntas está num celular. 12. A tela que o cliente abre usa data-densidade="leitura". O painel de quem aplica, não. ============================================================ DECISÕES EM ABERTO — resolver antes de começar as telas ============================================================ a) TÍTULO EM SERIFA. O sistema no ar usa ui-serif/New York/ Georgia em h1, h2, nota grande e número de tile, e isso é metade da cara dele. Aqui --font-display aponta para a sans. Manter a serifa é apontar --font-display para a serifa; a escala e as cores não mudam. b) RAIO. Este arquivo tem um raio só (4px). O sistema no ar tem quatro (6/10/14/20). A ponte já converte, mas é a mudança visual mais perceptível da troca. c) NOME DOS TOKENS. Aqui em inglês, como no arquivo de referência; o código do sistema é todo em português. A ponte resolve hoje, mas o padrão do sistema novo é escolha a fazer uma vez. ============================================================ */