/* tokens.css — single source of truth for design tokens (dark :root + light override). Breakpoints (use in media queries — NOT available as var()): mobile <640 · tablet 640–1023.98 · desktop 1024–1535.98 · widescreen ≥1536 2026-08-15 — o bloco escuro do dashboard passou a ser o EDITORIAL INVERTIDO (quase-preto neutro, sem tom azul), a par do claro. Fonte: as maquetes Overview Editorial.dc.html / Overview Editorial Escuro.dc.html. */ :root { --profit: #17de80; /* vivid mint-green (dark) */ --loss: #ff4b51; /* vivid red (dark) */ --winrate: #836ef0; --cyan: #2dd4cf; --pink: #cf6ed0; /* ── Altrix Capital brand — Cobalt Frost (purple stays the hero) ── */ --brand: #836ef0; /* violet brand */ --brand-light: #9a86f5; /* gradient start */ --brand-deep: #5b48c8; /* deep violet (headings) */ --brand-magenta:#a366d4; /* gradient end */ --brand-grad: linear-gradient(135deg, #9a86f5, #a366d4); /* Glass palette — cool blue-slate, semi-transparent */ --bg-app: #070a12; --glass-1: rgba(24, 32, 52, 0.50); /* hero cards */ --glass-2: rgba(20, 28, 46, 0.58); /* sidebar, strip, chart */ --glass-3: rgba(16, 23, 40, 0.38); /* subtle elements */ --glass-hover: rgba(34, 46, 74, 0.66); --border-glass: rgba(150, 180, 235, 0.10); --border-glass-2: rgba(150, 180, 235, 0.18); /* Reserva para as páginas SEM class="page-dashboard" (pamm.html, analysis.html, mockup-cockpit.html). Estas continuam no skin de vidro azul, mas carregam dashboard.css/components.css, que já consomem os tokens novos do Editorial. Sem estas reservas o `border-bottom:1px solid var(--border-topbar)` da topbar resolvia para nada e a régua desaparecia. */ --card-flat: #182034; --surface-fixed: #182034; --border-card: var(--border-glass); --border-topbar: var(--border-glass); --border-soft: var(--overlay-mid); --border-faint: var(--overlay-low); --border-zero: var(--border-glass-2); --border-dashed: var(--border-glass-2); /* já era consumido por dashboard.css e clientes.css sem existir aqui */ --text-floor: var(--text-3); --toggle-off: rgba(255,255,255,0.12); --toggle-on: linear-gradient(180deg,#54d69c,#137a52); --toggle-knob: #182034; --toggle-knob-shadow: 0 1px 2px rgba(0,0,0,0.45); --cursor-track: #5a5a6b; --plate-up-rgb: 47,190,133; --plate-bevel: rgba(255,255,255,0.8); --plate-down-scale: 0.5; --accent-green: #2fbe85; --ghost-hover: rgba(255,255,255,0.07); --pill-hover: rgba(255,255,255,0.10); --bar-pos-grad: linear-gradient(180deg,#54D69C,#137A52); --bar-neg-grad: linear-gradient(180deg,#F06A70,#B32C33); --glow-alpha: 0.11; /* brilho do número-herói — Performance Escuro: rgba(16,116,78,0.22) → rgba(52,199,123,0.11) */ --recess: rgba(0,0,0,0.04); --recess-soft: rgba(0,0,0,0.03); --border-dashed-faint: rgba(0,0,0,0.09); --tooltip-bg: #182034; --tooltip-fg: var(--text-1); --tooltip-title: var(--text-3); --tooltip-border: var(--border-glass); --rebate-yellow: #ffc645; --rebate-gold: #ffb020; --text-1: #eef2fb; --text-2: #94a3c4; --text-3: #5f6d92; --sidebar-w: 220px; --radius: 14px; --radius-sm: 10px; --font: 'Montserrat', system-ui, sans-serif; /* ── Overlay tokens (dark mode defaults) ── */ --overlay-low: rgba(255, 255, 255, 0.03); --overlay-mid: rgba(255, 255, 255, 0.05); --overlay-high: rgba(255, 255, 255, 0.08); --overlay-inset: rgba(255, 255, 255, 0.06); --overlay-subtle: rgba(255, 255, 255, 0.02); --overlay-pill: rgba(255, 255, 255, 0.10); /* Shadow tokens */ --shadow-card: rgba(0, 0, 0, 0.25); --shadow-strong: rgba(0, 0, 0, 0.40); --shadow-heavy: rgba(0, 0, 0, 0.60); /* ── Effects layer: uniform elevation + soft light ── */ --brand-rgb: 131, 110, 240; --profit-rgb: 23, 222, 128; --loss-rgb: 255, 75, 81; --elev-1: 0 6px 22px var(--shadow-card), inset 0 1px 0 var(--overlay-inset); --elev-2: 0 16px 40px var(--shadow-strong), inset 0 1px 0 var(--overlay-inset); --elev-3: 0 26px 64px var(--shadow-heavy), inset 0 1px 0 var(--overlay-inset); --ring: 0 0 0 3px rgba(var(--brand-rgb), 0.30); --glow-brand: 0 0 16px rgba(var(--brand-rgb), 0.18); --glow-profit: 0 0 13px rgba(var(--profit-rgb), 0.16); --glow-loss: 0 0 13px rgba(var(--loss-rgb), 0.16); --card-sheen: linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015) 50%, rgba(255,255,255,0) 100%); --card-frost: blur(22px) saturate(180%); /* ── Responsive container ── */ --container-max: 1460px; --gutter: clamp(16px, 4vw, 32px); /* ── Spacing scale (4px base) ── */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; /* ── Fluid type scale ── */ --fs-xs:11px; --fs-sm:clamp(12px,1.4vw,13px); --fs-base:clamp(13px,1.6vw,15px); --fs-lg:clamp(16px,2vw,18px); --fs-xl:clamp(20px,3vw,26px); --fs-2xl:clamp(26px,4.5vw,38px); --fs-3xl:clamp(32px,6vw,56px); /* Números grandes: nunca fixos. Um valor a 38px fixos atravessa a régua para a coluna do lado assim que a janela aperta — daí o clamp. */ --fs-metric: clamp(24px, 2.6vw, 38px); /* KPI de topo */ --fs-metric-sm: clamp(21px, 2.1vw, 30px); /* KPI secundário */ --fs-hero: clamp(38px, 5vw, 62px); /* número-herói */ /* ── Radii / z-index / motion ── */ --radius-lg:18px; --radius-pill:999px; --z-sticky:50; --z-overlay:190; --z-drawer:200; --z-modal:300; --z-toast:400; --ease:cubic-bezier(.4,0,.2,1); --dur-fast:120ms; --dur:200ms; --dur-slow:320ms; /* Alvos de toque — 44px é o mínimo que um dedo acerta */ --tap: 44px; } /* ══════════════════════════════════════════════════════════════ LIGHT THEME — applied when html[data-theme="light"] ══════════════════════════════════════════════════════════════ */ [data-theme="light"] { --profit: #058043; --loss: #c8133e; --winrate: #6a3df0; --cyan: #0a8a9e; --pink: #c70b86; --rebate-yellow: #b8810a; --rebate-gold: #a06d00; --brand: #6a3df0; --brand-light: #7d54f2; --brand-deep: #4a2bb8; --brand-magenta:#9c34c8; --brand-grad: linear-gradient(135deg, #6a3df0, #9c34c8); --bg-app: #eef1f7; --glass-1: rgba(255, 255, 255, 0.82); --glass-2: rgba(255, 255, 255, 0.74); --glass-3: rgba(255, 255, 255, 0.60); --glass-hover: rgba(255, 255, 255, 0.94); --border-glass: rgba(35, 55, 95, 0.10); --border-glass-2: rgba(35, 55, 95, 0.18); --text-1: #0f1729; --text-2: #46546f; --text-3: #74809e; --overlay-low: rgba(0, 0, 0, 0.025); --overlay-mid: rgba(0, 0, 0, 0.05); --overlay-high: rgba(0, 0, 0, 0.08); --overlay-inset: rgba(255, 255, 255, 0.70); --overlay-subtle: rgba(0, 0, 0, 0.02); --overlay-pill: rgba(0, 0, 0, 0.07); --shadow-card: rgba(0, 0, 0, 0.10); --shadow-strong: rgba(0, 0, 0, 0.16); --shadow-heavy: rgba(0, 0, 0, 0.22); --brand-rgb: 106, 61, 240; --profit-rgb: 5, 128, 67; --loss-rgb: 200, 19, 62; --glow-brand: 0 0 14px rgba(var(--brand-rgb), 0.12); --glow-profit: 0 0 12px rgba(var(--profit-rgb), 0.10); --glow-loss: 0 0 12px rgba(var(--loss-rgb), 0.10); --card-sheen: linear-gradient(150deg, rgba(255,255,255,0.65), rgba(255,255,255,0.10) 55%, rgba(255,255,255,0) 100%); --card-frost: blur(20px) saturate(140%); } /* ══════════════════════════════════════════════════════════════ DASHBOARD SKIN (html.page-dashboard) — EDITORIAL, nos dois temas. Um só sistema: painéis assentes numa sombra longa, réguas de 1px, pill activa monocromática (quase-preto no claro, grafite no escuro), roxo só como cor de marca e interacção. Montserrat em tudo, com algarismos tabulares. Verde/vermelho mantêm-se a cor emocional. ══════════════════════════════════════════════════════════════ */ :root.page-dashboard { --font: 'Montserrat', system-ui, sans-serif; --font-display: 'Montserrat', system-ui, sans-serif; --fs-micro: 9.5px; --track: 0.16em; --radius: 20px; --radius-sm: 10px; /* 228px é a largura da sidebar nas maquetas Editorial. Com os 220px antigos o "Altrix Capital" a 15px partia para duas linhas. */ --sidebar-w: 228px; } /* ── EDITORIAL — escuro (o claro invertido; quase-preto neutro, sem azul) ── Fonte: Overview Editorial Escuro.dc.html */ :root.page-dashboard:not([data-theme="light"]) { /* ESCADA DE SUPERFÍCIES — quatro degraus, o cartão MAIS CLARO que a página. No claro a profundidade vem da sombra; no escuro a sombra não existe, por isso é a luminância que separa. Menos de ~10 pontos entre cartão e página e o cartão lê-se como mancha, não como superfície. página #15151b → faixa #1c1c23 → cartão #24242d → barra fixa #282833 */ --bg-app: #15151b; /* Overview Editorial Escuro.dc.html:17 body { … background: #15151B; … } */ --bg-grad: linear-gradient(165deg,#15151b 0%,#17171e 45%,#121217 100%); /* :39 background:linear-gradient(165deg,#15151B 0%,#17171E 45%,#121217 100%) */ /* Cartão: degradê de duas paragens, como na maqueta. Todos os 53 usos de --glass-1 no projeto são `background:` (shorthand), nunca background-color, por isso um degradê é seguro aqui. --card-flat fica para quem precisa de uma cor sólida (cabeçalhos sticky que têm de tapar o que passa por baixo). */ --glass-1: linear-gradient(158deg,rgba(36,36,45,0.97),rgba(30,30,38,0.94)); /* :288 background:linear-gradient(158deg,rgba(36,36,45,0.97),rgba(30,30,38,0.94)) */ --card-flat: #24242d; /* :277
*/ --surface-fixed: #282833; /* 4.º degrau — barra fixa (Comparison v2 Escuro.dc.html) */ --glass-2: rgba(30,30,38,0.94); /* :58 sidebar / :138 topbar — background:rgba(30,30,38,0.94) */ --glass-3: rgba(255,255,255,0.05); /* :140 pista do segmento — background:rgba(255,255,255,0.05) */ --glass-hover: #1c1c23; /* :378 style-hover="background:#1C1C23" — a linha recua para a faixa */ /* RÉGUAS EM BRANCO TRANSLÚCIDO. Um hex fixo só acerta num degrau da escada; o branco translúcido acerta em todos, porque compõe com o que está por baixo. */ --border-glass: rgba(255,255,255,0.10); /* :58 border-right:1px solid rgba(255,255,255,0.10) */ --border-card: rgba(255,255,255,0.075); /* :288 border:1px solid rgba(255,255,255,0.075) */ --border-glass-2: rgba(255,255,255,0.12); /* borda de controlo (botão, input) */ --border-soft: rgba(255,255,255,0.05); /* :378 border-bottom:1px solid rgba(255,255,255,0.05) */ --border-topbar: rgba(255,255,255,0.06); /* :138 border-bottom:1px solid rgba(255,255,255,0.06) */ /* Interruptor — Settings Escuro.dc.html. No escuro o botão é ESCURO sobre calha clara, o inverso do claro; e a sombra do botão perde o tom azul. */ --toggle-off: rgba(255,255,255,0.12); --toggle-on: linear-gradient(180deg,#54d69c,#137a52); --toggle-knob: #24242d; --toggle-knob-shadow: 0 1px 2px rgba(0,0,0,0.45); /* Tooltip. DERIVADO, não lido — as maquetas são estáticas e não têm o estado de hover. No escuro usa o 4.º degrau (#282833): um tooltip flutua por cima do cartão e tem de o TAPAR, que é o mesmo papel da barra fixa. Estava em #26262C, um degrau acima do cartão — praticamente invisível. */ --cursor-track: #5a5a6b; /* traço tracejado do cursor */ /* Placa do calendário de P&L — PL Calendar Escuro.dc.html linear-gradient(155deg,rgba(47,190,133,0.165),rgba(47,190,133,0.074)) O verde da placa NÃO é --profit (#34c77b): o mapa do spec lista #1E9E6A→#2FBE85 como linha própria, e é este o valor na maqueta. A placa negativa usa --loss-rgb, que já bate certo nos dois temas. */ --plate-up-rgb: 47,190,133; --plate-bevel: rgba(255,255,255,0.8); /* LITERAL: a maqueta escura mantém 0.8 nas 15 células. Não é esquecimento — quem afinou os alfas da perda um a um não se esqueceu do bisel. */ /* As tintas NEGATIVAS levam metade do alpha no escuro; as positivas mantêm. PL Calendar: perda 0.111→0.06, 0.370→0.18, borda 0.18→0.09, medidor 0.14→0.07. Performance: lavagem negativa 0.05→0.03, brilho do herói 0.22→0.11. Razão: #F0555C é muito mais saturado que o #B72F35 do claro — ao mesmo alpha dominava o ecrã. Isto NÃO está no mapa de tokens do spec; sai dos ficheiros. */ --plate-down-scale: 0.5; --accent-green: #2fbe85; /* pontos de estado e traço da curva — #1E9E6A→#2FBE85, linha própria do mapa */ /* Barras desenhadas em CSS (as da comparação são divs, não canvas). Mesmos pares de chart-tokens.js — Overview Editorial{,Escuro}.dc.html:304/:310 */ --bar-pos-grad: linear-gradient(180deg,#54D69C,#137A52); --bar-neg-grad: linear-gradient(180deg,#F06A70,#B32C33); --ghost-hover: rgba(255,255,255,0.07); /* botões fantasma (Close, Logs, setas) */ --pill-hover: #31313a; /* pill de selecção sobre o cartão */ --recess: rgba(0,0,0,0.04); /* total da semana — no escuro AFUNDA */ --recess-soft: rgba(0,0,0,0.03); /* célula vazia */ --border-dashed-faint: rgba(0,0,0,0.09); /* dia futuro, tracejado */ --tooltip-bg: #282833; --tooltip-fg: #f2f2f5; --tooltip-title: #a0a0b0; --tooltip-border: rgba(255,255,255,0.10); --border-faint: rgba(255,255,255,0.035); --border-zero: rgba(255,255,255,0.20); /* linha do zero nos gráficos */ --border-dashed: rgba(255,255,255,0.20); --card-sheen: none; --card-frost: blur(26px); --brand: #9c8ff5; /* :18 a { color: #9C8FF5; } */ --brand-light: #b0a5f8; --brand-deep: #b7acff; /* :19 a:hover { color: #B7ACFF; } — no escuro o hover CLAREIA; o #7d6ee8 anterior escurecia */ --brand-magenta:#a98ef4; --brand-grad: linear-gradient(135deg, #8a7bf2, #a98ef4); --winrate: #9c8ff5; --brand-rgb: 156, 143, 245; --accent: #9c8ff5; --accent-rgb: 156, 143, 245; /* Verde/vermelho do Editorial escuro: legíveis sobre grafite sem berrar */ --profit: #34c77b; --loss: #f0555c; --profit-rgb: 52, 199, 123; --loss-rgb: 240, 85, 92; --cyan: #2dd4cf; --pink: #ce6ed0; --rebate-yellow: #e0a93c; --rebate-gold: #cf9a2e; /* Piso de contraste no escuro: nada abaixo de #8e8e9c. A de-ênfase faz-se com TAMANHO e PESO, nunca com cinza quase-branco. */ --text-1: #f2f2f5; /* :39 color:#F2F2F5 */ --text-2: #c9c9d4; /* claro #4b4b5c → #c9c9d4 (era #b9b9c6) */ --text-3: #a0a0b0; /* :277 color:#A0A0B0 (era #9a9aaa, quase no piso) */ --text-floor: #8e8e9c; /* micro-rótulos; o valor mais escuro permitido */ --overlay-low: rgba(255,255,255,0.030); --overlay-mid: rgba(255,255,255,0.055); --overlay-high: rgba(255,255,255,0.090); --overlay-inset: rgba(255,255,255,0.055); --overlay-subtle: rgba(255,255,255,0.022); --overlay-pill: rgba(255,255,255,0.11); /* Mesma gramática de elevação do claro, com sombras que funcionam no escuro */ /* A sombra deixa de ser roxa: no escuro uma sombra tingida lê-se como sujidade. --elev-1 é lido da maqueta. --elev-2/3 não existem nela (a maqueta só tem uma receita de cartão), por isso saem do claro pela regra rgba(28,28,60,α) → rgba(0,0,0,min(0.95, α×2.6)) — derivados, não lidos. */ --elev-1: inset 0 1px 0 rgba(255,255,255,0.09), 0 1px 2px rgba(0,0,0,0.13), 0 24px 50px -28px rgba(0,0,0,0.78); /* :288 literal, tal e qual */ --elev-2: inset 0 1px 0 rgba(255,255,255,0.11), 0 2px 4px rgba(0,0,0,0.16), 0 32px 64px -30px rgba(0,0,0,0.95); --elev-3: 0 20px 48px rgba(0,0,0,0.36), 0 2px 6px rgba(0,0,0,0.16); --ring: 0 0 0 3px rgba(var(--brand-rgb),0.34); --glow-brand: 0 0 0 0 rgba(0,0,0,0); --glow-profit: 0 0 0 rgba(0,0,0,0); --glow-loss: 0 0 0 rgba(0,0,0,0); /* Selecção activa — grafite elevado, o espelho do quase-preto do claro */ --active-grad: linear-gradient(180deg, #43434f, #2a2a33); /* :72 background:linear-gradient(180deg,#43434F,#2A2A33) claro #26262F→#111119 ⇒ escuro #43434F→#2A2A33 */ --active-fg: #ffffff; /* :72 color:#FFFFFF */ --active-shadow: 0 12px 22px -12px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.10); /* :72 literal */ /* Botão principal (Save, Apply, confirmar). Consumido sem fallback em components.css:283 e dashboard.css:244/1849/2703 — sem isto os botões ficam sem fundo. No escuro é a lavanda da marca. */ --cta-grad: var(--brand-grad); --cta-fg: #ffffff; --cta-shadow: none; } /* ── EDITORIAL — claro (o skin das maquetes 2026-08-15) ─────────────────── Fundo lavanda-gelo com lavagens de canto, painéis brancos assentes numa sombra longa e difusa (sem borda visível), raio 20, pill activa quase-preta. */ :root.page-dashboard[data-theme="light"] { /* v2 mexeu também no claro: o fundo passou de #f6f5fc a #f2f2f6 e o degradê de 180deg para 165deg com paragens novas. Lido de Overview Editorial.dc.html. */ --bg-app: #f2f2f6; /* :17 body { … background: #F2F2F6; … } */ --bg-grad: linear-gradient(165deg,#f7f6fd 0%,#f3f7fa 45%,#f6f4fb 100%); /* :39 background:linear-gradient(165deg,#F7F6FD 0%,#F3F7FA 45%,#F6F4FB 100%) */ --glass-1: linear-gradient(158deg,rgba(255,255,255,0.99),rgba(255,255,255,0.955)); /* :288 literal */ --card-flat: #ffffff; --surface-fixed: #ffffff; /* 4.º degrau — no claro a barra fixa é branca */ --glass-2: rgba(255,255,255,0.96); /* :58 sidebar / :138 topbar */ --glass-3: #f4f4f8; /* :140 pista do segmento — background:#F4F4F8 */ --glass-hover: #ededf3; --border-glass: #ececf1; /* :58 border-right:1px solid #ECECF1 */ --border-card: rgba(255,255,255,0.9); /* :288 border:1px solid rgba(255,255,255,0.9) */ --border-glass-2: #e7e7ee; --border-soft: #f4f4f8; --border-faint: #f7f7fa; --border-topbar: rgba(255,255,255,0.7); /* :138 border-bottom:1px solid rgba(255,255,255,0.7) */ /* Interruptor — Settings Editorial.dc.html */ --toggle-off: #e4e4ec; --toggle-on: linear-gradient(180deg,#3abe84,#10744e); --toggle-knob: #ffffff; --toggle-knob-shadow: 0 1px 2px rgba(20,20,40,0.35); /* No claro o tooltip é INVERTIDO — quase-preto sobre a página branca. É de propósito e mantém-se; a única mudança é passar a ser token em vez de hex enterrado em cinco ficheiros de gráfico. */ --cursor-track: #b4b4c2; /* traço tracejado do cursor — NÃO é cor de texto */ /* PL Calendar Editorial.dc.html:171 rgba(30,158,106,0.165) */ --plate-up-rgb: 30,158,106; --plate-bevel: rgba(255,255,255,0.8); --plate-down-scale: 1; --accent-green: #1e9e6a; --bar-pos-grad: linear-gradient(180deg,#5CC796,#0F7049); --bar-neg-grad: linear-gradient(180deg,#DC5960,#A9262C); --glow-alpha: 0.22; --ghost-hover: #f3f3f7; --pill-hover: #ededf3; --recess: rgba(20,20,40,0.028); --recess-soft: rgba(20,20,40,0.02); --border-dashed-faint: rgba(20,20,40,0.07); --tooltip-bg: #14141c; --tooltip-fg: #ffffff; --tooltip-title: rgba(255,255,255,0.62); --tooltip-border: transparent; --border-zero: #dcdce6; /* linha do zero — border-color, NUNCA cor de texto */ --border-dashed: #dcdce6; --card-sheen: none; --card-frost: blur(26px); --brand: #6c5fd0; --brand-light: #8175dc; --brand-deep: #5648bc; --brand-magenta:#a366d4; --brand-grad: linear-gradient(135deg, #6c5fd0, #a366d4); --winrate: #6c5fd0; --brand-rgb: 108, 95, 208; --accent: #6c5fd0; --accent-rgb: 108, 95, 208; --profit: #10744e; --loss: #b72f35; --profit-rgb: 16, 116, 78; --loss-rgb: 183, 47, 53; --cyan: #2dd4cf; --pink: #ce6ed0; --rebate-yellow: #8a6414; --rebate-gold: #a97b12; /* Piso de contraste no claro: nada mais claro que #6e6e80. #b4b4c2 e #dcdce6 não são cores de texto — existem só como traço do cursor e border-color. */ --text-1: #14141c; /* :39 color:#14141C */ --text-2: #4b4b5c; --text-3: #6e6e80; /* :141 color:#6E6E80 */ --text-floor: #6e6e80; /* no claro o piso É o text-3 */ --overlay-low: rgba(20,20,40,0.022); --overlay-mid: rgba(20,20,40,0.045); --overlay-high: rgba(20,20,40,0.075); --overlay-inset: rgba(255,255,255,1); --overlay-subtle: rgba(20,20,40,0.018); --overlay-pill: rgba(20,20,40,0.06); --elev-1: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(28,28,60,0.05), 0 24px 50px -28px rgba(28,28,60,0.30); --elev-2: inset 0 1px 0 rgba(255,255,255,1), 0 2px 4px rgba(28,28,60,0.06), 0 32px 64px -30px rgba(28,28,60,0.38); --elev-3: 0 20px 48px rgba(22,22,40,0.14), 0 2px 6px rgba(22,22,40,0.06); --ring: 0 0 0 3px rgba(var(--brand-rgb),0.30); --glow-brand: 0 0 0 0 rgba(0,0,0,0); --glow-profit: 0 0 0 rgba(0,0,0,0); --glow-loss: 0 0 0 rgba(0,0,0,0); --active-grad: linear-gradient(180deg, #26262f, #111119); --active-fg: #ffffff; --active-shadow: 0 12px 22px -12px rgba(17,17,25,0.9), inset 0 1px 0 rgba(255,255,255,0.14); /* No Editorial claro o botão principal é o mesmo quase-preto da selecção. */ --cta-grad: var(--active-grad); --cta-fg: var(--active-fg); --cta-shadow: var(--active-shadow); } /* ── Mobile: a sidebar sai do fluxo e vira drawer (ver responsive.css) ── */ @media (max-width: 1023.98px) { :root { --sidebar-w: 0px; --gutter: 16px; } :root.page-dashboard { --radius: 16px; } } @media (max-width: 639.98px) { :root { --gutter: 14px; } :root.page-dashboard { --radius: 14px; } :root { --fs-metric: clamp(22px, 7.5vw, 30px); --fs-metric-sm: clamp(19px, 6vw, 24px); --fs-hero: clamp(32px, 11vw, 46px); } }