/* ===================================================================== AXYIA · tokens.css · design system v2.2 (agosto de 2026) Única fonte de cor, tipografia, espaço, raio, sombra, z-index, movimento e layout. Duas camadas: 1) swatches, o único lugar onde um hex existe; 2) tokens semânticos, o único nome que um componente usa. Um componente nunca lê swatch. Tema escuro = só a camada 2 dentro de [data-theme="dark"] (bloco no fim do arquivo). Superfície do site: [data-surface="site-dark"]. Carregar antes de axyia.css. Valores resolvidos em tokens.json. ===================================================================== */ :root { /* ------------------------------------------------------------------- 0. CORES AXYIA : as cinco cores da marca, por nome. Tudo deriva delas. ------------------------------------------------------------------- */ --axyia-preto: var(--stone-900); /* tinta: texto, botão primário, hero escuro */ --axyia-cinza: var(--stone-500); /* o cinza da marca; a rampa stone são os tons dele */ --axyia-papel: var(--stone-050); /* fundo */ --axyia-amarelo: var(--amarelo-500); /* a cor de destaque, só como superfície */ --axyia-logo: var(--logo-ink); /* preto quente do wordmark e dos selos */ /* ------------------------------------------------------------------- 1. SWATCHES : hex só aqui. Dois grupos. "Marca": stone, amarelo e logo. "Funcionais": verde, laranja e vermelho, presos a feedback e status. ------------------------------------------------------------------- */ /* Stone: rampa neutra quente, matiz 85°, croma 0.005 a 0.011. 000, 100 e 900 vêm do v1. */ --stone-000: #ffffff; --stone-050: #f9f8f4; --stone-100: #f4f2ee; --stone-150: #edebe6; --stone-200: #e2dfda; --stone-300: #d4d1ca; --stone-400: #b4b1aa; --stone-500: #8f8c85; --stone-600: #6b6963; --stone-700: #55524c; --stone-800: #373530; --stone-900: #1c1917; --stone-950: #0e0d0a; --stone-925: #151412; /* só no modo escuro: sidebar e thead */ --stone-850: #262320; /* só no modo escuro: hover, pílula, borda sutil */ /* Amarelo AXYIA: a cor da marca. Nunca é texto e nunca é botão do sistema. No sistema aparece em três lugares: barra da linha selecionada, toggle ligado e preenchimento de barra de progresso. Contador do menu é neutro. No site: marca-texto atrás de texto preto, filete de eyebrow, números grandes e o CTA sobre o hero preto (texto preto por cima, 11.4:1). */ --amarelo-500: #f4ce23; --amarelo-400: #ffe98a; /* hover do CTA amarelo sobre o hero */ /* Logo: preto quente do wordmark e dos selos. Só no logo. */ --logo-ink: #382e2e; /* Funcionais: só feedback e status. Nunca em botão, título, marca ou peça institucional. Alerta é laranja, e não âmbar, para não confundir com o amarelo da marca. */ --green-050: #e0f7e4; --green-300: #95d7a2; --green-500: #1c8742; --green-600: #206133; --amber-050: #fff1dc; --amber-300: #f2c48a; --amber-500: #d4740a; --amber-600: #8a4a00; --red-050: #ffeae8; --red-300: #f9aea7; --red-500: #b6322d; --red-600: #9e2c2c; /* Alfas da tinta (sombra e overlay no claro) e do preto (no escuro). */ --alpha-ink-06: rgba(28, 25, 23, 0.06); --alpha-ink-10: rgba(28, 25, 23, 0.10); --alpha-ink-16: rgba(28, 25, 23, 0.16); --alpha-ink-48: rgba(28, 25, 23, 0.48); --alpha-black-40: rgba(0, 0, 0, 0.40); /* sombra no modo escuro */ --alpha-black-60: rgba(0, 0, 0, 0.60); /* overlay no modo escuro */ /* ------------------------------------------------------------------- 2. SEMÂNTICOS : o que os componentes leem. ------------------------------------------------------------------- */ /* Superfícies, da mais funda para a mais alta: canvas → sidebar → elevated → muted */ --bg-canvas: var(--stone-050); /* fundo da página do app */ --bg-sidebar: var(--stone-100); /* sidebar, navegação */ --bg-subtle: var(--stone-100); /* thead, snippet */ --bg-elevated: var(--stone-000); /* card, tabela, modal, input */ --bg-muted: var(--stone-150); /* hover de linha, campo desabilitado */ --bg-inset: var(--stone-200); /* skeleton, trilho de toggle e de barra */ --bg-inverse: var(--stone-900); /* tooltip, toast, CTA do site */ --bg-overlay: var(--alpha-ink-48);/* fundo do modal */ /* Texto, em ordem estrita de contraste. Um hex por nome. */ --fg: var(--stone-900); /* principal, 17.5:1 sobre branco */ --fg-secondary: var(--stone-700); /* apoio, th, navegação, 7.8:1 */ --fg-tertiary: var(--stone-600); /* metadados, placeholder, 5.5:1 */ --fg-disabled: var(--stone-500); /* só controle desabilitado, 3.4:1 */ --fg-inverse: var(--stone-050); /* sobre bg-inverse */ --fg-inverse-secondary: var(--stone-300); /* corpo de toast */ --fg-inverse-tertiary: var(--stone-400); /* ícone em toast */ --fg-on-accent: var(--stone-000); /* sobre o acento */ /* Bordas */ --border-subtle: var(--stone-200); /* divisor de linha */ --border: var(--stone-300); /* card, input, tabela */ --border-strong: var(--stone-400); /* hover de input, tag */ --border-inverse: var(--stone-700); /* kbd dentro de tooltip */ /* Acento: a ação continua em tinta. Índigo, terracota, marrom, laranja em botão e bordô foram testados e caíram. */ --accent: var(--stone-900); /* botão primário, checkbox marcado, ordenação ativa, indicador de aba */ --accent-hover: var(--stone-700); --accent-active: var(--stone-800); --accent-subtle: var(--stone-150); /* fundo de linha selecionada, nav ativa, chip aplicado */ --accent-subtle-strong: var(--stone-200); /* hover sobre seleção, halo de foco em input */ --accent-border: var(--stone-900); /* borda de chip aplicado, card selecionado */ --accent-fg: var(--stone-900); /* item de navegação ativo, link */ --on-accent: var(--fg-on-accent); /* Marca amarela: os únicos pontos de cor do sistema. */ --nav-count-bg: var(--stone-200); /* contador do menu lateral: neutro (amarelo testado em tela e reprovado, 25/08) */ --nav-count-fg: var(--stone-900); --brand-mark: var(--amarelo-500); /* o quadrado da versão com ponto do logo e dos selos; nunca no sistema */ --logo-fg: var(--axyia-logo); /* letras do logo; papel no modo escuro e sobre preto */ --logo-selo-bg: var(--axyia-logo); /* fundo do selo sobre superfície clara; inverte em site-dark e .on-dark */ --logo-selo-fg: var(--axyia-papel); /* o A do selo */ --selection-mark: var(--amarelo-500); /* barra de 3px da linha selecionada */ --toggle-on: var(--amarelo-500); /* trilho do toggle ligado */ --toggle-on-knob: var(--stone-900); /* bolinha do toggle ligado */ --progress-fill: var(--amarelo-500); /* preenchimento da barra de progresso */ --accent-highlight: var(--amarelo-500); /* marca-texto e grifo sob número: site e marketing; nunca em tela de sistema ou painel */ /* Dados e gráficos: uma série em tinta, comparações descendo a rampa, amarelo em um único destaque. */ --chart-1: var(--stone-900); --chart-2: var(--stone-500); --chart-3: var(--stone-300); --chart-4: var(--stone-200); --chart-highlight: var(--amarelo-500); /* a barra de hoje, o ponto atual, a meta */ --chart-area: var(--stone-150); /* área sob a linha */ --chart-grid: var(--stone-150); --chart-axis: var(--stone-600); /* 5.5:1 sobre branco; stone-500 (3.4:1) parecia desabilitado */ --chart-ref: var(--stone-400); /* linha de meta, tracejada */ --chart-positive: var(--green-500); /* variação boa de KPI; nunca cor de série */ --chart-negative: var(--red-500); /* Foco: anel de 2px no acento, deslocado 2px, em tudo. */ --focus-ring: var(--accent); --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-halo: var(--stone-300); /* halo de 3px no campo focado; stone-200 ficava invisivel sobre papel */ /* Semântica de feedback: fundo, borda, texto e sólido por tom. */ --success-bg: var(--green-050); --success-border: var(--green-300); --success-fg: var(--green-600); --success-solid: var(--green-500); --warning-bg: var(--amber-050); --warning-border: var(--amber-300); --warning-fg: var(--amber-600); --warning-solid: var(--amber-500); /* só ícone e borda; nunca fundo de botão */ --error-bg: var(--red-050); --error-border: var(--red-300); --error-fg: var(--red-600); --error-solid: var(--red-500); /* botão destrutivo */ --info-bg: var(--bg-muted); /* aviso neutro, sem matiz */ --info-border: var(--border); --info-fg: var(--fg-secondary); /* Status de processo: pílula neutra, texto na cor do texto, ponto só onde há semântica. */ --status-pill-bg: var(--bg-muted); --status-ativo-fg: var(--fg); --status-ativo-dot: var(--green-500); --status-recurso-fg: var(--fg); --status-recurso-dot: var(--amber-500); --status-suspenso-fg: var(--fg); --status-suspenso-dot: var(--amber-500); --status-ext-com-merito-fg: var(--fg-secondary); --status-ext-sem-merito-fg: var(--fg-secondary); --status-ext-sem-merito-dot: var(--red-500); --status-acordo-fg: var(--fg-secondary); --status-arquivado-fg: var(--fg-tertiary); --status-encerrado-fg: var(--fg-tertiary); /* ------------------------------------------------------------------- 3. TIPOGRAFIA : uma família. Cada papel lê três tokens: size / lh / track. ------------------------------------------------------------------- */ --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: var(--font-sans); /* site e capa: a mesma sans em 600, tracking apertado */ --font-code: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* só nos snippets desta documentação; o produto não tem mono */ --font-logo: "Expletus Sans", "IBM Plex Sans", sans-serif; /* construção do wordmark no Figma; a interface usa o SVG do sprite */ --logo-weight: 600; --logo-track: 0.12em; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --text-micro: 11px; --lh-micro: 1.4; --track-micro: 0.06em; /* cabeçalho de tabela, eyebrow, tag: caixa alta */ --text-caption: 12px; --lh-caption: 1.5; --track-caption: 0.01em; /* metadados, ajuda, rótulo (500) */ --text-body-sm: 13px; --lh-body-sm: 1.5; --track-body-sm: 0.005em; /* tabela densa, breadcrumb */ --text-body: 14px; --lh-body: 1.55; --track-body: 0em; /* padrão do app */ --text-prose: 15px; --lh-prose: 1.65; --track-prose: 0em; /* leitura longa, medida 68ch */ --text-body-lg: 16px; --lh-body-lg: 1.5; --track-body-lg: 0em; /* lead de site, corpo de modal */ --text-heading: 16px; --lh-heading: 1.35; --track-heading: -0.01em; /* título de seção, card, modal (600) */ --text-title: 22px; --lh-title: 1.25; --track-title: -0.01em; /* título de página (500) */ --text-title-lg: 28px; --lh-title-lg: 1.2; --track-title-lg: -0.015em; /* título de área, relatório (500) */ --text-display: 40px; --lh-display: 1.1; --track-display: -0.02em; /* número de destaque, título de relatório (500) */ --text-hero: clamp(36px, 4vw, 56px); --lh-hero: 1.08; --track-hero: -0.03em; /* só site e capa (600) */ --measure: 68ch; /* leitura longa */ --measure-sm: 45ch; /* frase de vazio, ajuda */ /* ------------------------------------------------------------------- 4. ESPAÇO, RAIO, SOMBRA, Z, MOVIMENTO, LAYOUT ------------------------------------------------------------------- */ --sp-0-5: 2px; --sp-1: 4px; --sp-1-5: 6px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --r-xs: 2px; /* checkbox, skeleton */ --r-sm: 4px; /* tag, tooltip, item de menu */ --r-md: 6px; /* botão, input, chip */ --r-lg: 8px; /* card, tabela, modal */ --r-xl: 12px; /* card de site */ --r-full: 999px; /* pílula, toggle, avatar */ --shadow-sm: 0 1px 2px var(--alpha-ink-06); --shadow-md: 0 2px 6px var(--alpha-ink-06), 0 8px 20px var(--alpha-ink-06); --shadow-lg: 0 4px 12px var(--alpha-ink-10), 0 16px 40px var(--alpha-ink-10); --shadow-popover: 0 2px 6px var(--alpha-ink-10), 0 8px 24px var(--alpha-ink-16); --z-base: 0; --z-sticky: 10; --z-dropdown: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; --dur-fast: 80ms; /* hover, mudança de cor, ícone */ --dur-base: 160ms; /* menu de ações, toggle, indicador de aba, chip */ --dur-enter: 200ms; /* entrada de modal e toast */ --dur-slow: 240ms; /* sidebar recolhendo, painel lateral, gaveta do menu */ --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --sidebar-w: 240px; --sidebar-w-collapsed: 56px; --topbar-h: 48px; --logo-ratio: 4.754; /* largura/altura do logo oficial, sem ponto (sprite #logo-axyia) */ --logo-ratio-ponto: 4.995; /* versão com ponto: só site, marketing e proposta (sprite #logo-axyia-ponto) */ --page-header-h: 56px; --filterbar-h: 40px; --row-dense: 32px; --row-comfortable: 40px; --content-pad: 24px; --content-max: 1600px; --form-w: 640px; /* largura do formulário */ --drawer-w: 420px; /* painel lateral de leitura */ --drawer-w-lg: 560px; /* painel lateral de edição */ --menu-w: 240px; /* largura mínima do menu de ações */ --hbars-label: 96px; /* coluna de rótulo das barras horizontais, igual em todos os gráficos do card */ --control-sm: 28px; --control-md: 32px; --control-lg: 40px; /* altura de botão, input, chip */ --icon-xs: 14px; --icon-sm: 16px; --icon-md: 18px; --icon-lg: 20px; --icon-xl: 24px; --icon-hero: 40px; --bp-md: 1024px; /* sidebar recolhe por padrão; tabela .responsive vira lista */ --bp-lg: 1280px; /* tabela com todas as colunas */ --bp-target: 1366px; /* tela alvo: notebook de 13 e 14 polegadas, 12 linhas densas acima da dobra */ --bp-xl: 1536px; /* painel lateral abre ao lado da tabela */ } /* ===================================================================== SUPERFÍCIE DO SITE : hero preto e faixa de CTA. O resto do site usa os tokens do sistema. CTA amarelo com texto preto só aqui. ===================================================================== */ [data-surface="site-dark"] { --bg-canvas: var(--stone-950); --bg-elevated: var(--stone-900); --bg-subtle: var(--stone-900); --fg: var(--stone-000); --fg-secondary: var(--stone-400); --fg-tertiary: var(--stone-400); --border: var(--stone-700); --border-subtle: var(--stone-800); --accent: var(--amarelo-500); --accent-hover: var(--amarelo-400); --accent-active: var(--amarelo-400); --on-accent: var(--stone-900); --accent-fg: var(--amarelo-500); --logo-fg: var(--axyia-papel); --logo-selo-bg: var(--axyia-papel); --logo-selo-fg: var(--axyia-logo); } /* ===================================================================== MODO ESCURO : só a camada semântica muda. Swatches, amarelo, funcionais sólidas, tipografia, espaço e movimento são os mesmos. Ligar com ; "auto" segue o sistema operacional. Só no sistema: site, documentos e e-mail são sempre claros. Tinta e papel trocam de lugar: ação primária vira papel com texto preto; o amarelo continua nos mesmos três lugares e em um destaque por gráfico. Verde, laranja e vermelho de texto sobem um passo (300) para AA sobre stone-900. ===================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg-canvas: var(--stone-950); --bg-sidebar: var(--stone-925); --bg-subtle: var(--stone-925); --bg-elevated: var(--stone-900); --bg-muted: var(--stone-850); --bg-inset: var(--stone-800); --bg-inverse: var(--stone-050); --bg-overlay: var(--alpha-black-60); --fg: var(--stone-050); --fg-secondary: var(--stone-300); --fg-tertiary: var(--stone-500); --fg-disabled: var(--stone-600); --fg-inverse: var(--stone-900); --fg-inverse-secondary: var(--stone-700); --fg-inverse-tertiary: var(--stone-600); --fg-on-accent: var(--stone-900); --border-subtle: var(--stone-850); --border: var(--stone-800); --border-strong: var(--stone-700); --border-inverse: var(--stone-300); --accent: var(--stone-050); --accent-hover: var(--stone-200); --accent-active: var(--stone-300); --accent-subtle: var(--stone-850); --accent-subtle-strong: var(--stone-800); --accent-border: var(--stone-050); --accent-fg: var(--stone-050); --on-accent: var(--stone-900); --nav-count-bg: var(--stone-800); --nav-count-fg: var(--stone-050); --logo-fg: var(--stone-050); --logo-selo-bg: var(--stone-050); --logo-selo-fg: var(--logo-ink); --chart-1: var(--stone-050); --chart-2: var(--stone-400); --chart-3: var(--stone-700); --chart-4: var(--stone-800); --chart-area: var(--stone-850); --chart-grid: var(--stone-850); --chart-axis: var(--stone-500); --chart-ref: var(--stone-600); --chart-positive: var(--green-300); --chart-negative: var(--red-300); --success-bg: color-mix(in oklab, var(--green-500) 18%, var(--stone-900)); --success-border: color-mix(in oklab, var(--green-500) 40%, var(--stone-900)); --success-fg: var(--green-300); --warning-bg: color-mix(in oklab, var(--amber-500) 18%, var(--stone-900)); --warning-border: color-mix(in oklab, var(--amber-500) 40%, var(--stone-900)); --warning-fg: var(--amber-300); --error-bg: color-mix(in oklab, var(--red-500) 18%, var(--stone-900)); --error-border: color-mix(in oklab, var(--red-500) 40%, var(--stone-900)); --error-fg: var(--red-300); --info-bg: var(--stone-850); --info-border: var(--stone-800); --info-fg: var(--stone-300); --status-pill-bg: var(--stone-850); --shadow-sm: 0 1px 2px var(--alpha-black-40); --shadow-md: 0 2px 6px var(--alpha-black-40), 0 8px 20px var(--alpha-black-40); --shadow-lg: 0 4px 12px var(--alpha-black-60), 0 16px 40px var(--alpha-black-60); --shadow-popover: 0 2px 6px var(--alpha-black-40), 0 8px 24px var(--alpha-black-60); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --bg-canvas: var(--stone-950); --bg-sidebar: var(--stone-925); --bg-subtle: var(--stone-925); --bg-elevated: var(--stone-900); --bg-muted: var(--stone-850); --bg-inset: var(--stone-800); --bg-inverse: var(--stone-050); --bg-overlay: var(--alpha-black-60); --fg: var(--stone-050); --fg-secondary: var(--stone-300); --fg-tertiary: var(--stone-500); --fg-disabled: var(--stone-600); --fg-inverse: var(--stone-900); --fg-inverse-secondary: var(--stone-700); --fg-inverse-tertiary: var(--stone-600); --fg-on-accent: var(--stone-900); --border-subtle: var(--stone-850); --border: var(--stone-800); --border-strong: var(--stone-700); --border-inverse: var(--stone-300); --accent: var(--stone-050); --accent-hover: var(--stone-200); --accent-active: var(--stone-300); --accent-subtle: var(--stone-850); --accent-subtle-strong: var(--stone-800); --accent-border: var(--stone-050); --accent-fg: var(--stone-050); --on-accent: var(--stone-900); --nav-count-bg: var(--stone-800); --nav-count-fg: var(--stone-050); --logo-fg: var(--stone-050); --logo-selo-bg: var(--stone-050); --logo-selo-fg: var(--logo-ink); --chart-1: var(--stone-050); --chart-2: var(--stone-400); --chart-3: var(--stone-700); --chart-4: var(--stone-800); --chart-area: var(--stone-850); --chart-grid: var(--stone-850); --chart-axis: var(--stone-500); --chart-ref: var(--stone-600); --chart-positive: var(--green-300); --chart-negative: var(--red-300); --success-bg: color-mix(in oklab, var(--green-500) 18%, var(--stone-900)); --success-border: color-mix(in oklab, var(--green-500) 40%, var(--stone-900)); --success-fg: var(--green-300); --warning-bg: color-mix(in oklab, var(--amber-500) 18%, var(--stone-900)); --warning-border: color-mix(in oklab, var(--amber-500) 40%, var(--stone-900)); --warning-fg: var(--amber-300); --error-bg: color-mix(in oklab, var(--red-500) 18%, var(--stone-900)); --error-border: color-mix(in oklab, var(--red-500) 40%, var(--stone-900)); --error-fg: var(--red-300); --info-bg: var(--stone-850); --info-border: var(--stone-800); --info-fg: var(--stone-300); --status-pill-bg: var(--stone-850); --shadow-sm: 0 1px 2px var(--alpha-black-40); --shadow-md: 0 2px 6px var(--alpha-black-40), 0 8px 20px var(--alpha-black-40); --shadow-lg: 0 4px 12px var(--alpha-black-60), 0 16px 40px var(--alpha-black-60); --shadow-popover: 0 2px 6px var(--alpha-black-40), 0 8px 24px var(--alpha-black-60); } }