/* ============================================================================
MIDNIGHT UI — mn-system.css
Azul Elétrico · raio 12px · linha 12% · separação por fundo · Geist
DECISÕES QUE GOVERNAM ESTE ARQUIVO
• Cards não têm borda. A separação vem da diferença de superfície.
• Vidro só em camada que FLUTUA sobre conteúdo (barra fixa, menu, modal,
tooltip, toast, paleta de comandos). Nunca em card, tabela ou seção.
• Campo de formulário tem superfície própria — nunca transparente.
• Todo elemento interativo tem 4 estados: repouso, hover, pressionado, foco.
• Neutros sem tingimento. O azul aparece em ação, item ativo e dado final.
USO
ou "light"
========================================================================= */
/* ------------------------------------------------------------ TOKENS: DARK */
:root,
:root[data-theme="dark"] {
color-scheme: dark;
/* superfícies — neutros puros */
--bg: #0C0C0D;
--surface: #141416;
--surface-soft: #101012;
--surface-high: #18181B;
--float: rgba(18, 18, 20, 0.72); /* camadas de vidro */
--scrim: rgba(0, 0, 0, 0.55);
/* texto */
--fg: #F2F2F4;
--fg-muted: #87878F;
--fg-subtle: #5C5C66;
--fg-disabled: #4E4E57;
/* azul elétrico */
--accent: #2E7BFF;
--accent-hover: #5192FF;
--accent-active: #1C68EC;
--accent-soft: rgba(46, 123, 255, 0.13);
--accent-ring: rgba(46, 123, 255, 0.20);
--on-accent: #FFFFFF;
/* estados */
--ok: #31C07A; --ok-soft: rgba(49, 192, 122, 0.15);
--warn: #E0A32E; --warn-soft: rgba(224, 163, 46, 0.15);
--danger: #F0575E; --danger-soft: rgba(240, 87, 94, 0.15);
--danger-hover: #F4696F;
--off: #3A3A42;
/* traços e véus (sempre em alfa, nunca cor sólida) */
--line: rgba(255, 255, 255, 0.12);
--line-soft: rgba(255, 255, 255, 0.07);
--veil-1: rgba(255, 255, 255, 0.04);
--veil-2: rgba(255, 255, 255, 0.06);
--veil-3: rgba(255, 255, 255, 0.09);
/* campo */
--field-bg: rgba(255, 255, 255, 0.045);
--field-bg-hover: rgba(255, 255, 255, 0.07);
--field-line: rgba(255, 255, 255, 0.10);
--field-line-hover:rgba(255, 255, 255, 0.18);
--knob: #0C0C0D;
--shadow-float: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
--shine: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* ----------------------------------------------------------- TOKENS: LIGHT */
:root[data-theme="light"] {
color-scheme: light;
--bg: #FCFCFD;
--surface: #FFFFFF;
--surface-soft: #F1F1F3;
--surface-high: #FFFFFF;
--float: rgba(255, 255, 255, 0.72);
--scrim: rgba(20, 20, 24, 0.35);
--fg: #0E0E10;
--fg-muted: #71717A;
--fg-subtle: #A1A1AA;
--fg-disabled: #B4B4BB;
--accent: #0A5FE8;
--accent-hover: #0B54CC;
--accent-active: #08479F;
--accent-soft: rgba(10, 95, 232, 0.09);
--accent-ring: rgba(10, 95, 232, 0.15);
--on-accent: #FFFFFF;
--ok: #0E8A50; --ok-soft: rgba(14, 138, 80, 0.12);
--warn: #8F6408; --warn-soft: rgba(143, 100, 8, 0.12);
--danger: #C92A33; --danger-soft: rgba(201, 42, 51, 0.12);
--danger-hover: #B8262F;
--off: #C4C4CC;
--line: rgba(17, 17, 19, 0.12);
--line-soft: rgba(17, 17, 19, 0.07);
--veil-1: rgba(17, 17, 19, 0.03);
--veil-2: rgba(17, 17, 19, 0.05);
--veil-3: rgba(17, 17, 19, 0.08);
--field-bg: #FFFFFF;
--field-bg-hover: #FFFFFF;
--field-line: rgba(17, 17, 19, 0.13);
--field-line-hover:rgba(17, 17, 19, 0.24);
--knob: #FFFFFF;
--shadow-float: 0 10px 26px -12px rgba(17, 17, 19, 0.18);
--shine: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* ------------------------------------------------------ FORMA E TIPOGRAFIA */
:root {
--r: 12px; /* raio base — cards, painéis */
--r-in: 10px; /* elementos internos — botões, campos */
--r-sm: 8px; /* miúdos — abas, itens de menu */
--r-xs: 5px;
--font: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* escala com saltos reais — é o que cria hierarquia sem caixa nem cor */
--t-cap: 10px; /* rótulo em caixa alta */
--t-xs: 11.5px;
--t-sm: 12.5px;
--t-md: 13px; /* corpo */
--t-lg: 15px; /* subtítulo */
--t-xl: 20px; /* título de página */
--t-2xl: 30px;
--t-3xl: 46px; /* leitura principal */
--h-ctl: 34px; /* altura padrão de controle */
--h-ctl-s: 29px;
--h-ctl-l: 38px;
--h-field: 36px;
--ease: cubic-bezier(.4, 0, .2, 1);
--fast: .13s;
}
/* ------------------------------------------------------------------- BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font);
font-size: var(--t-md);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
h1 { font-size: var(--t-2xl); letter-spacing: -.035em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); letter-spacing: -.02em; }
h4 { font-size: var(--t-md); }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; transition: color var(--fast) var(--ease); }
a:hover { color: var(--accent-hover); }
img, svg, video { display: block; max-width: 100%; }
code, .mn-mono { font-family: var(--mono); font-size: var(--t-sm); }
::selection { background: var(--accent-soft); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--veil-3); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); background-clip: content-box; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: var(--r-in); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* --------------------------------------------------------------- UTILIDADE */
.mn-cap {
font-size: var(--t-cap); letter-spacing: .14em; text-transform: uppercase;
font-weight: 500; color: var(--fg-muted); display: block;
}
.mn-num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mn-muted { color: var(--fg-muted); }
.mn-subtle{ color: var(--fg-subtle); }
.mn-hair { height: 1px; width: 100%; background: var(--line); border: 0; }
.mn-hair-soft { height: 1px; width: 100%; background: var(--line-soft); border: 0; }
.mn-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 640px) { .mn-container { padding-inline: 18px; } }
.mn-stack { display: flex; flex-direction: column; gap: 16px; }
.mn-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mn-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mn-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .mn-grid-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .mn-grid-3 { grid-template-columns: repeat(3,1fr); }
.mn-grid-4 { grid-template-columns: repeat(4,1fr); } }
/* ------------------------------------------------------------------ BOTÃO */
.mn-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
height: var(--h-ctl); padding-inline: 15px;
font-family: inherit; font-size: var(--t-md); font-weight: 500; line-height: 1;
color: var(--on-accent); background: var(--accent);
border: 1px solid transparent; border-radius: var(--r-in);
cursor: pointer; white-space: nowrap;
transition: background-color var(--fast) var(--ease),
border-color var(--fast) var(--ease),
color var(--fast) var(--ease),
transform .08s var(--ease);
}
.mn-btn:hover { background: var(--accent-hover); }
.mn-btn:active { background: var(--accent-active); transform: translateY(.5px); }
.mn-btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); }
.mn-btn:disabled, .mn-btn[aria-disabled="true"] {
background: var(--accent-soft); color: var(--fg-disabled);
cursor: not-allowed; pointer-events: none;
}
.mn-btn svg, .mn-btn .ti { width: 16px; height: 16px; font-size: 16px; flex: none; }
.mn-btn-secondary { background: var(--veil-2); color: var(--fg); }
.mn-btn-secondary:hover { background: var(--veil-3); }
.mn-btn-secondary:active { background: var(--veil-3); filter: brightness(.96); }
.mn-btn-outline { background: transparent; color: var(--fg); border-color: var(--line); }
.mn-btn-outline:hover { background: var(--veil-2); border-color: var(--field-line-hover); }
.mn-btn-outline:active { background: var(--veil-3); }
.mn-btn-ghost { background: transparent; color: var(--fg-muted); }
.mn-btn-ghost:hover { background: var(--veil-2); color: var(--fg); }
.mn-btn-ghost:active { background: var(--veil-3); }
.mn-btn-danger { background: var(--danger); color: #fff; }
.mn-btn-danger:hover { background: var(--danger-hover); }
.mn-btn-invert { background: #fff; color: var(--accent); }
.mn-btn-invert:hover { background: rgba(255,255,255,.9); }
.mn-btn-sm { height: var(--h-ctl-s); padding-inline: 12px; font-size: var(--t-sm); border-radius: var(--r-sm); }
.mn-btn-lg { height: var(--h-ctl-l); padding-inline: 18px; }
.mn-btn-icon { width: var(--h-ctl); padding: 0; }
.mn-btn-icon.mn-btn-sm { width: var(--h-ctl-s); }
.mn-btn-block { display: flex; width: 100%; }
/* ------------------------------------------------------------------- CARD
Sem borda: a separação vem da diferença de superfície. */
.mn-card {
background: var(--surface);
border: 1px solid transparent;
border-radius: var(--r);
padding: 16px;
}
.mn-card-soft { background: var(--surface-soft); }
.mn-card-accent { background: var(--accent); color: var(--on-accent); }
.mn-card-interactive { cursor: pointer; transition: background-color var(--fast) var(--ease); }
.mn-card-interactive:hover { background: var(--surface-high); }
.mn-card-title { font-size: var(--t-lg); font-weight: 500; letter-spacing: -.02em; }
.mn-card-desc { font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.55; margin-top: 5px; }
/* -------------------------------------------------------------- FORMULÁRIO
Campo tem superfície própria — nunca transparente. */
.mn-label {
display: block; margin-bottom: 7px;
font-size: var(--t-xs); font-weight: 400; color: var(--fg-muted);
}
.mn-input, .mn-select, .mn-textarea {
display: block; width: 100%;
height: var(--h-field); padding: 0 12px;
font-family: inherit; font-size: var(--t-md); color: var(--fg);
background: var(--field-bg);
border: 1px solid var(--field-line);
border-radius: var(--r-in);
outline: none;
transition: background-color var(--fast) var(--ease),
border-color var(--fast) var(--ease),
box-shadow var(--fast) var(--ease);
}
.mn-input::placeholder, .mn-textarea::placeholder { color: var(--fg-subtle); opacity: 1; }
.mn-input:hover, .mn-select:hover, .mn-textarea:hover {
background: var(--field-bg-hover); border-color: var(--field-line-hover);
}
.mn-input:focus, .mn-select:focus, .mn-textarea:focus {
background: var(--field-bg);
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.mn-input:disabled, .mn-select:disabled, .mn-textarea:disabled {
background: var(--veil-1); color: var(--fg-disabled);
cursor: not-allowed;
}
.mn-textarea { height: auto; min-height: 74px; padding: 9px 12px; line-height: 1.5; resize: vertical; }
.mn-select {
appearance: none; cursor: pointer; padding-right: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
}
.mn-input-invalid, .mn-textarea-invalid {
border-color: var(--danger);
background: var(--danger-soft);
}
.mn-input-invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.mn-field + .mn-field { margin-top: 14px; }
.mn-hint { margin-top: 6px; font-size: var(--t-xs); color: var(--fg-muted); }
.mn-error { margin-top: 6px; font-size: var(--t-xs); color: var(--danger); }
/* campo com ícone ou prefixo */
.mn-field-wrap { position: relative; display: block; }
.mn-field-wrap .mn-field-icon,
.mn-field-wrap .mn-field-prefix {
position: absolute; left: 12px; top: 0; height: var(--h-field);
display: flex; align-items: center; color: var(--fg-muted);
font-size: var(--t-md); pointer-events: none;
}
.mn-field-wrap .mn-field-icon { font-size: 16px; }
.mn-field-wrap .mn-input-icon { padding-left: 34px; }
.mn-field-wrap .mn-input-prefix { padding-left: 32px; }
/* checkbox, radio e switch */
.mn-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--t-md); }
.mn-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.mn-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; }
.mn-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mn-switch span {
position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
background: var(--veil-3); transition: background-color .16s var(--ease);
}
.mn-switch span::before {
content: ""; position: absolute; left: 2px; top: 2px;
width: 16px; height: 16px; border-radius: 999px; background: var(--knob);
transition: transform .16s var(--ease);
}
.mn-switch input:checked + span { background: var(--accent); }
.mn-switch input:checked + span::before { transform: translateX(16px); }
.mn-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }
/* ------------------------------------------------------------------ SELOS */
.mn-badge {
display: inline-flex; align-items: center; gap: 6px;
height: 22px; padding-inline: 10px;
font-size: var(--t-xs); font-weight: 500; line-height: 1;
border-radius: 999px;
background: var(--accent); color: var(--on-accent);
}
.mn-badge-neutral { background: var(--veil-2); color: var(--fg-muted); }
.mn-badge-ok { background: var(--ok-soft); color: var(--ok); }
.mn-badge-warn { background: var(--warn-soft); color: var(--warn); }
.mn-badge-danger { background: var(--danger-soft); color: var(--danger); }
.mn-dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; flex: none; }
.mn-dot-ok { background: var(--ok); }
.mn-dot-warn { background: var(--warn); }
.mn-dot-danger { background: var(--danger); }
.mn-dot-off { background: var(--off); }
/* ----------------------------------------------------------------- AVISOS */
.mn-alert {
display: grid; grid-template-columns: auto 1fr; gap: 11px;
padding: 13px 15px; border-radius: var(--r);
background: var(--surface); font-size: var(--t-md);
}
.mn-alert-title { font-weight: 500; }
.mn-alert-body { color: var(--fg-muted); margin-top: 3px; line-height: 1.55; }
.mn-alert-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-soft); }
.mn-alert-ok { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-soft); }
/* ----------------------------------------------------------------- LISTAS */
.mn-row {
display: flex; align-items: center; gap: 11px;
padding: 11px 12px; border-radius: var(--r-in);
cursor: pointer; transition: background-color var(--fast) var(--ease);
}
.mn-row:hover { background: var(--veil-1); }
.mn-row + .mn-row { box-shadow: inset 0 1px 0 var(--line-soft); }
.mn-table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.mn-table th {
height: 36px; padding: 0 12px; text-align: left;
font-size: var(--t-xs); font-weight: 400; color: var(--fg-muted);
border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
.mn-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); }
.mn-table tbody tr:last-child td { border-bottom: 0; }
.mn-table tbody tr { transition: background-color var(--fast) var(--ease); }
.mn-table tbody tr:hover { background: var(--veil-1); }
.mn-num-cell { text-align: right; font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------ NAVEGAÇÃO */
.mn-nav-item {
display: flex; align-items: center; gap: 10px;
height: var(--h-ctl); padding-inline: 12px;
border-radius: var(--r-in); cursor: pointer;
color: var(--fg-muted); background: transparent;
transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mn-nav-item:hover { background: var(--veil-2); color: var(--fg); }
.mn-nav-item[aria-current="page"], .mn-nav-item.is-active {
background: var(--accent-soft); color: var(--accent);
}
.mn-tabs { display: inline-flex; gap: 3px; padding: 3px; background: var(--veil-2); border-radius: var(--r-in); }
.mn-tab {
height: 28px; padding-inline: 12px;
display: inline-flex; align-items: center;
font-family: inherit; font-size: var(--t-sm); font-weight: 500;
color: var(--fg-muted); background: transparent;
border: 0; border-radius: var(--r-sm); cursor: pointer;
transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mn-tab:hover { color: var(--fg); }
.mn-tab[aria-selected="true"], .mn-tab.is-active { background: var(--surface); color: var(--fg); }
/* ------------------------------------------- CAMADAS FLUTUANTES (vidro)
Só aqui. Card, tabela e seção permanecem sólidos. */
.mn-float {
background: var(--float);
-webkit-backdrop-filter: blur(14px) saturate(170%);
backdrop-filter: blur(14px) saturate(170%);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shine), var(--shadow-float);
}
@supports not (backdrop-filter: blur(1px)) {
.mn-float { background: var(--surface); }
}
.mn-topbar {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; gap: 14px;
height: 60px; padding-inline: 32px;
background: var(--float);
-webkit-backdrop-filter: blur(14px) saturate(170%);
backdrop-filter: blur(14px) saturate(170%);
border-bottom: 1px solid var(--line);
box-shadow: var(--shine);
}
.mn-menu { padding: 5px; }
.mn-menu-item {
display: flex; align-items: center; gap: 9px;
height: 32px; padding-inline: 10px; border-radius: var(--r-sm);
color: var(--fg-muted); cursor: pointer;
transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mn-menu-item:hover { background: var(--veil-2); color: var(--fg); }
.mn-menu-item-danger { color: var(--danger); }
.mn-menu-item-danger:hover { background: var(--danger-soft); }
.mn-menu-sep { height: 1px; margin: 4px 7px; background: var(--line); }
.mn-tooltip { display: inline-block; padding: 7px 10px; font-size: var(--t-sm); border-radius: var(--r-sm); }
.mn-toast { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; }
.mn-overlay {
position: fixed; inset: 0; z-index: 100;
display: grid; place-items: center; padding: 20px;
background: var(--scrim);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
animation: mn-fade .14s var(--ease);
}
.mn-dialog { width: 100%; max-width: 400px; padding: 20px; animation: mn-rise .18s var(--ease); }
@keyframes mn-fade { from { opacity: 0 } }
@keyframes mn-rise { from { opacity: 0; transform: translateY(6px) scale(.98) } }
/* -------------------------------------------------------------- MEDIDORES */
.mn-bar { height: 4px; border-radius: 999px; background: var(--veil-3); overflow: hidden; }
.mn-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.mn-bar-fill-quiet { background: var(--veil-3); }
.mn-avatar {
width: 28px; height: 28px; border-radius: 999px; flex: none;
display: flex; align-items: center; justify-content: center;
font-size: 10.5px; font-weight: 500;
background: var(--veil-2); color: var(--fg-muted);
}
.mn-avatar-accent { background: var(--accent-soft); color: var(--accent); }
.mn-skeleton { background: var(--veil-2); border-radius: var(--r-sm); animation: mn-pulse 2s var(--ease) infinite; }
@keyframes mn-pulse { 50% { opacity: .5 } }
.mn-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 5px; padding: 30px 20px; text-align: center;
border: 1px dashed var(--line); border-radius: var(--r);
}
/* ------------------------------------------------ PONTES DE COMPATIBILIDADE
Nomes antigos apontam para os tokens novos: páginas legadas herdam as
cores certas sem reescrita imediata. */
:root {
--accent-hover-legacy: var(--accent-hover);
--mn-accent: var(--accent); --mn-bg: var(--bg); --mn-surface: var(--surface);
--mn-text: var(--fg); --mn-text-muted: var(--fg-muted); --mn-line: var(--line);
--mn-success: var(--ok); --mn-warning: var(--warn); --mn-danger: var(--danger);
--mn-beam: var(--accent); --mn-void: var(--bg); --mn-muted: var(--fg-muted);
--text-primary: var(--fg); --text-secondary: var(--fg-muted); --divider: var(--line);
--color-green: var(--ok); --color-red: var(--danger); --color-yellow: var(--warn);
--control-bg: var(--field-bg); --control-border: var(--field-line);
--row-hover: var(--veil-1); --scrollbar-thumb: var(--veil-3);
}
@media print { .mn-topbar, .mn-float, .mn-overlay { display: none !important; } }
/* --------------------------------------------- ALTERNADOR DE TEMA (ícones)
O botão recebe sol e lua; mostramos só o que faz sentido no tema atual. */
.mn-theme-toggle .mn-icon-sun { display: none; }
.mn-theme-toggle .mn-icon-moon { display: block; }
:root[data-theme="dark"] .mn-theme-toggle .mn-icon-sun { display: block; }
:root[data-theme="dark"] .mn-theme-toggle .mn-icon-moon { display: none; }
.mn-theme-toggle svg { width: 16px; height: 16px; }
/* ============================================================================
PONTES COMPLETAS PARA PÁGINAS LEGADAS
As páginas antigas (área de membros, notas, comunidade, checkout) consomem
~128 nomes de variável herdados de temas anteriores. Em vez de reescrever
todas de uma vez, mapeamos cada nome antigo para o token novo — assim elas
passam a respeitar o tema imediatamente, e a migração para as classes .mn-*
pode acontecer arquivo a arquivo, sem pressa.
========================================================================= */
:root {
/* superfícies */
--bg-angle: 180deg;
--bg-page: var(--bg);
--bg-start: var(--bg);
--bg-end: var(--bg);
--bg-elev: var(--surface);
--card-bg: var(--surface);
--sidebar-bg: var(--surface-soft);
--header-bg: var(--surface-soft);
--modal-bg: var(--float);
--modal-content: var(--surface);
--preview-bg: var(--surface-soft);
--editor-bg: var(--surface);
--editor-toolbar: var(--surface-soft);
--toc-bg: var(--surface-soft);
--toc-mobile-btn: var(--surface);
--callout-bg: var(--veil-1);
--code-bg: var(--surface-soft);
--inline-code-bg: var(--veil-2);
--inline-code-color: var(--fg);
--yt-bg: var(--surface-soft);
/* vidro (só as camadas flutuantes o utilizam) */
--glass-bg-card: var(--float);
--glass-bg-window: var(--float);
--glass-bg-sidebar: var(--surface-soft);
--glass-bg-toolbar: var(--float);
--glass-border-inner: var(--line-soft);
--glass-border-outer: var(--line);
--glass-blur: blur(14px) saturate(170%);
--glass-highlight: var(--shine);
--glass-highlight-top: var(--shine);
--highlight-top: var(--shine);
--glass-shadow: var(--shadow-float);
/* texto */
--text: var(--fg);
--text-main: var(--fg);
--text-bold: var(--fg);
--text-muted: var(--fg-muted);
--text-sub: var(--fg-muted);
--text-light: var(--fg-muted);
--text-tertiary: var(--fg-subtle);
--blockquote-color: var(--fg-muted);
--file-color: var(--fg-muted);
/* traços */
--border: var(--line);
--border-light: var(--line-soft);
--border-subtle: var(--line-soft);
--border-heavy: var(--line);
--card-border: var(--line);
--card-border-soft: var(--line-soft);
--hairline: var(--line);
--grid: var(--line-soft);
--grid-color: var(--line-soft);
--input-border: var(--field-line);
--input-bg: var(--field-bg);
--control-bg-hover: var(--field-bg-hover);
--control-shadow: none;
/* marca e ações */
--primary: var(--accent);
--primary-hover: var(--accent-hover);
--primary-glow: var(--accent-ring);
--accent-2: var(--accent-hover);
--mn-accent-hover: var(--accent-hover);
--mac-blue: var(--accent);
--mac-focus-ring: var(--accent-ring);
--btn-bg: var(--veil-2);
--btn-hover: var(--veil-3);
--mn-beam-soft: var(--accent-hover);
--mn-beam-dim: var(--accent-soft);
--mn-blue-300: var(--accent-hover);
/* estados */
--success: var(--ok);
--green: var(--ok);
--mac-green: var(--ok);
--warning: var(--warn);
--gold: var(--warn);
--mac-yellow: var(--warn);
--red: var(--danger);
--mac-red: var(--danger);
--mn-coral: var(--danger);
--mn-coral-500: var(--danger);
--color-purple: #8B5CF6;
--mn-violet-500: #8B5CF6;
--badge-success-bg: var(--ok-soft);
--badge-warning-bg: var(--warn-soft);
--badge-error-bg: var(--danger-soft);
--badge-info-bg: var(--accent-soft);
--badge-promo-bg: rgba(139, 92, 246, .15);
/* superfícies do vocabulário antigo da marca */
--mn-surface-2: var(--surface-soft);
--mn-surface-hi: var(--surface-high);
--mn-faint: var(--fg-subtle);
--mn-line-strong: var(--line);
/* sombras — o sistema quase não usa; mantidas discretas */
--shadow-xs: none;
--shadow-sm: none;
--shadow-md: var(--shadow-float);
--shadow-lg: var(--shadow-float);
--shadow-card: none;
--card-shadow: none;
--card-hover-shadow: var(--shadow-float);
--mn-shadow-card: none;
--mn-shadow-lift: var(--shadow-float);
/* forma */
--card-radius: var(--r);
--radius-md: var(--r-in);
--mn-r-card: var(--r);
--mn-r-btn: var(--r-in);
--mn-r-icon: var(--r-sm);
/* tipografia legada */
--font-family: var(--font);
--font-system: var(--font);
--mn-font: var(--font);
--mn-serif: var(--font);
--mn-t--1: var(--t-xs);
--mn-t-0: var(--t-md);
--mn-t-1: var(--t-lg);
--mn-t-2: var(--t-xl);
--mn-t-3: var(--t-2xl);
--mn-shell: 1200px;
--mn-gutter: 32px;
/* movimento */
--mn-ease: var(--ease);
--mn-fast: var(--fast);
--mn-normal: .22s;
--mn-slow: .38s;
/* camadas */
--z-sidebar: 40; --z-toolbar: 45; --z-dropdown: 60; --z-modal: 100; --z-toast: 110;
--scrollbar-thumb-hover: var(--fg-subtle);
/* efeitos decorativos de páginas antigas — neutralizados de propósito:
o sistema não usa aurora/spotlight/glow colorido. */
--aurora-1: transparent;
--aurora-2: transparent;
--aurora-3: transparent;
--spotlight-color: var(--accent-soft);
--elev-band: var(--surface-soft);
--yt-play: var(--accent);
--yt-play-hover: var(--accent-hover);
}
/* ============================================================================
FORMULÁRIO DA LISTA DE ESPERA (.mn-field, .mn-join, .mn-done)
Classes usadas por comunidade/espera.php e pelo handler em midnight.js.
========================================================================= */
.mn-skip {
position: absolute; left: -9999px; top: 0; z-index: 200;
padding: 10px 16px; background: var(--accent); color: var(--on-accent);
border-radius: var(--r-in);
}
.mn-skip:focus { left: 16px; top: 16px; }
.mn-join {
background: var(--surface); border-radius: var(--r); padding: 26px 24px;
}
.mn-join__head { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.03em; }
.mn-join__sub { color: var(--fg-muted); margin-top: 7px; margin-bottom: 20px; }
.mn-field { display: block; margin-bottom: 14px; }
.mn-field__label {
display: block; margin-bottom: 7px;
font-size: var(--t-xs); color: var(--fg-muted);
}
.mn-field__input {
display: block; width: 100%; height: var(--h-field); padding: 0 12px;
font-family: inherit; font-size: var(--t-md); color: var(--fg);
background: var(--field-bg); border: 1px solid var(--field-line);
border-radius: var(--r-in); outline: none;
transition: background-color var(--fast) var(--ease),
border-color var(--fast) var(--ease),
box-shadow var(--fast) var(--ease);
}
.mn-field__input::placeholder { color: var(--fg-subtle); }
.mn-field__input:hover { background: var(--field-bg-hover); border-color: var(--field-line-hover); }
.mn-field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.mn-field__input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.mn-field__error { display: block; margin-top: 6px; font-size: var(--t-xs); color: var(--danger); }
/* honeypot: fora da tela, mas alcançável por bot */
.mn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mn-btn--wide { display: flex; width: 100%; height: var(--h-ctl-l); margin-top: 6px; }
.mn-alert {
margin-top: 12px; padding: 11px 13px;
background: var(--danger-soft); color: var(--danger);
border: 1px solid var(--danger-soft); border-radius: var(--r-in);
font-size: var(--t-sm);
}
.mn-trust {
display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px;
font-size: var(--t-sm); color: var(--fg-muted);
}
.mn-trust span { display: inline-flex; align-items: center; gap: 6px; }
.mn-trust svg { width: 14px; height: 14px; color: var(--ok); }
.mn-fine { margin-top: 14px; font-size: var(--t-xs); color: var(--fg-subtle); line-height: 1.55; }
/* confirmação após o envio */
.mn-done {
background: var(--surface); border-radius: var(--r);
padding: 34px 24px; text-align: center;
}
.mn-done__ring {
width: 52px; height: 52px; margin: 0 auto 16px;
display: grid; place-items: center; border-radius: 999px;
background: var(--ok-soft); color: var(--ok);
}
.mn-done__ring svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mn-done__head { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.03em; }
.mn-done__number {
display: block; margin: 14px 0 6px;
font-family: var(--mono); font-size: 40px; font-weight: 500;
letter-spacing: -.03em; color: var(--accent);
}
.mn-done__note { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; }