/** * 🎨 DESIGN TOKENS - RotaTruck v5.0 * VariΓ‘veis CSS para consistΓͺncia visual * Baseado na imagem oficial.png */ :root { /* ==================== CORES ==================== */ /* PrimΓ‘rias */ --color-primary: #FF6B35; /* Laranja principal */ --color-primary-hover: #FF814F; /* Hover */ --color-primary-active: #E85A2A; /* Active/pressed */ --color-primary-light: rgba(255, 107, 53, 0.1); /* SecundΓ‘rias */ --color-secondary: #004E89; /* Azul marinho */ --color-secondary-light: #0066B3; /* Background */ --color-bg: #0f1216; /* Background principal */ --color-bg-dark: #0a0c0f; /* Background mais escuro */ --color-bg-light: #1a1f25; /* Background claro */ /* Surfaces (glassmorphism) */ --color-surface: rgba(255, 255, 255, 0.06); --color-surface-hover: rgba(255, 255, 255, 0.08); --color-surface-dark: rgba(0, 0, 0, 0.25); --color-surface-card: rgba(26, 31, 37, 0.8); /* Textos */ --color-text: #EDEDED; /* Texto principal */ --color-text-muted: #9aa3ad; /* Texto secundΓ‘rio */ --color-text-disabled: #5a6169; /* Texto desabilitado */ /* Sidebar */ --color-sidebar-bg: rgba(0, 0, 0, 0.4); --color-sidebar-item: #7a8189; --color-sidebar-active: var(--color-primary); /* Borders */ --color-border: rgba(255, 255, 255, 0.06); --color-border-focus: var(--color-primary); /* Estados */ --color-success: #10b981; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #3b82f6; /* ==================== TIPOGRAFIA ==================== */ /* FamΓ­lia */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace; /* Tamanhos */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ /* Pesos */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ==================== ESPAΓ‡AMENTOS ==================== */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ /* ==================== BORDER RADIUS ==================== */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px; /* ==================== SOMBRAS ==================== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.35); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3); /* Sombras internas */ --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Glow effects */ --shadow-glow-primary: 0 0 20px rgba(255, 107, 53, 0.3); --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.3); /* ==================== BACKDROP BLUR ==================== */ --blur-sm: blur(4px); --blur-md: blur(8px); --blur-lg: blur(12px); --blur-xl: blur(16px); /* ==================== TRANSIÇÕES ==================== */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-slower: 500ms ease; /* Easings */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ==================== Z-INDEX ==================== */ /* ═══════════════════════════════════════════════════════════════════ ESCALA DE EMPILHAMENTO β€” auditoria UI-08 (v11.2.200) ═══════════════════════════════════════════════════════════════════ ANTES: 111 declaracoes de z-index com 45 valores magicos diferentes, teto 999999 !important EMPATADO entre seletores β€” quem ficava por cima dependia da ordem em que o navegador carregava os arquivos CSS. Uma escala de tokens ja existia aqui (1..700) e SO 3 das 111 declaracoes a usavam; as outras inventavam numero. AGORA: 15 camadas nomeadas, ordem CRESCENTE = mais na frente. Dentro de uma camada, use `calc(var(--z-camada) + N)` para o desempate β€” o N e pequeno e local, e da para ler o que ele significa. A migracao foi PROVADA: 990 pares de valores comparados, 0 inversoes e 0 empates novos. Nenhum elemento trocou de posicao (repro: tests/repro/ui08-escala-preserva-ordem.mjs). REGRA: nao inventar numero novo. Se nao couber, a camada e que precisa de revisao β€” e ai o repro acima acusa. */ --z-mapa: 0; /* 0..3 o mapa e o que vive DENTRO dele (POI, icone do caminhao) */ --z-popup: 10; /* 10 popup do Leaflet */ --z-controle: 100; /* 100..102 botoes pequenos sobre cards */ --z-flutuante: 200; /* 200 botao de localizacao */ --z-painel: 300; /* 300..302 dropdown / overlay / modal de card */ --z-filtro: 400; /* 400 barra de filtros de POI */ --z-nav-base: 500; /* 500..502 chrome da tela: hamburger, loading de rotas */ --z-nav-ui: 600; /* 600..610 UI de navegacao: compass, painel, alertas, via proibida */ --z-toast-poi: 700; /* 700 toast de POI / alerta na tela */ --z-hud: 800; /* 800 velocimetro e botao SOS β€” precisam ficar acima da navegacao */ --z-lateral: 900; /* 900..902 menu lateral e overlay dele */ --z-tela-cheia: 1000; /* 1000..1004 resultados de rota, busca, waypoints */ --z-modal: 1100; /* 1100..1103 modais que bloqueiam (SOS, historico, confirmacao) + toast global */ --z-sistema: 1200; /* 1200..1202 splash, brilho, indicador de status, tracking */ --z-critico: 1300; /* 1300 o que NAO pode ser coberto por nada (autocomplete, offline) */ /* Aliases historicos β€” SO os que ainda tem uso real (app-shell.css), com o valor ORIGINAL preservado dentro da escala nova: --z-base 1 -> mapa+1 --z-sidebar 100 -> controle --z-header 200 -> flutuante A ordem entre os tres e a mesma de antes (1 < 100 < 200). ⚠️ Os aliases --z-dropdown / --z-overlay / --z-modal / --z-toast / --z-tooltip foram REMOVIDOS: tinham ZERO uso, e o de nome `--z-modal` era pior que inutil β€” redeclarava a camada `--z-modal` logo acima com um valor MENOR. Como a segunda declaracao vence, os 20 usos reais de var(--z-modal) (SOS, historico, confirmacao, toast global) resolveriam para ~302 em vez de 1100, ou seja, o modal de EMERGENCIA ficaria ABAIXO da UI de navegacao. Colisao de nome nao aparece na prova de ordem dos numeros β€” so aparece resolvendo a variavel. Por isso o repro tests/repro/ui08-escala-preserva-ordem.mjs resolve as variaveis de verdade. */ --z-base: calc(var(--z-mapa) + 1); --z-sidebar: var(--z-controle); --z-header: var(--z-flutuante); /* ==================== DIMENSΓ•ES ==================== */ /* Sidebar */ --sidebar-width: 64px; --sidebar-width-expanded: 240px; /* Header */ --header-height: 64px; /* Inputs */ --input-height: 44px; --input-height-sm: 36px; --input-height-lg: 52px; /* Buttons */ --button-height: 44px; --button-height-sm: 36px; --button-height-lg: 52px; /* ==================== SAFE AREAS (iOS) ==================== */ --safe-area-top: env(safe-area-inset-top); --safe-area-bottom: env(safe-area-inset-bottom); --safe-area-left: env(safe-area-inset-left); --safe-area-right: env(safe-area-inset-right); } /* ==================== DARK MODE (padrΓ£o) ==================== */ /* JΓ‘ estΓ‘ em dark mode por padrΓ£o */ /* ==================== CLASSES UTILITÁRIAS ==================== */ /* Glassmorphism */ .glass { background: var(--color-surface); backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg); } .glass-dark { background: var(--color-surface-dark); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); } /* Truncate text */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }