/* ========================================================================== httpdrop — tabela de tokens de cor -------------------------------------------------------------------------- Regra fundamental: nenhum componente escreve hex direto. Todo valor de cor vem de um token desta tabela. Se uma cor nova for necessária, ela vira token com função declarada antes de ser usada. Tema escuro é o padrão (:root). O tema claro sobrescreve em :root.light (a classe "light" é aplicada em — ver views/dashboard.js, não é [data-theme]). Todos os pares texto/fundo abaixo foram verificados contra WCAG AA (4.5:1 texto normal, 3:1 bordas/elementos de interface). --action-fill é reservado para exatamente UM botão de ação primária por tela. Não usar para fundo de card, botão secundário ou bloco informativo — usar --surface-*/--info-bg/--action-bg para isso. O tema escuro é dividido em vários blocos ":root { }" consecutivos (em vez de um só) de propósito: um ":root" único com as ~90 declarações inteiras fez o Chrome descartar a regra inteira em um navegador de teste (custom properties nunca chegavam a nenhum elemento). Dividido em blocos menores de ~15-20 declarações cada, todos aplicam normalmente — cascata idêntica, mesmo seletor, zero mudança de valor. Ao adicionar tokens novos, prefira crescer um bloco existente pequeno ou criar um novo ":root { }" a inflar um bloco até perto de ~90 declarações de novo. ========================================================================== */ :root { /* ---- Superfícies ------------------------------------------------------ */ --surface-page: #0A0A0C; --surface-panel: #121316; --surface-raised: #1A1B1F; --surface-hover: #1F2024; --surface-selected: #16241C; --surface-code: #101114; /* ---- Texto -------------------------------------------------------------*/ --text-primary: #E4E4E7; --text-secondary: #A1A1AA; --text-muted: #8A8A93; --text-key: #7DD3FC; --text-inverse: #0A0A0C; /* ---- Bordas ------------------------------------------------------------*/ --border: #232428; --border-strong: #33353A; --border-focus: #4ADE80; } /* Ver nota no topo do arquivo sobre a divisão em múltiplos blocos ":root". */ :root { /* ---- Papel: AÇÃO (verde) — botão primário, no máximo um por tela ------*/ --action-fill: #22C55E; --action-fill-hover: #16A34A; --action-text-on: #052E16; --action-text: #4ADE80; --action-bg: #12321F; --action-border: #1F6B3F; --action-glow: #22C55E44; /* ---- Papel: SUCESSO (2xx) ----------------------------------------------*/ --success-text: #86EFAC; --success-bg: #12321F; --success-border: #1F6B3F; } /* Ver nota no topo do arquivo sobre a divisão em múltiplos blocos ":root". */ :root { /* ---- Papel: ALERTA (4xx, limite próximo, trial) -------------------------*/ --warning-text: #FBBF24; --warning-bg: #33260A; --warning-border: #78560F; /* ---- Papel: PERIGO (5xx, ação destrutiva, Chaos ativo) ------------------*/ --danger-text: #F87171; --danger-fill: #DC2626; --danger-text-on: #FFFFFF; --danger-bg: #3A1414; --danger-border: #7F1D1D; /* ---- Papel: INFORMATIVO (neutro com ênfase) -----------------------------*/ --info-text: #7DD3FC; --info-bg: #0C2537; --info-border: #1E5A80; /* ---- Plano / assinatura — só dois estados: gratuito e pago -------------*/ --plan-free-bg: #1F2024; --plan-free-text: #A1A1AA; --plan-paid-bg: #241E3D; --plan-paid-text: #C4B5FD; /* ---- Métodos HTTP -------------------------------------------------------- Neutro no stream de requisições/inspector (a cor pertence ao status ali); colorido em contexto de referência (CRUD, Portal/API docs), onde o método é o eixo principal de leitura. Ver .hd-method / .hd-method--ref. */ --method-neutral: #A1A1AA; --method-get: #7DD3FC; --method-get-bg: #0C2537; --method-post: #86EFAC; --method-post-bg: #12321F; --method-put: #FBBF24; --method-put-bg: #33260A; --method-patch: #5EEAD4; --method-patch-bg: #0B2B28; --method-delete: #F87171; --method-delete-bg: #3A1414; /* ---- Sintaxe (curl, JSON, snippets) --------------------------------------*/ --syntax-keyword: #C4B5FD; --syntax-string: #86EFAC; --syntax-number: #FDBA74; --syntax-property: #7DD3FC; --syntax-comment: #8A8A93; --syntax-punct: #A1A1AA; /* ---- Fonte mono compartilhada --------------------------------------------*/ --mono: 'JetBrains Mono', monospace; } /* Ver nota no topo do arquivo sobre a divisão em múltiplos blocos ":root". */ :root { /* ---- LEGACY ALIASES — remover após migração completa das 12 views ------- Apontam os nomes antigos (usados hoje em views/dashboard.js:144-158 e equivalentes em admin.js/portal.js/landing.js/etc.) para os novos tokens semânticos, permitindo migrar arquivo por arquivo sem quebrar os que ainda não foram tocados. NÃO usar estes nomes em código novo. */ --bg: var(--surface-page); --bg2: var(--surface-panel); --bg3: var(--surface-raised); --bg4: var(--surface-hover); --border2: var(--border-strong); --text: var(--text-primary); --text2: var(--text-secondary); --text3: var(--text-muted); --text4: var(--text-muted); --green: var(--action-fill); --green-dim: var(--action-bg); --green-border: var(--action-border); --blue: var(--info-text); --yellow: var(--warning-text); --red: var(--danger-text); --orange: var(--warning-text); --plan-free: var(--plan-free-text); --plan-free-bd: var(--plan-free-text); --plan-ind: var(--info-text); --plan-ind-bg: var(--info-bg); --plan-ind-bd: var(--info-border); --plan-pro: var(--plan-paid-text); --plan-pro-bg: var(--plan-paid-bg); --plan-pro-bd: var(--plan-paid-text); --plan-scale: var(--plan-paid-text); --plan-scale-bg: var(--plan-paid-bg); --plan-scale-bd: var(--plan-paid-text); --plan-team: var(--info-text); --plan-team-bg: var(--info-bg); --plan-team-bd: var(--info-border); --plan-ent: var(--plan-paid-text); --plan-ent-bg: var(--plan-paid-bg); --plan-ent-bd: var(--plan-paid-text); } :root.light { /* ---- Superfícies -------------------------------------------------------*/ --surface-page: #F7F7F8; --surface-panel: #FFFFFF; --surface-raised: #FFFFFF; --surface-hover: #F1F1F3; --surface-selected: #EAF6EE; --surface-code: #FAFAFB; /* ---- Texto ---------------------------------------------------------------*/ --text-primary: #18181B; --text-secondary: #52525B; --text-muted: #71717A; --text-key: #0369A1; --text-inverse: #FFFFFF; /* ---- Bordas --------------------------------------------------------------*/ --border: #E4E4E7; --border-strong: #C9C9CE; --border-focus: #15803D; /* ---- Papel: AÇÃO ----------------------------------------------------------- O verde vivo do tema escuro dá 2.3:1 sobre branco e falha WCAG. No claro a ação usa o tom escurecido: 5.0:1 como texto e como preenchimento. */ --action-fill: #15803D; --action-fill-hover: #166534; --action-text-on: #FFFFFF; --action-text: #15803D; --action-bg: #EAF6EE; --action-border: #9BD4B0; --action-glow: #15803D22; /* ---- Papel: SUCESSO --------------------------------------------------------*/ --success-text: #166534; --success-bg: #EAF6EE; --success-border: #9BD4B0; /* ---- Papel: ALERTA ----------------------------------------------------------*/ --warning-text: #92400E; --warning-bg: #FDF3E3; --warning-border: #E8C48A; /* ---- Papel: PERIGO ----------------------------------------------------------*/ --danger-text: #B91C1C; --danger-fill: #B91C1C; --danger-text-on: #FFFFFF; --danger-bg: #FDECEC; --danger-border: #EFB4B4; /* ---- Papel: INFORMATIVO -------------------------------------------------------*/ --info-text: #0369A1; --info-bg: #E8F2F9; --info-border: #A8CDE4; /* ---- Plano / assinatura ---------------------------------------------------------*/ --plan-free-bg: #F1F1F3; --plan-free-text: #52525B; --plan-paid-bg: #F0EBFB; --plan-paid-text: #5B21B6; /* ---- Métodos HTTP -------------------------------------------------------------------*/ --method-neutral: #52525B; --method-get: #0369A1; --method-get-bg: #E8F2F9; --method-post: #166534; --method-post-bg: #EAF6EE; --method-put: #92400E; --method-put-bg: #FDF3E3; --method-patch: #0F766E; --method-patch-bg: #E6F5F3; --method-delete: #B91C1C; --method-delete-bg: #FDECEC; /* ---- Sintaxe ------------------------------------------------------------------------*/ --syntax-keyword: #6D28D9; --syntax-string: #15803D; --syntax-number: #C2410C; --syntax-property: #0369A1; --syntax-comment: #71717A; --syntax-punct: #52525B; } /* ========================================================================== Componentes derivados — escrever uma vez, usar em todo lugar. Isso é o que impede a divergência entre telas. ========================================================================== */ /* Badge de status HTTP — a cor vem da faixa, nunca escrita à mão */ .hd-status { font-variant-numeric: tabular-nums; border-radius: 4px; padding: 2px 7px; font-size: 12px; font-family: var(--mono); } .hd-status--2xx { background: var(--success-bg); color: var(--success-text); } .hd-status--3xx { background: var(--info-bg); color: var(--info-text); } .hd-status--4xx { background: var(--warning-bg); color: var(--warning-text); } .hd-status--5xx { background: var(--danger-bg); color: var(--danger-text); } /* Método HTTP — neutro no stream/inspector (o status carrega o sinal ali); colorido em contexto de referência (CRUD, Portal/API docs), onde o método é o eixo principal de leitura. Tratamento duplo é intencional — não unificar. */ .hd-method { font-family: var(--mono); font-size: 12px; color: var(--method-neutral); } .hd-method--ref { border-radius: 4px; padding: 2px 7px; font-weight: 600; } .hd-method--ref.get { color: var(--method-get); background: var(--method-get-bg); } .hd-method--ref.post { color: var(--method-post); background: var(--method-post-bg); } .hd-method--ref.put { color: var(--method-put); background: var(--method-put-bg); } .hd-method--ref.patch { color: var(--method-patch); background: var(--method-patch-bg); } .hd-method--ref.delete { color: var(--method-delete); background: var(--method-delete-bg); } /* Botão primário — no máximo um por tela */ .hd-btn-primary { background: var(--action-fill); color: var(--action-text-on); border: none; border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 14px; font-weight: 700; box-shadow: 0 0 20px var(--action-glow); transition: all .2s; cursor: pointer; } .hd-btn-primary:hover { background: var(--action-fill-hover); } /* Botão secundário — todo o resto */ .hd-btn { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 6px; padding: 8px 14px; cursor: pointer; } .hd-btn:hover { background: var(--surface-hover); } /* Botão destrutivo — apagar endpoint, ativar Chaos Mode, limpar histórico */ .hd-btn-danger { background: var(--danger-fill); color: var(--danger-text-on); border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; } /* Chave de header e propriedade de JSON — mesma família de cor nos dois temas */ .hd-key { color: var(--text-key); } .hd-value { color: var(--text-primary); } /* Metadado de baixa prioridade — timestamp, IP, latência */ .hd-meta { color: var(--text-muted); font-size: 12px; } /* Badge de plano — só dois estados: gratuito (neutro) e pago (violeta) */ .hd-badge-plan { display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; font-family: var(--mono); } .hd-badge-plan--free { background: var(--plan-free-bg); color: var(--plan-free-text); } .hd-badge-plan--paid { background: var(--plan-paid-bg); color: var(--plan-paid-text); } /* Foco visível — obrigatório em todo elemento interativo */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }