/* ════════════════════════════════════════════════════════════════════════
MELO TOKENS (v3 — 30/07/2026) — folha INDEPENDENTE dos tokens --m-.
Fonte única de cores/estilos das páginas v3 (formato do mockup
demo_ui_v2.html, mesmos valores). Páginas v3 carregam SÓ:
e NUNCA o style.css legado (v1 congelada). Tema escuro automático
(prefers-color-scheme) e forçável via .
O bloco espelho dentro do style.css continua existindo p/ as telas v2 de
transição; este arquivo é a cópia canônica — mudanças de token entram AQUI
primeiro e são espelhadas lá até a v1 morrer.
════════════════════════════════════════════════════════════════════════ */
:root {
--m-bg: #f5f7ff;
--m-surface: #ffffff;
--m-ink: #2d3a4e;
--m-heading: #012970;
--m-muted: #64748b;
--m-accent: #4154f1;
--m-accent-soft: rgba(65, 84, 241, .09);
--m-border: #dbe3ff;
--m-ok: #21a66c;
--m-ok-soft: #e3f6ed;
--m-warn: #ec9f05;
--m-warn-soft: #fdf3dd;
--m-danger: #e74c63;
--m-danger-soft: #fde9ed;
--m-shadow: 0 8px 20px -14px rgba(1, 41, 112, .18);
--m-radius: 6px;
--m-mono: Consolas, "Cascadia Mono", monospace;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--m-bg: #0f1526; --m-surface: #1a2138; --m-ink: #d6ddf0;
--m-heading: #aebdf5; --m-muted: #8b96b3;
--m-accent: #7b8afd; --m-accent-soft: rgba(123, 138, 253, .14);
--m-border: #2c3654;
--m-ok: #3ecb8b; --m-ok-soft: rgba(62, 203, 139, .13);
--m-warn: #f2b135; --m-warn-soft: rgba(242, 177, 53, .12);
--m-danger: #f2708a; --m-danger-soft: rgba(242, 112, 138, .12);
--m-shadow: 0 8px 22px -12px rgba(0, 0, 0, .55);
}
}
:root[data-theme="dark"] {
--m-bg: #0f1526; --m-surface: #1a2138; --m-ink: #d6ddf0;
--m-heading: #aebdf5; --m-muted: #8b96b3;
--m-accent: #7b8afd; --m-accent-soft: rgba(123, 138, 253, .14);
--m-border: #2c3654;
--m-ok: #3ecb8b; --m-ok-soft: rgba(62, 203, 139, .13);
--m-warn: #f2b135; --m-warn-soft: rgba(242, 177, 53, .12);
--m-danger: #f2708a; --m-danger-soft: rgba(242, 112, 138, .12);
--m-shadow: 0 8px 22px -12px rgba(0, 0, 0, .55);
}
:root[data-theme="light"] {
--m-bg: #f5f7ff; --m-surface: #ffffff; --m-ink: #2d3a4e;
--m-heading: #012970; --m-muted: #64748b;
--m-accent: #4154f1; --m-accent-soft: rgba(65, 84, 241, .09);
--m-border: #dbe3ff;
--m-ok: #21a66c; --m-ok-soft: #e3f6ed;
--m-warn: #ec9f05; --m-warn-soft: #fdf3dd;
--m-danger: #e74c63; --m-danger-soft: #fde9ed;
--m-shadow: 0 8px 20px -14px rgba(1, 41, 112, .18);
}