/* ───────────────────────────────────────────────────────────── METRIQ · contrato de tokens (Design Contract v1, seções B–E) Light e Dark são duas expressões oficiais da mesma marca. Compartilham geometria, spacing, tipografia e motion. Divergem em superfície, contraste e densidade do violeta. NAMESPACE: todo token é --mq-*. O site.css legado define --bg e --line com os MESMOS nomes; sem o prefixo, o segundo :root venceria e as telas ainda não migradas quebrariam. O prefixo é o que torna a coexistência das Fases 1–9 segura. ───────────────────────────────────────────────────────────── */ :root { /* ── invariantes: não mudam entre temas ───────────────────── */ /* Violeta master — o mesmo dos SVGs oficiais em Assets/. */ --mq-brand: #643EE3; /* ── SEMÂNTICA DE ESTADO ──────────────────────────────── A mesma paleta de --mq-buy/eval/pass, dita pelo que ela SIGNIFICA e não pela decisão que a estreou. As duas leituras convivem porque são o mesmo pigmento: verde é resultado bom (comprar, ganho, entrada), âmbar é pendência (avaliar, a pagar, atenção), vermelho é perda (passar, negativo, erro). Inventar um segundo trio de hues criaria dois sistemas visuais que divergiriam no primeiro ajuste de tema. ALIAS e não cópia: var() resolve no momento do uso, então cada bloco de tema (dark, light e os dois de primeiro acesso) redefine só --mq-buy/eval/pass e estes três seguem junto. É por isso que eles vivem aqui, no bloco invariante, em vez de replicados quatro vezes — quatro cópias divergem. O VIOLETA NÃO ENTRA AQUI. Ele é marca, seleção, foco e ação principal — nunca prejuízo nem erro. Caixa negativo pintado de violeta foi exatamente o que o teste manual encontrou. Cor nunca é o único portador: quem usa estes tokens mantém sinal +/−, rótulo e texto, para que a leitura sobreviva sem percepção de cor. */ --mq-success: var(--mq-buy); --mq-warning: var(--mq-eval); --mq-danger: var(--mq-pass); /* Escala tipográfica (contrato C) */ --mq-step-0: 12px; /* legenda, rótulo de nav, nota */ --mq-step-1: 13px; /* metadado, hint, sublinha */ --mq-step-2: 15px; /* CORPO: texto, linha de tabela, botão */ --mq-step-3: 18px; /* título de página */ --mq-step-4: 24px; /* valor de regra, Impact inline */ --mq-step-5: 34px; /* Impact de bloco */ --mq-step-6: 56px; /* Impact herói */ /* Spacing (contrato D) */ --mq-sp-1: 6px; --mq-sp-2: 10px; --mq-sp-3: 16px; --mq-sp-4: 24px; --mq-sp-5: 36px; --mq-sp-6: 56px; /* Raios (contrato D) */ --mq-r-pip: 1px; /* a marca-atômica: quadrado, nunca círculo */ --mq-r-xs: 3px; /* trilhos, anel de foco, halo do pip */ --mq-r-sm: 6px; /* botão, item de nav, switch, avatar */ --mq-r-md: 12px; /* folha interna: regra, campo, faixa */ --mq-r-lg: 18px; /* bloco */ --mq-r-pill: 99px; /* USO RESTRITO: contador ambiente e chip do menu mobile. Decision nunca. */ /* Motion (contrato E) */ --mq-ease: cubic-bezier(.22, .61, .36, 1); --mq-t-1: 120ms; /* press */ --mq-t-2: 180ms; /* hover */ --mq-t-3: 220ms; /* mudança de estado */ --mq-t-4: 300ms; /* troca de tema, thumb do switch */ --mq-t-5: 550ms; /* reveal de bloco */ --mq-t-6: 900ms; /* desenho das linhas do Flow */ /* Métrica do shell */ --mq-rail: 252px; --mq-page: 1240px; /* Altura da topbar. É token porque o cabeçalho sticky de tabela precisa grudar EXATAMENTE abaixo dela: com dois números independentes, qualquer ajuste na topbar deixaria o cabeçalho flutuando ou escondido atrás dela. */ --mq-top-h: 80px; } /* ───────────────────────────────────────────────────────────── DARK Aplicado por: (a) atributo data-theme escrito pelo SERVIDOR a partir do cookie metriq_theme, ou (b) prefers-color-scheme quando ainda não há cookie. O caminho (b) mora no bloco :root:not([data-theme]) mais abaixo — é ele que elimina o FOUC no primeiro acesso, sem depender de JavaScript. ───────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --mq-bg: #0F1013; --mq-s1: #141519; --mq-s2: #191B20; --mq-s3: #212329; --mq-line: rgba(255, 255, 255, .075); --mq-line-2: rgba(255, 255, 255, .14); --mq-tx: #EDEDF2; --mq-tx-2: #9B9DAA; --mq-tx-3: #666875; --mq-violet: #8163F5; --mq-violet-ink: #A48EFA; --mq-violet-soft: rgba(129, 99, 245, .14); --mq-violet-line: rgba(129, 99, 245, .45); --mq-violet-glow: rgba(129, 99, 245, .30); --mq-buy: #4FAE80; --mq-eval: #CDA047; --mq-pass: #D96A63; --mq-field: var(--mq-s2); --mq-btn-tx: #FFFFFF; --mq-sheet: 0 1px 0 rgba(255, 255, 255, .04) inset; --mq-lift: 0 18px 40px -28px rgba(0, 0, 0, .9); --mq-grid: rgba(255, 255, 255, .045); --mq-wordmark: url("../../img/metriq-wordmark-dark.svg"); color-scheme: dark; } /* ───────────────────────────────────────────────────────────── LIGHT ───────────────────────────────────────────────────────────── */ :root[data-theme="light"] { --mq-bg: #EFEEF5; --mq-s1: #FBFAFE; --mq-s2: #F4F3FA; --mq-s3: #E8E5F3; --mq-line: rgba(36, 28, 74, .11); --mq-line-2: rgba(36, 28, 74, .20); --mq-tx: #1E1E1E; --mq-tx-2: #5B5C6B; --mq-tx-3: #8C8D9C; --mq-violet: #5C33D8; --mq-violet-ink: #4C28C0; --mq-violet-soft: rgba(92, 51, 216, .09); --mq-violet-line: rgba(92, 51, 216, .32); --mq-violet-glow: rgba(92, 51, 216, .22); --mq-buy: #2E8A5C; --mq-eval: #9A7318; --mq-pass: #C0403C; --mq-field: #FFFFFF; --mq-btn-tx: #FFFFFF; --mq-sheet: 0 1px 0 rgba(255, 255, 255, .9) inset; --mq-lift: 0 14px 34px -26px rgba(38, 28, 84, .55); --mq-grid: rgba(36, 28, 74, .05); --mq-wordmark: url("../../img/metriq-wordmark-light.svg"); color-scheme: light; } /* ───────────────────────────────────────────────────────────── PRIMEIRO ACESSO — o usuário ainda não escolheu tema. O tema correto é pintado pelo próprio CSS, antes de qualquer script rodar. É isto que garante "sem FOUC visível" mesmo com JavaScript desligado ou atrasado. O seletor é :not([data-theme="dark"]):not([data-theme="light"]) e NÃO :not([data-theme]) — de propósito. Um data-theme presente porém vazio ou inválido tem de cair aqui também: · o Razor emite data-theme="" quando a expressão é nula, e :not([data-theme]) não casaria com isso — a página ficaria sem NENHUM token, com as custom properties indefinidas; · um cookie adulterado (metriq_theme=xyz) tem de degradar para o tema do sistema, nunca para uma página sem paleta. Os valores são duplicados de propósito: uma media query não pode reusar um bloco de seletor, e indireção por variável extra custaria mais do que a repetição. Ao alterar uma paleta, alterar as duas cópias. ───────────────────────────────────────────────────────────── */ :root:not([data-theme="dark"]):not([data-theme="light"]) { --mq-bg: #EFEEF5; --mq-s1: #FBFAFE; --mq-s2: #F4F3FA; --mq-s3: #E8E5F3; --mq-line: rgba(36, 28, 74, .11); --mq-line-2: rgba(36, 28, 74, .20); --mq-tx: #1E1E1E; --mq-tx-2: #5B5C6B; --mq-tx-3: #8C8D9C; --mq-violet: #5C33D8; --mq-violet-ink: #4C28C0; --mq-violet-soft: rgba(92, 51, 216, .09); --mq-violet-line: rgba(92, 51, 216, .32); --mq-violet-glow: rgba(92, 51, 216, .22); --mq-buy: #2E8A5C; --mq-eval: #9A7318; --mq-pass: #C0403C; --mq-field: #FFFFFF; --mq-btn-tx: #FFFFFF; --mq-sheet: 0 1px 0 rgba(255, 255, 255, .9) inset; --mq-lift: 0 14px 34px -26px rgba(38, 28, 84, .55); --mq-grid: rgba(36, 28, 74, .05); --mq-wordmark: url("../../img/metriq-wordmark-light.svg"); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --mq-bg: #0F1013; --mq-s1: #141519; --mq-s2: #191B20; --mq-s3: #212329; --mq-line: rgba(255, 255, 255, .075); --mq-line-2: rgba(255, 255, 255, .14); --mq-tx: #EDEDF2; --mq-tx-2: #9B9DAA; --mq-tx-3: #666875; --mq-violet: #8163F5; --mq-violet-ink: #A48EFA; --mq-violet-soft: rgba(129, 99, 245, .14); --mq-violet-line: rgba(129, 99, 245, .45); --mq-violet-glow: rgba(129, 99, 245, .30); --mq-buy: #4FAE80; --mq-eval: #CDA047; --mq-pass: #D96A63; --mq-field: #191B20; --mq-btn-tx: #FFFFFF; --mq-sheet: 0 1px 0 rgba(255, 255, 255, .04) inset; --mq-lift: 0 18px 40px -28px rgba(0, 0, 0, .9); --mq-grid: rgba(255, 255, 255, .045); --mq-wordmark: url("../../img/metriq-wordmark-dark.svg"); color-scheme: dark; } }