/* ═══════════════════════════════════════════════════════════════ MOVE! ENERGIA — Design Tokens ═══════════════════════════════════════════════════════════════ GERADO a partir de: Move Design System / move-tokens-updated / outputs/css/tokens.css (v2.0.0) fonte real dos valores: tokens/{primitive,semantic,component}/*.json Contém SÓ a camada de tokens do design system. A camada de classes utilitárias do arquivo original (.btn, .card, .badge, .modal, .field…) NÃO foi trazida: ela colide com `move-style.css` — mesmos nomes de classe, valores diferentes, sufixos incompatíveis (.badge-orange do DS vs .badge-or do repositório). Os componentes deste repositório vivem em `move-style.css` e `components.css` e apenas CONSOMEM os tokens daqui. ┌─ DESVIOS DELIBERADOS EM RELAÇÃO AO OUTPUT DO DS ───────────────┐ │ Ao regerar a partir do DS, reaplicar os três. Cada um está │ │ marcado no corpo do arquivo com o mesmo prefixo [DESVIO n]. │ │ │ │ 1. Fontes auto-hospedadas em vez de @import do Google Fonts │ │ 2. --color-info-* passa de laranja para azul (dark e light) │ │ 3. --input-font-size 15px → 16px │ │ 4. --btn-primary-text passa a roxo 700 │ └────────────────────────────────────────────────────────────────┘ ═══════════════════════════════════════════════════════════════ */ /* ─── [DESVIO 1] FONTES AUTO-HOSPEDADAS ─────────────────────────── O DS original faz @import de fonts.googleapis.com. Aqui os arquivos são servidos do próprio domínio: elimina conexão a terceiro, o round-trip de CSS antes do primeiro texto renderizar, e um ponto de falha fora do nosso controle. Subconjunto `latin` (U+0000–00FF), que cobre todo o português. Outfit e Space Mono são SIL OFL 1.1 — redistribuição permitida. ─────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; /* fonte variável — um arquivo, toda a escala */ font-display: swap; src: url('fonts/outfit-variable.woff2') format('woff2-variations'), url('fonts/outfit-variable.woff2') format('woff2'); } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/space-mono-400.woff2') format('woff2'); } @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space-mono-700.woff2') format('woff2'); } /* ─ Tipografia ──────────────────────────────────────────────────── CORRIGIDO EM 31/08/2026. O texto anterior afirmava três pilhas tipográficas concorrentes; a varredura das font-family realmente declaradas nos 10 HTML mostrou outra coisa: Outfit → TODAS as páginas dos quatro sites (universal) Space Mono → dado numérico/monoespaçado nas telas de operação (clientes, login, escritório, app, admin) Open Sans → sobrevive em um arquivo só: site-mov/index.html Poppins → REMOVIDA (31/08/2026): zero uso, e fora do manual de marca. Cinco arquivos woff2 apagados. Montserrat → mantida sem uso DE PROPÓSITO: consta do manual de marca, então a decisão de aposentá-la é da marca, não minha. Custa ~0 em runtime (ver nota abaixo). Nota de performance, para não superestimar a limpeza: @font-face é carregado SOB DEMANDA — o navegador só busca o arquivo quando a família casa com texto renderizado. Família declarada e não usada não pesa no page load. O ganho de remover Poppins é de repositório e deploy (~39 KB × 4 alvos) e de clareza, não de velocidade. Unificar Open Sans com Outfit continua em aberto: é decisão de marca. ─────────────────────────────────────────────────────────────────── */ @font-face { font-family:'Montserrat'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/montserrat-variable.woff2') format('woff2'); } @font-face { font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:swap; src:url('fonts/open-sans-variable.woff2') format('woff2'); } /* ─── PRIMITIVES (internal reference — do not use directly in components) ─── */ :root { /* Purple scale */ --primitive-purple-950: #0a0220; --primitive-purple-900: #120435; --primitive-purple-800: #1a0548; --primitive-purple-700: #200F4C; --primitive-purple-600: #2D0A65; --primitive-purple-500: #3d1282; --primitive-purple-400: #5a1db5; --primitive-purple-300: #7c44d4; --primitive-purple-200: #a87de8; --primitive-purple-100: #d4b8f5; /* Orange scale */ --primitive-orange-700: #994c00; --primitive-orange-600: #c45e00; --primitive-orange-500: #FF7F00; --primitive-orange-400: #FF9500; --primitive-orange-300: #FFB347; --primitive-orange-200: #FFD49E; --primitive-orange-100: #FFF0DB; /* Lilac scale */ --primitive-lilac-500: #b56dc4; --primitive-lilac-400: #CE87D9; --primitive-lilac-300: #E19ECB; --primitive-lilac-200: #F4B9F6; --primitive-lilac-100: #fce8fd; /* Semantic scale */ --primitive-green-500: #22C55E; --primitive-green-300: #86efac; --primitive-red-500: #EF4444; --primitive-red-300: #fca5a5; --primitive-yellow-500: #F59E0B; --primitive-yellow-300: #fcd34d; --primitive-blue-500: #3B82F6; --primitive-blue-300: #93c5fd; /* ─── SPACING — 8pt grid ─── */ --spacing-0: 0px; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-7: 28px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; --spacing-14: 56px; --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px; --spacing-32: 128px; /* ─── RADIUS — primitives ─── */ --radius-none: 0px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 11px; /* inputs */ --radius-lg: 14px; --radius-xl: 16px; --radius-2xl: 22px; /* glass cards */ --radius-3xl: 32px; --radius-pill: 100px; /* buttons, badges */ --radius-full: 9999px; /* ─── RADIUS — semantic (components use these) ─── */ --radius-control: var(--radius-md); /* inputs, selects — 11px */ --radius-button: var(--radius-pill); /* all buttons — 100px */ --radius-badge: var(--radius-pill); /* badges, chips — 100px */ --radius-card: var(--radius-2xl); /* glass cards — 22px */ --radius-modal: 20px; /* modals, dialogs */ --radius-toast: 12px; /* toasts */ --radius-tooltip: var(--radius-sm); /* tooltips — 8px */ --radius-nav: 10px; /* nav items */ --radius-skeleton: var(--radius-sm); /* skeleton loaders — 8px */ /* ─── TYPOGRAPHY — primitives ─── */ --font-brand: 'Outfit', sans-serif; --font-mono: 'Space Mono', monospace; --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --font-size-10: 10px; --font-size-11: 11px; --font-size-12: 12px; --font-size-13: 13px; --font-size-14: 14px; --font-size-15: 15px; --font-size-16: 16px; --font-size-18: 18px; --font-size-20: 20px; --font-size-22: 22px; --font-size-24: 24px; --font-size-28: 28px; --font-size-32: 32px; --font-size-36: 36px; --font-size-40: 40px; --font-size-48: 48px; --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --line-height-loose: 1.8; --letter-spacing-tight: -0.03em; --letter-spacing-snug: -0.01em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.04em; --letter-spacing-wider: 0.08em; --letter-spacing-widest: 0.15em; /* ─── TYPOGRAPHY — semantic scale ─── */ --type-display-size: var(--font-size-40); --type-display-weight: var(--font-weight-extrabold); --type-display-line-height: var(--line-height-tight); --type-display-letter-spacing:var(--letter-spacing-snug); --type-h1-size: var(--font-size-32); --type-h1-weight: var(--font-weight-bold); --type-h1-line-height: var(--line-height-tight); --type-h1-letter-spacing: var(--letter-spacing-snug); --type-h2-size: var(--font-size-24); --type-h2-weight: var(--font-weight-bold); --type-h2-line-height: var(--line-height-snug); --type-h2-letter-spacing: var(--letter-spacing-snug); --type-h3-size: var(--font-size-20); --type-h3-weight: var(--font-weight-semibold); --type-h3-line-height: var(--line-height-snug); --type-h3-letter-spacing: var(--letter-spacing-normal); --type-h4-size: var(--font-size-18); --type-h4-weight: var(--font-weight-semibold); --type-h4-line-height: var(--line-height-snug); --type-h4-letter-spacing: var(--letter-spacing-normal); --type-body-size: var(--font-size-15); --type-body-weight: var(--font-weight-regular); --type-body-line-height: var(--line-height-normal); --type-body-letter-spacing: var(--letter-spacing-normal); --type-body-md-size: var(--font-size-15); --type-body-md-weight: var(--font-weight-medium); --type-body-md-line-height: var(--line-height-normal); --type-body-sm-size: var(--font-size-13); --type-body-sm-weight: var(--font-weight-regular); --type-body-sm-line-height: var(--line-height-normal); --type-caption-size: var(--font-size-12); --type-caption-weight: var(--font-weight-regular); --type-caption-line-height: var(--line-height-normal); --type-caption-letter-spacing:var(--letter-spacing-wide); --type-label-size: var(--font-size-11); --type-label-weight: var(--font-weight-semibold); --type-label-line-height: var(--line-height-normal); --type-label-letter-spacing: var(--letter-spacing-widest); --type-mono-size: var(--font-size-13); --type-mono-weight: var(--font-weight-regular); --type-mono-line-height: var(--line-height-relaxed); --type-mono-family: var(--font-mono); /* ─── MOTION ─── */ --duration-instant: 0ms; --duration-fast: 100ms; --duration-base: 200ms; --duration-moderate: 300ms; --duration-slow: 450ms; --duration-slower: 700ms; --ease-linear: linear; --ease-in: ease-in; /* evitar em UI — só saída rara sem alternativa */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* ease-out forte — padrão para entrada/hover/press */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* ease-in-out forte — elemento se movendo na tela */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* curva de drawer estilo iOS */ --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── BLUR ─── */ --blur-sm: 8px; --blur-md: 16px; --blur-lg: 22px; --blur-xl: 40px; --blur-2xl: 88px; /* ─── Z-INDEX — primitives ─── */ --z-base: 0; --z-raised: 1; --z-overlay: 100; --z-drawer: 150; --z-modal: 200; --z-toast: 999; /* ─── Z-INDEX — semantic ─── */ --z-sticky: 10; /* --z-base, --z-raised, --z-overlay, --z-drawer, --z-modal, --z-toast already defined above */ /* ─── LAYOUT & GRID ─── */ --container-max: 1280px; --content-max: 800px; --sidebar-width: 260px; --sidebar-collapsed: 64px; --navbar-height: 64px; --navbar-height-mob: 56px; --grid-columns: 12; --grid-gutter: 24px; --grid-margin: 24px; --grid-margin-mob: 16px; /* ─── BREAKPOINTS ─── ATENÇÃO (corrigido em 31/08/2026): o rótulo anterior dizia "use in @media queries", e isso NÃO FUNCIONA. Custom property não é válida dentro de @media — `@media (max-width: var(--bp-md))` é ignorado silenciosamente pelo navegador, e a regra inteira nunca aplica. Estas variáveis servem só para uso em CSS comum (ex.: max-width de container) e como DOCUMENTAÇÃO da escala normativa. Nas media queries, escreva o número literal — e use um destes: 640px telefone → tablet pequeno 768px tablet 1024px desktop 1280px desktop largo A auditoria de 31/08/2026 encontrou nove valores ad-hoc em uso (1080, 1040, 900, 780, 620, 560, 540, 480, 640) — só 640 pertencia a alguma escala. Convergir para os quatro acima é o alvo; migrar arquivo por arquivo, conferindo no navegador, não com find/replace. */ --bp-xs: 375px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; } /* ================================================================ DARK MODE (default — brand identity) ================================================================ */ :root, [data-theme="dark"] { /* — Background & Surface — */ --color-bg: #120435; --color-surface-1: #1a0548; --color-surface-2: #200F4C; --color-surface-3: #2D0A65; --color-surface-4: #3d1282; --color-overlay: rgba(0, 0, 0, 0.72); --color-glass: rgba(255, 255, 255, 0.05); /* — Border — */ --color-border-subtle: rgba(255, 255, 255, 0.07); --color-border: rgba(255, 255, 255, 0.13); --color-border-strong: rgba(255, 255, 255, 0.20); /* — Text — */ --color-text-primary: #ffffff; --color-text-secondary: rgba(255, 255, 255, 0.68); --color-text-tertiary: rgba(255, 255, 255, 0.38); --color-text-disabled: rgba(255, 255, 255, 0.20); --color-text-inverse: #120435; --color-text-link: #FF9500; /* — Brand — */ --color-brand: #FF7F00; --color-brand-light: #FF9500; --color-brand-dark: #c45e00; --color-brand-glow: rgba(255, 127, 0, 0.26); --color-brand-ring: rgba(255, 127, 0, 0.14); --color-brand-secondary: #CE87D9; --color-brand-tertiary: #E19ECB; --color-brand-soft: #F4B9F6; /* — Fill aliases — */ --color-fill-subtle: rgba(255, 255, 255, 0.07); --color-fill-ghost: rgba(255, 255, 255, 0.09); --color-fill-moderate: rgba(255, 255, 255, 0.13); --color-fill-strong: rgba(255, 255, 255, 0.20); --color-fill-input-border: rgba(255, 255, 255, 0.14); --color-fill-input-focus: rgba(255, 255, 255, 0.11); --color-fill-input-hover-border: rgba(255, 255, 255, 0.22); --color-fill-brand-subtle: rgba(255, 127, 0, 0.09); --color-fill-brand-ghost: rgba(255, 127, 0, 0.14); --color-fill-brand-moderate: rgba(255, 127, 0, 0.18); --color-fill-brand-strong: rgba(255, 127, 0, 0.26); --color-fill-brand-emphasis: rgba(255, 127, 0, 0.32); --color-fill-accent-subtle: rgba(206, 135, 217, 0.16); --color-fill-accent-strong: rgba(206, 135, 217, 0.26); /* — Interactive states — */ --color-focus-ring: #FF7F00; --color-hover-overlay: rgba(255, 255, 255, 0.07); --color-interactive-default-bg: rgba(255, 255, 255, 0.09); --color-interactive-default-border: rgba(255, 255, 255, 0.13); --color-interactive-default-text: rgba(255, 255, 255, 0.68); --color-interactive-hover-bg: rgba(255, 255, 255, 0.13); --color-interactive-hover-border: rgba(255, 255, 255, 0.20); --color-interactive-hover-text: #ffffff; --color-interactive-hover-overlay: rgba(255, 255, 255, 0.07); --color-interactive-focus-bg: rgba(255, 255, 255, 0.09); --color-interactive-focus-border: #FF7F00; --color-interactive-focus-ring: rgba(255, 127, 0, 0.14); --color-interactive-active-bg: rgba(255, 127, 0, 0.14); --color-interactive-active-border: #FF7F00; --color-interactive-active-text: #FF7F00; --color-interactive-disabled-bg: rgba(255, 255, 255, 0.05); --color-interactive-disabled-border:rgba(255, 255, 255, 0.07); --color-interactive-disabled-text: rgba(255, 255, 255, 0.20); --color-interactive-disabled-opacity: 0.38; /* — State: Success — */ --color-success-bg: rgba(34, 197, 94, 0.14); --color-success-border: rgba(34, 197, 94, 0.32); --color-success-text: #86efac; --color-success-icon: #22C55E; /* — State: Error — */ --color-error-bg: rgba(239, 68, 68, 0.14); --color-error-border: rgba(239, 68, 68, 0.32); --color-error-text: #fca5a5; --color-error-icon: #EF4444; /* — State: Warning — */ --color-warning-bg: rgba(245, 158, 11, 0.14); --color-warning-border: rgba(245, 158, 11, 0.32); --color-warning-text: #fcd34d; --color-warning-icon: #F59E0B; /* — State: Info — [DESVIO 2] azul, não laranja — No DS original `info` era laranja, indistinguível da marca: a mesma cor não pode significar "clique aqui" e "informação neutra" ao mesmo tempo. Passa a azul, seguindo o mesmo padrão bg/border/text/icon de success, error e warning, com os primitivos blue que já existiam no DS e que ninguém consumia. */ --color-info-bg: rgba(59, 130, 246, 0.14); --color-info-border: rgba(59, 130, 246, 0.32); --color-info-text: #93c5fd; --color-info-icon: #3B82F6; /* — Skeleton — */ --color-skeleton-base: #200F4C; --color-skeleton-shimmer: #3d1282; /* — Elevation — */ --elevation-ambient-color: rgba(0, 0, 0, 0.60); --elevation-ambient-opacity: 0.60; --elevation-dir-color: rgba(0, 0, 0, 0.40); --elevation-dir-opacity: 0.40; --elevation-overlay-blur: var(--blur-md); --elevation-glass-blur: var(--blur-lg); --elevation-glass-opacity: 0.05; --elevation-1: 0 1px 2px rgba(0,0,0,0.40), 0 1px 6px rgba(0,0,0,0.24); --elevation-2: 0 4px 8px rgba(0,0,0,0.40), 0 2px 20px rgba(0,0,0,0.28); --elevation-3: 0 8px 24px rgba(0,0,0,0.48), 0 4px 40px rgba(0,0,0,0.32); --elevation-4: 0 16px 48px rgba(0,0,0,0.56), 0 8px 64px rgba(0,0,0,0.36); --elevation-brand-sm: 0 4px 16px rgba(255,127,0,0.26); --elevation-brand-md: 0 8px 32px rgba(255,127,0,0.26); --elevation-brand-lg: 0 12px 48px rgba(255,127,0,0.26); } /* ================================================================ LIGHT MODE ================================================================ */ [data-theme="light"] { /* — Background & Surface — */ --color-bg: #f7f4ff; --color-surface-1: #ffffff; --color-surface-2: #f0ebff; --color-surface-3: #e4dbff; --color-surface-4: #d4c8ff; --color-overlay: rgba(18, 4, 53, 0.6); --color-glass: rgba(255, 255, 255, 0.75); /* — Border — */ --color-border-subtle: rgba(45, 10, 101, 0.10); --color-border: rgba(45, 10, 101, 0.18); --color-border-strong: rgba(45, 10, 101, 0.30); /* — Text — */ --color-text-primary: #200F4C; --color-text-secondary: #2D0A65; --color-text-tertiary: rgba(45, 10, 101, 0.45); --color-text-disabled: rgba(45, 10, 101, 0.25); --color-text-inverse: #ffffff; --color-text-link: #c45e00; /* — Brand — */ --color-brand: #FF7F00; --color-brand-light: #FF9500; --color-brand-dark: #c45e00; --color-brand-glow: rgba(255, 127, 0, 0.22); --color-brand-ring: rgba(255, 127, 0, 0.20); --color-brand-secondary: #b56dc4; --color-brand-tertiary: #CE87D9; --color-brand-soft: #F4B9F6; /* — Fill aliases — */ --color-fill-subtle: rgba(45, 10, 101, 0.04); --color-fill-ghost: rgba(45, 10, 101, 0.06); --color-fill-moderate: rgba(45, 10, 101, 0.10); --color-fill-strong: rgba(45, 10, 101, 0.16); --color-fill-input-border: rgba(45, 10, 101, 0.18); --color-fill-input-focus: rgba(255, 255, 255, 1.0); --color-fill-input-hover-border: rgba(45, 10, 101, 0.28); --color-fill-brand-subtle: rgba(255, 127, 0, 0.06); --color-fill-brand-ghost: rgba(255, 127, 0, 0.10); --color-fill-brand-moderate: rgba(255, 127, 0, 0.14); --color-fill-brand-strong: rgba(255, 127, 0, 0.20); --color-fill-brand-emphasis: rgba(255, 127, 0, 0.26); --color-fill-accent-subtle: rgba(181, 109, 196, 0.10); --color-fill-accent-strong: rgba(181, 109, 196, 0.18); /* — Interactive states — */ --color-focus-ring: #FF7F00; --color-hover-overlay: rgba(45, 10, 101, 0.06); --color-interactive-default-bg: rgba(45, 10, 101, 0.06); --color-interactive-default-border: rgba(45, 10, 101, 0.18); --color-interactive-default-text: #2D0A65; --color-interactive-hover-bg: rgba(45, 10, 101, 0.10); --color-interactive-hover-border: rgba(45, 10, 101, 0.30); --color-interactive-hover-text: #200F4C; --color-interactive-hover-overlay: rgba(45, 10, 101, 0.04); --color-interactive-focus-bg: rgba(255, 255, 255, 1.0); --color-interactive-focus-border: #FF7F00; --color-interactive-focus-ring: rgba(255, 127, 0, 0.20); --color-interactive-active-bg: rgba(255, 127, 0, 0.10); --color-interactive-active-border: #FF7F00; --color-interactive-active-text: #c45e00; --color-interactive-disabled-bg: rgba(45, 10, 101, 0.04); --color-interactive-disabled-border:rgba(45, 10, 101, 0.10); --color-interactive-disabled-text: rgba(45, 10, 101, 0.25); --color-interactive-disabled-opacity: 0.38; /* — State: Success — */ --color-success-bg: #dcfce7; --color-success-border: #22C55E; --color-success-text: #15803d; --color-success-icon: #16a34a; /* — State: Error — */ --color-error-bg: #fee2e2; --color-error-border: #EF4444; --color-error-text: #b91c1c; --color-error-icon: #dc2626; /* — State: Warning — */ --color-warning-bg: #fef3c7; --color-warning-border: #F59E0B; --color-warning-text: #d97706; --color-warning-icon: #F59E0B; /* — State: Info — [DESVIO 2] azul, não laranja (mesmo motivo do dark) */ --color-info-bg: #dbeafe; --color-info-border: #3B82F6; --color-info-text: #1d4ed8; --color-info-icon: #3B82F6; /* — Skeleton — */ --color-skeleton-base: #d4b8f5; --color-skeleton-shimmer: #a87de8; /* — Elevation (warm purple shadows) — */ --elevation-ambient-color: rgba(45, 10, 101, 0.12); --elevation-ambient-opacity: 0.12; --elevation-dir-color: rgba(45, 10, 101, 0.08); --elevation-dir-opacity: 0.08; --elevation-overlay-blur: var(--blur-md); --elevation-glass-blur: var(--blur-lg); --elevation-glass-opacity: 0.75; --elevation-1: 0 1px 3px rgba(45,10,101,0.12), 0 1px 6px rgba(45,10,101,0.06); --elevation-2: 0 4px 12px rgba(45,10,101,0.12), 0 2px 24px rgba(45,10,101,0.08); --elevation-3: 0 8px 24px rgba(45,10,101,0.16), 0 4px 40px rgba(45,10,101,0.10); --elevation-4: 0 16px 48px rgba(45,10,101,0.20), 0 8px 64px rgba(45,10,101,0.12); --elevation-brand-sm: 0 4px 16px rgba(255,127,0,0.22); --elevation-brand-md: 0 8px 32px rgba(255,127,0,0.22); --elevation-brand-lg: 0 12px 48px rgba(255,127,0,0.22); } /* ================================================================ COMPONENT TOKENS ================================================================ */ :root { /* ── Button ── */ --btn-primary-bg: var(--color-brand); /* [DESVIO 4] texto do primário = roxo 700 sobre laranja sólido. O DS usava --color-text-inverse sobre um gradiente #FF7F00→#c45e00. Medido: roxo 700 sobre #FF7F00 dá 6.7:1 (passa AA), mas sobre o #c45e00 do fim do gradiente cai para 4.0:1 — reprova AA para texto normal (o botão é 15px/600, exige 4.5:1). O gradiente saiu; quem dá volume ao botão é --elevation-brand-*, não ele. --btn-primary-bg-end fica declarado por paridade com o DS, mas nenhum componente o usa. 26/09/2026 (decisão do Thiago): vale para TODO texto sobre laranja — botões, abas ativas, etapa atual, link de pular conteúdo, avatar e o botão do WhatsApp. Branco sobre #FF7F00 dava 2,5:1 e reprovava AA. */ --btn-primary-text: var(--primitive-purple-700); --btn-primary-bg-end: var(--color-brand-dark); --btn-primary-shadow: var(--color-brand-glow); --btn-ghost-bg: var(--color-interactive-default-bg); --btn-ghost-border: var(--color-interactive-default-border); --btn-ghost-text: var(--color-interactive-default-text); --btn-ghost-hover-bg: var(--color-interactive-hover-bg); --btn-ghost-hover-text: var(--color-interactive-hover-text); --btn-danger-bg: var(--color-error-bg); --btn-danger-border: var(--color-error-border); --btn-danger-text: var(--color-error-text); --btn-radius: var(--radius-button); --btn-disabled-opacity: 0.38; --btn-loading-spinner-size: 17px; --btn-height-sm: 32px; --btn-height-md: 44px; --btn-height-lg: 52px; --btn-padding-x-sm: 16px; --btn-padding-x-md: 22px; --btn-padding-x-lg: 28px; /* ── Input ── */ --input-bg: var(--color-fill-ghost); --input-border: var(--color-fill-input-border); --input-height: 48px; /* [DESVIO 3] 16px, não 15px. Abaixo de 16px o Safari no iOS dá zoom ao focar o campo e não desfaz — o layout fica torto pelo resto da sessão. Vale só para campo de texto de formulário; os controles compactos da barra de filtros continuam em --filter-font-size (13px), porque e busca compacta não disparam. */ --filter-gap: var(--spacing-2); --filter-font-size: var(--font-size-13); --filter-height: 36px; --filter-radius: var(--radius-pill); --filter-bg: var(--color-fill-subtle); --filter-border: var(--color-border); --chip-bg: var(--color-fill-brand-ghost); --chip-border: var(--color-fill-brand-moderate); --chip-text: var(--color-brand); } /* ═══════════════════════════════════════════════════════════════ BASE DE ACESSIBILIDADE E ÍCONES Por que aqui e não num arquivo próprio: `tokens.css` é o ÚNICO CSS carregado pelas 10 páginas dos quatro sites (as demais folhas variam por página). Uma regra global que dependesse de lembrar de linkar um arquivo novo em cada HTML seria esquecida — e regra de acessibilidade esquecida em metade das telas não é acessibilidade. Auditoria de 31/08/2026: nenhuma página tinha
ou skip link, havia UMA regra de :focus em quatro arquivos de marketing, e as animações infinitas de design-marketing.css (ticker, pulse, orbs) rodavam sem nenhum respeito a prefers-reduced-motion. ═══════════════════════════════════════════════════════════════ */ /* ── Foco visível ── :focus-visible (e não :focus) para o anel aparecer na navegação por teclado sem poluir o clique de mouse. Sem isso, quem navega por Tab simplesmente não sabe onde está. */ :focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; border-radius: 4px; } /* ── Skip link ── Primeiro elemento focável da página; some até receber foco. Sem ele, teclado e leitor de tela atravessam o menu inteiro em toda navegação. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 12px 20px; background: var(--color-brand); color: var(--btn-primary-text); /* branco sobre laranja: 2,5:1 — reprovava AA */ font-weight: 700; border-radius: 0 0 8px 0; text-decoration: none; } .skip-link:focus { left: 0; } /* ── Movimento reduzido ── 0.01ms em vez de `none`: zerar de verdade impede o disparo de transitionend/animationend, e há código que espera esses eventos para seguir o fluxo. O objetivo é remover o movimento, não quebrar a lógica. scroll-behavior volta a auto porque o smooth scroll é justamente um dos gatilhos de desconforto. */ @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; } } /* ── Ícones ── Classe base do sprite. Prefixo mv- porque .ico JA EXISTE em site-cliente/index.html como container de 56px (24 elementos) — colisao real encontrada ao testar no navegador, nao em revisao de codigo. Sprite (shared/icons.svg, inlinado por tools/inline-icons.js). `currentColor` faz o ícone herdar a cor do texto ao lado — é o que mantém um conjunto só, coerente, em vez do emoji que muda de forma por SO. */ .mv-ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; fill: none; stroke: currentColor; } .mv-ico-sm { width: 1em; height: 1em; } .mv-ico-lg { width: 1.75em; height: 1.75em; } .mv-ico-xl { width: 2.5em; height: 2.5em; } /* ── Cor de ícone por PAPEL ── Adicionado em 31/08/2026. Duas regras, e as duas vêm de contraste medido, não de gosto: 1. Onde a cor É a mensagem, ela não é decorativa. ✅ verde, ❌ vermelho, ⚠ âmbar. Pintar um erro de laranja de marca apagaria a informação — por isso status usa os tokens --color-*-icon, que já existem e já trocam sozinhos entre tema claro e escuro. 2. Onde a cor é realce, ela depende do FUNDO: fundo roxo escuro (#120435) → laranja #FF7F00 ≈ 7:1 ✓ fundo branco → laranja #FF7F00 ≈ 2,9:1 ✗ para traço de 2px → roxo #2D0A65 ≈ 14:1 ✓ Daí existirem --accent (superfície escura) e --marca (superfície clara) em vez de uma cor de realce só. Seletor duplicado (.mv-ico.mv-ico--x) de propósito: sem isso, uma regra de container como .ben-icon svg (0-1-1) vence a classe (0-1-0) e a cor de STATUS some — bug real, visto na tela. Escolher pelo fundo é o que mantém o ícone legível nos dois registros. */ .mv-ico.mv-ico--ok { color: var(--color-success-icon); } .mv-ico.mv-ico--erro { color: var(--color-error-icon); } .mv-ico.mv-ico--aviso { color: var(--color-warning-icon); } .mv-ico.mv-ico--info { color: var(--color-info-icon); } .mv-ico.mv-ico--accent { color: var(--color-brand); } .mv-ico.mv-ico--marca { color: var(--primitive-purple-600); } .mv-ico.mv-ico--suave { color: var(--color-text-tertiary); } /* ── Mapa de cobertura ── Gerado por tools/mapa-cobertura.js a partir de docs/img/br.svg (contornos reais, Simplemaps) + tabela-descontos.csv. Regere quando a tabela mudar. Duas paletas explícitas em vez de herdar tema: o .com.br é claro mas NÃO usa data-theme (tem paleta própria no arquivo), então depender de [data-theme] deixaria o mapa errado justamente na landing do cliente. Quem coloca o mapa escolhe a variante pelo fundo em que ele vai cair. */ .mapa-cobertura { width: 100%; height: auto; max-width: 460px; display: block; /* fundo escuro (padrão) */ --mc-off-bg: rgba(255, 255, 255, .07); --mc-off-borda: rgba(255, 255, 255, .16); --mc-on-bg: var(--color-brand); --mc-on-borda: var(--primitive-orange-200); } /* fundo claro: laranja preenchido em área grande fica estridente e o contorno some no branco. Roxo da marca resolve os dois. BUG CORRIGIDO (02/09/2026): os valores originais (#EFEBF5 de preenchimento, #FFFFFF de traço) foram escolhidos supondo fundo branco puro. A seção real onde o mapa fica (.sec-cinza) usa --cinza:#F7F5FA — quase idêntico a #EFEBF5 (contraste 1,09:1) — e o traço branco sobre esse quase-branco dava 1,08:1. Os 11 estados não atendidos ficavam efetivamente invisíveis: só os roxos apareciam, sem silhueta de Brasil por trás. Substituído por rgba(45,10,101, X) — o mesmo roxo de marca usado em --color-border-strong e --color-text-tertiary do tema claro, só que calibrado para ESTE fundo específico (medido, não por analogia): 0,35 no preenchimento (2,18:1) e 0,55 no traço (3,80:1) — traço mais forte que preenchimento, mesma lógica já usada na variante escura do mapa (off-borda > off-bg). */ .mapa-cobertura--claro { --mc-off-bg: rgba(45, 10, 101, 0.35); --mc-off-borda: rgba(45, 10, 101, 0.55); --mc-on-bg: var(--primitive-purple-600); --mc-on-borda: #FFFFFF; } .mc-uf { fill: var(--mc-off-bg); stroke: var(--mc-off-borda); stroke-width: 1.4; /* traço em unidades de tela, não da viewBox: sem isto a borda encolhe junto com o mapa e some no mobile. */ vector-effect: non-scaling-stroke; stroke-linejoin: round; } .mc-uf--ativa { fill: var(--mc-on-bg); stroke: var(--mc-on-borda); } /* ── Bloco do mapa na landing ── */ .mapa-bloco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .mapa-intro { margin: 0 0 18px; } /* Lista de estados: o mapa real não comporta rótulo em UF pequena (SE, AL, DF), então o nome vive aqui. Decisão de 01/09/2026: SEM percentual — a tabela de desconto muda com frequência (planilha, não código), e número desatualizado na landing é pior que não ter. O cliente vê que o estado é atendido; o valor real vem do simulador e da conversa com a equipe, não de uma comparação de preço antes de falar com alguém. Duas colunas porque a lista é só sigla+nome agora — cabe mais gente por linha. */ .uf-lista { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; font-size: .92em; } .uf-lista li { display: flex; align-items: baseline; gap: 7px; padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); } .uf-sigla { font-weight: 800; font-size: .78em; letter-spacing: .04em; min-width: 2.1em; opacity: .55; } .uf-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 520px) { .uf-lista { grid-template-columns: 1fr; } } /* Empilha antes de o mapa ficar pequeno demais para os rótulos serem legíveis — o limite é a legibilidade da sigla, não a largura da tela. */ @media (max-width: 768px) { .mapa-bloco { grid-template-columns: 1fr; } .mapa-cobertura { margin-inline: auto; } }