/* ═══════════════════════════════════════════════════════════════════════ DOWER — TOKENS (v2.1) CÓPIA EXECUTÁVEL da seção 9 do DESIGN.md ("Tokens essenciais — quick reference"), extraída verbatim do guia. Nada foi redigitado, reordenado, acrescentado nem "corrigido". O DESIGN.md é a FONTE DE VERDADE; este arquivo é derivado dele. Divergência entre os dois se resolve A FAVOR DO DESIGN.md — corrija este arquivo para bater com o guia, nunca o contrário. Os comentários inline abaixo vieram junto e são normativos: marcam as divergências declaradas em relação ao kit diagramado v1.0, a razão de --focus-ring existir separado de --action-primary, e a colisão intencional entre --surface-elevated e --surface-secondary no tema escuro. Não remova. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Brand */ --brand-black: #000000; --brand-white: #FFFFFF; /* Neutral scale */ --neutral-0: #FFFFFF; --neutral-50: #FAFAFA; --neutral-100: #F5F5F5; --neutral-200: #E5E5E5; --neutral-300: #D4D4D4; /* acréscimo nosso — ausente no kit */ --neutral-400: #A3A3A3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040; /* acréscimo nosso — exigido pelo hover do tema escuro */ --neutral-800: #262626; --neutral-900: #171717; --neutral-950: #090909; /* Tipografia */ --font-display: "Space Grotesk", sans-serif; --font-sans: "Inter", sans-serif; --font-mono: "JetBrains Mono", monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Espaçamento */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radius */ --radius-xs: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 9999px; /* badge, chip, tag — forma de pílula, não um degrau da escala */ /* Overlay */ --overlay: rgba(0,0,0,.56); } /* :root responde JUNTO com [data-theme="light"]: o tema padrão do CRM é o CLARO — decisão registrada na seção 11. Sem isto, página sem data-theme no herda só as primitivas e fica com --surface-canvas, --text-primary e os demais papéis vazios. O seletor explícito [data-theme="light"] continua existindo, e é ele que permite o aninhamento claro-dentro-de-escuro (padrão spotlight, seção 5). As 19 declarações NÃO são duplicadas: o bloco escuro abaixo é override. */ :root, [data-theme="light"] { --surface-canvas: #FAFAFA; --surface-primary: #FFFFFF; --surface-secondary: #F5F5F5; --surface-elevated: #FFFFFF; /* colide com surface-primary de propósito — ver seção 2 */ --text-primary: #111111; /* Ink do kit; fora da rampa, exceção registrada na seção 2 */ --text-secondary: #525252; /* --neutral-600; 7.81 sobre branco, contra 5.33 do #6B6B6B da v1.0 */ /* Terceiro nível de texto — meta, timestamp, rótulo de apoio em tela densa. --neutral-500; 4.74:1 sobre branco e 4.54:1 sobre o canvas: passa AA de corpo. ASSIMÉTRICO ENTRE OS TEMAS DE PROPÓSITO, e o valor escuro é o mesmo do secundário — ver o bloco [data-theme="dark"] abaixo, onde está o porquê. Existe porque colapsar o terceiro nível no segundo apaga hierarquia em vez de simplificar: em pipelines.html são 74 usos do nível terciário contra 26 do secundário, e promovê-los levaria 74 trechos de apoio de ~4.7:1 para 7.81:1. */ --text-tertiary: #737373; --border-default: #E5E5E5; --action-primary: #090909; --action-primary-hover: #171717; /* --neutral-900 */ --action-primary-text: #FFFFFF; /* --focus-ring tem o MESMO valor de --action-primary neste tema, e continua token separado. Anel de foco é LINHA em estado transitório, medida contra a superfície em volta; ação primária é PREENCHIMENTO em estado permanente, medido contra o texto por cima. Requisitos de contraste diferentes, sobre fundos diferentes. Não colapse os dois porque hoje coincidem. */ --focus-ring: #090909; --focus-halo: var(--neutral-200); --select-fill: var(--neutral-100); --field-rest: var(--surface-secondary); --field-focus: var(--surface-primary); /* semânticas do tema claro — família 600, calibrada para fundo branco */ --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #2563EB; } [data-theme="dark"] { --surface-canvas: #090909; /* --neutral-950 */ --surface-primary: #111111; /* Ink do kit; fora da rampa */ --surface-secondary: #171717; /* --neutral-900 */ /* COLISÃO INTENCIONAL: elevated == secondary. São quatro papéis de superfície para os três degraus da escada v1.0 (#090909 / #111111 / #171717). Não invente um quarto valor para "consertar" isto. DEPENDÊNCIA QUE ISSO CRIA: superfície flutuante (elevation-3 — modal e drawer) deixa de se distinguir pelo preenchimento e passa a depender de --border-default para se delimitar. Remover a borda de um modal no tema escuro apaga o limite da superfície, e o bug não aparece no tema claro. */ --surface-elevated: #171717; --text-primary: #FAFAFA; --text-secondary: #A3A3A3; /* COLAPSA no secundário de propósito: a rampa não sustenta um terceiro nível de texto passando AA no escuro. O #737373 do tema claro dá 3.98:1 sobre --surface-primary #111111 e 4.20:1 sobre o canvas #090909 — abaixo dos 4.5 que texto de corpo exige, nos dois. O degrau seguinte da rampa que passaria é justamente o --neutral-400 #A3A3A3, que já é o secundário. Assimetria MEDIDA e intencional, mesma classe do --action-primary-hover: o claro tem faixa para três níveis, o escuro não. Não "conserte" inventando um valor entre #737373 e #A3A3A3 para dar simetria — ele não passaria AA. CONSEQUÊNCIA: no tema escuro, terciário e secundário são indistinguíveis. Onde a hierarquia precisar dos três níveis, o terceiro vem de PESO ou TAMANHO. */ --text-tertiary: #A3A3A3; --border-default: #262626; /* --neutral-800 */ --action-primary: #FFFFFF; /* dois degraus, não um. O #F5F5F5 (--neutral-100) foi escolhido por simetria com a rampa e REPROVOU em teste perceptual sobre o botão branco: 1.09:1 contra o repouso, mudança temporal imperceptível em tela grande. O --neutral-200 dá 1.26:1 e comunica. Não "corrija" de volta para um degrau achando que é erro de digitação — a assimetria é medida e intencional. */ --action-primary-hover: #E5E5E5; /* --neutral-200 */ --action-primary-text: #090909; /* mesmo caso do tema claro: valor idêntico ao --action-primary, token separado de propósito — linha transitória contra preenchimento permanente */ --focus-ring: #FFFFFF; --focus-halo: var(--neutral-800); --select-fill: var(--neutral-800); --field-rest: var(--surface-primary); /* invertido de propósito */ --field-focus: var(--surface-secondary); /* invertido de propósito */ /* semânticas do tema escuro — família 500, calibrada para fundo #090909 */ --success: #22C55E; --warning: #F59E0B; --danger: #EF4444; --info: #3B82F6; }