/* ============================================================ NG Billing — Design Tokens v1 ------------------------------------------------------------ Documento vinculante: DESIGN_SYSTEM_CORES_NGBILLING_v1.md Não declare hex literais fora deste arquivo. Para uso visual dos tokens: docs/design-tokens.html ============================================================ */ :root { /* ============================================================ EIXO 1 — Cores de marca ============================================================ */ --color-brand-orange: #EB7601; /* primária */ --color-brand-orange-hover: #C75F00; --color-brand-orange-active: #A34E00; --color-brand-black: #1D252E; /* secundária */ --color-brand-navy: #14213D; /* terciária / estrutural */ --color-brand-navy-soft: #1F2D52; --color-brand-navy-line: #2A3A60; --color-brand-navy-deep: #0B1428; --color-brand-offwhite: #F2F0EB; /* ============================================================ Escala neutra ============================================================ */ --color-neutral-100: #E8EAEE; --color-neutral-300: #C4C9D1; --color-neutral-300-cool: #A8B0BD; /* uso específico em fundo escuro */ --color-neutral-500: #6B7480; --color-neutral-700: #404853; --color-neutral-900: #14181C; --color-white: #FFFFFF; /* ============================================================ EIXO 2 — Tokens semânticos ============================================================ */ --cta-primary: var(--color-brand-orange); --cta-primary-hover: var(--color-brand-orange-hover); --cta-primary-active: var(--color-brand-orange-active); --cta-secondary: var(--color-brand-black); --cta-tertiary: var(--color-brand-navy); --surface-base: var(--color-white); --surface-neutral: var(--color-brand-offwhite); --surface-premium: var(--color-brand-black); --surface-deep: var(--color-brand-navy); --surface-elevated: var(--color-brand-navy-deep); --text-primary: var(--color-brand-black); --text-secondary: var(--color-neutral-700); --text-muted: var(--color-neutral-500); --text-on-dark: var(--color-white); --text-muted-on-dark: var(--color-neutral-300-cool); --text-accent: var(--color-brand-orange); --text-eyebrow: var(--color-brand-orange); --border-light: var(--color-neutral-100); --border-dark: var(--color-brand-navy-line); /* Foco visível — usa o laranja queimado para passar WCAG 1.4.11 em qualquer fundo (sobre branco: 4.15:1 PASS; sobre preto NG: 3.71:1 PASS; sobre navy: 3.87:1 PASS). */ --focus-ring: var(--color-brand-orange-hover); --focus-ring-width: 2px; /* alinhado com Design System v1 §3.1 */ /* Texto sobre CTA primário (estados default e hover) — preto NG (decisão WCAG Sprint 1) */ --cta-primary-text: var(--color-brand-black); /* Texto sobre CTA primário no estado active — branco (estado pressed escuro) */ --cta-primary-text-active: var(--color-white); /* Eyebrow contextual: laranja em fundo escuro, cinza-escuro em fundo claro */ --text-eyebrow-on-light: var(--text-secondary); /* ============================================================ EIXO 7 — Escala de sinalização (uso restrito a dados/feedback) Ver Design System §EIXO 7 para regras de uso. ============================================================ */ --signal-loss: #D95040; /* perda, vazamento, erro */ --signal-risk: #C87A20; /* risco, alerta, atenção */ --signal-gain: #4A9060; /* ganho, melhoria, sucesso */ /* ============================================================ AUXILIARES LEGADOS — para revisão na Sprint 2 ------------------------------------------------------------ Cores em uso no style-v2.css que não foram cobertas pelo Design System v1 e foram preservadas para evitar mudança visual nesta Sprint (refatoração isovisual). Cada um é candidato a remoção/remapeamento durante a Sprint 2. ============================================================ */ /* Laranja — variantes legadas (não documentadas no system) */ --legacy-orange-light: #FF8C1A; /* hover de drawer mobile */ --legacy-orange-deep: #C46000; /* gradiente de avatar laranja */ --legacy-orange-mid: #C96400; /* gradiente de testimonial avatar */ /* Avatares decorativos (gradientes) — não são cores de marca */ --legacy-avatar-purple-start: #7C3AED; --legacy-avatar-purple-end: #5B21B6; --legacy-avatar-green-start: #059669; --legacy-avatar-green-end: #047857; /* Feedback colors em uso pré-Design-System (distintos dos --signal-*) */ --legacy-feedback-up: #34D399; /* trend ↑ em dashboards */ --legacy-feedback-warn: #FBBF24; /* badge "warn" pendente */ --legacy-feedback-amber: #F59E0B; /* estrelas de avaliação */ /* macOS browser frame (decorativo fixo) */ --legacy-browser-red: #FF5F57; --legacy-browser-yellow: #FFBD2E; --legacy-browser-green: #28C840; /* Cores funcionais da calculadora da Cadeia de Consistência */ --legacy-chain-blue: #3A7FC1; /* "Diferença recuperável" e azuis informativos */ --legacy-chain-purple: #7B61D8; /* "Evidência externa" e roxos informativos */ /* Tons neutros pontuais não cobertos pela escala oficial */ --legacy-shade-50: #FAFAFA; --legacy-shade-100: #EBEBEB; --legacy-shade-200: #D1D5DB; --legacy-shade-300-cool: #CBD5E0; --legacy-shade-400: #9CA3AF; --legacy-shade-quaternary: #C2C7CC; --legacy-shade-deep: #111820; /* interior de browser frame */ --legacy-shade-navy-mid: #243040; /* stop de gradiente em case quote */ /* ============================================================ OVERLAYS, SOMBRAS E GLOWS ------------------------------------------------------------ Versões translúcidas das cores de marca usadas em estados, bordas suaves e efeitos visuais. Tokenizadas para evitar proliferação de rgba() literais no código. ============================================================ */ /* Bordas suaves (translúcidas) */ --border-soft-on-dark: rgba(255,255,255,0.08); --border-soft-on-light: rgba(29,37,46,0.12); /* Overlays brancos (sobre fundos escuros) */ --overlay-white-05: rgba(255,255,255,0.05); --overlay-white-06: rgba(255,255,255,0.06); --overlay-white-07: rgba(255,255,255,0.07); --overlay-white-08: rgba(255,255,255,0.08); --overlay-white-12: rgba(255,255,255,0.12); --overlay-white-25: rgba(255,255,255,0.25); --overlay-white-5: rgba(255,255,255,0.5); --overlay-white-6: rgba(255,255,255,0.6); --overlay-white-75: rgba(255,255,255,0.75); /* Overlays escuros (preto NG translúcido) */ --overlay-dark-7: rgba(29,37,46,0.7); --overlay-dark-97: rgba(29,37,46,0.97); --shadow-dark-soft: rgba(29,37,46,0.07); --shadow-dark-mid: rgba(29,37,46,0.08); --shadow-dark-strong: rgba(29,37,46,0.2); --shadow-dark-stronger: rgba(29,37,46,0.4); /* Glow / overlay laranja (translúcido) */ --glow-orange-soft: rgba(235,118,1,0.10); --glow-orange-mid: rgba(235,118,1,0.18); --glow-orange-strong: rgba(235,118,1,0.30); --tint-orange-soft: rgba(240,120,0,0.12); --tint-orange-mid: rgba(240,120,0,0.20); --tint-orange-border: rgba(240,120,0,0.30); /* Sombras pretas puras (decorativas) */ --shadow-black-soft: rgba(0,0,0,0.4); /* Tints feedback (badges de status) */ --tint-feedback-up: rgba(52,211,153,0.14); --tint-feedback-warn: rgba(251,191,36,0.14); --tint-feedback-warn-border: rgba(251,191,36,0.25); }