/* =========================================================================== Central de Mapas Valory - Design Tokens --------------------------------------------------------------------------- Fonte unica de verdade para cor, forma, ritmo e movimento das 12 telas. Modo: Redesign - Preserve. A marca (grafite + laranja queimado + Merriweather / Open Sans) e material de partida, nao entrada opcional. DIAIS (taste-skill secao 1) DESIGN_VARIANCE 5 (existente ~4, preservado) MOTION_INTENSITY 3 (existente ~2, +1 conforme preset "redesign - preserve") VISUAL_DENSITY 4 no hub e no login / 7 nas telas de mapa (cockpit real) REGRA DE FORMA (Shape Consistency Lock, secao 4.4) Escala documentada de 4 passos. Nenhum outro raio e permitido. --r-pill elementos interativos de filtro: chips, badges, botoes de ano --r-control inputs, botoes de controle, elementos de barra --r-card cards, paineis, popups, superficies elevadas --r-sm elementos inline apertados dentro de um card REGRA DE COR (Color Consistency Lock, secao 4.2) UM acento: laranja queimado da marca. Estados semanticos (ok / atencao / erro) sao a unica excecao permitida e nunca sao usados como decoracao. Azuis orfaos de hover foram removidos. TEMA (secao 4.11 + secao 8) Segue prefers-color-scheme por padrao. [data-theme] no sobrepoe nos dois sentidos. Uma tela inteira e clara ou escura, nunca metade de cada. =========================================================================== */ :root { /* --- Marca: grafite ---------------------------------------------------- */ --graphite-900: #2b2e33; --graphite-800: #33363a; --graphite-700: #3d4045; --graphite-600: #4a4d52; /* --- Marca: acento unico (laranja queimado) ---------------------------- */ --accent: #f2853c; --accent-strong: #dd6f26; --accent-soft: #fdf0e5; --accent-line: #f6b98a; --accent-on: #ffffff; /* Laranja da marca so passa AA como preenchimento. Para TEXTO sobre superficie clara usa-se a variante escura (4.7:1 sobre branco). */ --accent-text: #a25709; /* --- Superficies ------------------------------------------------------- */ --bg: #eef0f4; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #eceef2; --surface-inv: linear-gradient(135deg, var(--graphite-700) 0%, var(--graphite-600) 100%); /* --- Texto ------------------------------------------------------------- */ --text: #2b2e33; --text-muted: #62666d; --text-faint: #6e737a; --text-on-inv: rgba(255,255,255,.94); --text-on-inv-muted: rgba(255,255,255,.74); /* --- Traco ------------------------------------------------------------- */ --border: #e0e3e8; --border-strong: #cbcfd6; --border-faint: #eef0f3; /* --- Estados semanticos (nunca decorativos) ---------------------------- */ --ok: #0a7a4e; --ok-soft: #e2f4ec; --warn: #8a5e0d; --warn-soft: #fbf1dc; --danger: #b3352c; --danger-soft: #fbeae8; /* --- Categorias de uso do imovel (dado, nao decoracao) ----------------- */ --cat-res-fg: #1a4f8a; --cat-res-bg: #e6eff8; --cat-com-fg: #8a5a12; --cat-com-bg: #fbf1de; --cat-ind-fg: #33417a; --cat-ind-bg: #e9ebf6; --cat-ter-fg: #6a3382; --cat-ter-bg: #f3e9f7; --cat-mis-fg: #2c6b3d; --cat-mis-bg: #e7f3ea; --cat-ser-fg: #8a2551; --cat-ser-bg: #fbe9f0; --cat-def-fg: #5c6067; --cat-def-bg: #eef0f3; --cat-sob-fg: #a34a1c; --cat-sob-bg: #fbeee4; --cat-rur-fg: #566b1f; --cat-rur-bg: #f0f4e0; --cat-cha-fg: #1c6b6b; --cat-cha-bg: #e2f2f2; --cat-cob-fg: #4a3390; --cat-cob-bg: #ece8f8; /* --- Forma: escala de 4 passos, regra documentada acima ---------------- */ --r-pill: 999px; --r-card: 14px; --r-control: 8px; --r-sm: 6px; /* --- Elevacao: sombra tingida no matiz do fundo, nunca preto puro ------ */ --shadow-1: 0 1px 2px rgba(43,46,51,.05), 0 2px 6px rgba(43,46,51,.05); --shadow-2: 0 4px 10px rgba(43,46,51,.07), 0 12px 28px rgba(43,46,51,.11); --shadow-3: 0 8px 20px rgba(43,46,51,.10), 0 24px 48px rgba(43,46,51,.16); --shadow-inv: 0 2px 8px rgba(20,22,25,.20); /* --- Tipografia -------------------------------------------------------- */ --font-display: "Merriweather", Georgia, "Times New Roman", serif; --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --fs-display: clamp(1.5rem, 1.15rem + 1.5vw, 2rem); --fs-h2: 1.1875rem; --fs-h3: 1rem; --fs-body: 0.875rem; --fs-sm: 0.8125rem; --fs-xs: 0.75rem; --fs-micro: 0.6875rem; --lh-tight: 1.22; --lh-body: 1.6; --tracking-label: .09em; /* --- Ritmo vertical ---------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 44px; --sp-8: 64px; /* --- Movimento (MOTION_INTENSITY 3) ------------------------------------ */ --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms; --ease: cubic-bezier(.2, .6, .2, 1); --lift: translateY(-2px); --press: translateY(1px); /* --- Camadas (secao 6.F: escala declarada, sem z-index avulso) --------- */ --z-map: 1; --z-panel: 10; --z-topbar: 100; --z-dropdown: 400; --z-overlay: 800; --z-gate: 2147483647; color-scheme: light; } /* =========================================================================== MODO ESCURO Paridade de hierarquia: o que salta no claro salta no escuro. O acento da marca sobe levemente em luminancia para manter contraste AA sobre grafite, sem desbotar a identidade. Sem preto puro, sem branco puro. =========================================================================== */ :root[data-theme="dark"] { --accent: #f79350; --accent-strong: #ffa869; --accent-soft: #3a2618; --accent-line: #7a4d28; --accent-on: #21160d; --accent-text: #f79350; --bg: #15171a; --surface: #1c1f23; --surface-2: #23272c; --surface-3: #2b2f35; --surface-inv: linear-gradient(135deg, #23272c 0%, #2b2f35 100%); --text: #e7e9ec; --text-muted: #9ba1a9; --text-faint: #8b9099; --text-on-inv: rgba(255,255,255,.94); --text-on-inv-muted: rgba(255,255,255,.74); --border: #333840; --border-strong: #454b55; --border-faint: #262a30; --ok: #3fbd85; --ok-soft: #12301f; --warn: #d6a441; --warn-soft: #33270f; --danger: #e8776b; --danger-soft: #3a1c19; --cat-res-fg: #8cb8e8; --cat-res-bg: #1a2836; --cat-com-fg: #e0b169; --cat-com-bg: #322715; --cat-ind-fg: #9aa4d8; --cat-ind-bg: #1f2338; --cat-ter-fg: #c79ad8; --cat-ter-bg: #2d1f34; --cat-mis-fg: #86c795; --cat-mis-bg: #172b1c; --cat-ser-fg: #dd93b0; --cat-ser-bg: #331924; --cat-def-fg: #a2a8b0; --cat-def-bg: #272b31; --cat-sob-fg: #e0a077; --cat-sob-bg: #33231a; --cat-rur-fg: #b3c47a; --cat-rur-bg: #262c17; --cat-cha-fg: #79c4c4; --cat-cha-bg: #142c2c; --cat-cob-fg: #a99ae0; --cat-cob-bg: #241f38; --shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.26); --shadow-2: 0 4px 10px rgba(0,0,0,.34), 0 12px 28px rgba(0,0,0,.40); --shadow-3: 0 8px 20px rgba(0,0,0,.40), 0 24px 48px rgba(0,0,0,.50); --shadow-inv: 0 2px 8px rgba(0,0,0,.44); color-scheme: dark; } /* Preferencia do sistema, quando o usuario nao escolheu manualmente */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #f79350; --accent-strong: #ffa869; --accent-soft: #3a2618; --accent-line: #7a4d28; --accent-on: #21160d; --accent-text: #f79350; --bg: #15171a; --surface: #1c1f23; --surface-2: #23272c; --surface-3: #2b2f35; --surface-inv: linear-gradient(135deg, #23272c 0%, #2b2f35 100%); --text: #e7e9ec; --text-muted: #9ba1a9; --text-faint: #8b9099; --text-on-inv-muted: rgba(255,255,255,.74); --border: #333840; --border-strong: #454b55; --border-faint: #262a30; --ok: #3fbd85; --ok-soft: #12301f; --warn: #d6a441; --warn-soft: #33270f; --danger: #e8776b; --danger-soft: #3a1c19; --cat-res-fg: #8cb8e8; --cat-res-bg: #1a2836; --cat-com-fg: #e0b169; --cat-com-bg: #322715; --cat-ind-fg: #9aa4d8; --cat-ind-bg: #1f2338; --cat-ter-fg: #c79ad8; --cat-ter-bg: #2d1f34; --cat-mis-fg: #86c795; --cat-mis-bg: #172b1c; --cat-ser-fg: #dd93b0; --cat-ser-bg: #331924; --cat-def-fg: #a2a8b0; --cat-def-bg: #272b31; --cat-sob-fg: #e0a077; --cat-sob-bg: #33231a; --cat-rur-fg: #b3c47a; --cat-rur-bg: #262c17; --cat-cha-fg: #79c4c4; --cat-cha-bg: #142c2c; --cat-cob-fg: #a99ae0; --cat-cob-bg: #241f38; --shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.26); --shadow-2: 0 4px 10px rgba(0,0,0,.34), 0 12px 28px rgba(0,0,0,.40); --shadow-3: 0 8px 20px rgba(0,0,0,.40), 0 24px 48px rgba(0,0,0,.50); --shadow-inv: 0 2px 8px rgba(0,0,0,.44); color-scheme: dark; } } /* =========================================================================== PRIMITIVAS COMPARTILHADAS =========================================================================== */ /* Foco visivel unico, em todas as telas. Nunca remover outline sem substituto. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* Rotulo de secao: caixa alta com tracking, nunca usado como decoracao solta */ .v-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-faint); font-weight: 700; } /* Numero: tabular sempre, para nao dancar durante atualizacao */ .v-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Esqueleto de carregamento com a forma do conteudo final (secao 4.5). Substitui o spinner circular generico. */ .v-skel { display: inline-block; border-radius: var(--r-sm); color: transparent !important; background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: v-skel 1.4s var(--ease) infinite; } @keyframes v-skel { from { background-position: 200% 0 } to { background-position: -200% 0 } } /* Alternador de tema */ .v-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: var(--text-on-inv); cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); } .v-theme-toggle:hover { background: rgba(255,255,255,.18); } .v-theme-toggle:active { transform: var(--press); } .v-theme-toggle svg { width: 15px; height: 15px; display: block; } .v-theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .v-theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .v-theme-toggle .i-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v-theme-toggle .i-sun { display: block; } :root:not([data-theme="light"]) .v-theme-toggle .i-moon { display: none; } } /* =========================================================================== MOVIMENTO REDUZIDO (secao 6.B, obrigatorio acima de MOTION_INTENSITY 3) =========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }