/* ============================================================ MULTIHANGAR — SISTEMA DE TEMA (tokens) ------------------------------------------------------------ Fonte unica de cor do site publico. Contrato (o mesmo ja usado na area do anunciante): -> tema escuro (PADRAO) -> tema claro localStorage.mh_theme = 'dark' | 'light' Regras de uso: - Nenhum arquivo CSS do site deve declarar cor literal. Se precisar de uma cor nova, crie o token aqui. - Nenhum outro arquivo pode declarar :root { --gold: ... }. Esse bloco e o unico dono das variaveis globais. - tema.css entra ANTES dos demais CSS da pagina. Escalas: --mh-fill-NN superficie / borda / hover (branco no dark, grafite no light) --mh-ink-NN texto / icone (branco no dark, grafite no light) O numero e ORDINAL, nao e o alfa: a escala foi calibrada por contraste, entao ink-35 nao vale 0.35. ink-30 para baixo e tier decorativo (divisor, filete), nao use para texto que precisa ser lido. --mh-gold-NN vus douradas ============================================================ */ :root, [data-theme="dark"] { /* ---------- 1. ESCALA NEUTRA — superficie, borda, hover ---------- */ --mh-fill-01: rgba(255, 255, 255, 0.01); --mh-fill-02: rgba(255, 255, 255, 0.02); --mh-fill-03: rgba(255, 255, 255, 0.03); --mh-fill-04: rgba(255, 255, 255, 0.04); --mh-fill-05: rgba(255, 255, 255, 0.05); --mh-fill-06: rgba(255, 255, 255, 0.06); --mh-fill-08: rgba(255, 255, 255, 0.08); --mh-fill-10: rgba(255, 255, 255, 0.10); --mh-fill-12: rgba(255, 255, 255, 0.12); --mh-fill-15: rgba(255, 255, 255, 0.15); --mh-fill-20: rgba(255, 255, 255, 0.20); --mh-fill-25: rgba(255, 255, 255, 0.25); --mh-fill-30: rgba(255, 255, 255, 0.30); /* ---------- 2. ESCALA DE TEXTO ---------- */ --mh-ink: #ffffff; --mh-ink-95: rgba(255, 255, 255, 0.95); --mh-ink-90: rgba(255, 255, 255, 0.90); --mh-ink-80: rgba(255, 255, 255, 0.82); --mh-ink-75: rgba(255, 255, 255, 0.78); --mh-ink-70: rgba(255, 255, 255, 0.74); --mh-ink-65: rgba(255, 255, 255, 0.70); --mh-ink-60: rgba(255, 255, 255, 0.66); --mh-ink-55: rgba(255, 255, 255, 0.62); --mh-ink-50: rgba(255, 255, 255, 0.58); --mh-ink-45: rgba(255, 255, 255, 0.55); --mh-ink-40: rgba(255, 255, 255, 0.52); --mh-ink-35: rgba(255, 255, 255, 0.49); --mh-ink-30: rgba(255, 255, 255, 0.44); --mh-ink-25: rgba(255, 255, 255, 0.40); --mh-ink-20: rgba(255, 255, 255, 0.35); --mh-ink-15: rgba(255, 255, 255, 0.30); /* ---------- 3. SUPERFICIES ---------- */ --mh-bg: #0a0a1a; /* fundo da pagina */ --mh-bg-alt: #0d1424; /* faixa de secao alternada */ --mh-bg-deep: #070912; /* rodape / base do hero */ --mh-surface: rgba(255, 255, 255, 0.03); /* card em veu */ --mh-surface-2: rgba(255, 255, 255, 0.05); /* card em veu, 2o nivel */ --mh-surface-solid: #14162b; /* card opaco */ --mh-elevated: #16182e; /* dropdown, modal, popover */ --mh-navbar: rgba(10, 10, 26, 0.92); --mh-navbar-scrolled: rgba(10, 10, 26, 0.98); --mh-overlay: rgba(4, 6, 14, 0.72); /* backdrop de modal */ --mh-input: rgba(255, 255, 255, 0.04); --mh-input-focus: rgba(255, 255, 255, 0.07); --mh-skeleton-a: rgba(255, 255, 255, 0.04); --mh-skeleton-b: rgba(255, 255, 255, 0.09); /* ---------- 4. BORDAS ---------- */ --mh-border: rgba(255, 255, 255, 0.06); --mh-border-soft: rgba(255, 255, 255, 0.04); --mh-border-strong: rgba(255, 255, 255, 0.12); --mh-border-gold: rgba(199, 167, 110, 0.30); /* ---------- 5. DOURADO (marca) ---------- */ --mh-gold: #c7a76e; /* fundo de botao, filete, icone decorativo */ --mh-gold-hover: #d4b87a; --mh-gold-ink: #c7a76e; /* dourado quando e TEXTO */ --mh-gold-light: #e8d5a3; /* parada clara de gradiente */ --mh-gold-deep: #a07c3e; /* parada escura de gradiente */ --mh-on-gold: #0a0a1a; /* texto EM CIMA de dourado */ --mh-gold-02: rgba(199, 167, 110, 0.02); --mh-gold-03: rgba(199, 167, 110, 0.03); --mh-gold-04: rgba(199, 167, 110, 0.04); --mh-gold-05: rgba(199, 167, 110, 0.05); --mh-gold-06: rgba(199, 167, 110, 0.06); --mh-gold-08: rgba(199, 167, 110, 0.08); --mh-gold-10: rgba(199, 167, 110, 0.10); --mh-gold-12: rgba(199, 167, 110, 0.12); --mh-gold-15: rgba(199, 167, 110, 0.15); --mh-gold-20: rgba(199, 167, 110, 0.20); --mh-gold-25: rgba(199, 167, 110, 0.25); --mh-gold-30: rgba(199, 167, 110, 0.30); --mh-gold-35: rgba(199, 167, 110, 0.35); --mh-gold-40: rgba(199, 167, 110, 0.40); --mh-gold-50: rgba(199, 167, 110, 0.50); --mh-gold-90: rgba(199, 167, 110, 0.90); /* ---------- 6. ESTADOS ---------- */ --mh-success: #22c55e; --mh-success-ink: #22c55e; --mh-success-soft: rgba(34, 197, 94, 0.12); --mh-success-border: rgba(34, 197, 94, 0.30); --mh-danger: #ef4444; --mh-danger-ink: #ef4444; --mh-danger-soft: rgba(239, 68, 68, 0.12); --mh-danger-border: rgba(239, 68, 68, 0.30); --mh-danger-strong: rgba(239, 68, 68, 0.80); --mh-warning: #f59e0b; --mh-warning-ink: #eab308; --mh-warning-soft: rgba(245, 158, 11, 0.12); --mh-warning-border: rgba(245, 158, 11, 0.30); --mh-info: #3b82f6; --mh-info-ink: #3b82f6; --mh-info-soft: rgba(59, 130, 246, 0.10); --mh-info-border: rgba(59, 130, 246, 0.30); --mh-purple: #8b5cf6; --mh-purple-soft: rgba(139, 92, 246, 0.10); --mh-purple-border: rgba(139, 92, 246, 0.20); /* texto que fica SEMPRE por cima de cor saturada */ --mh-on-accent: #ffffff; /* ---------- 7. SOMBRAS ---------- */ --mh-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --mh-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --mh-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.50); --mh-shadow-gold: 0 8px 24px rgba(199, 167, 110, 0.30); --mh-ring-gold: 0 0 0 3px rgba(199, 167, 110, 0.15); --mh-ring-info: 0 0 0 3px rgba(59, 130, 246, 0.15); /* ---------- 8. GRADIENTES ---------- */ --mh-grad-gold: linear-gradient(135deg, #c7a76e, #e8d5a3); --mh-grad-gold-deep: linear-gradient(135deg, #c7a76e, #a07c3e); --mh-grad-ai: linear-gradient(135deg, #3b82f6, #8b5cf6); --mh-grad-brand: linear-gradient(135deg, #0d1424, #0a0a1a); --mh-glow-gold: radial-gradient(ellipse at 30% 50%, rgba(199, 167, 110, 0.08) 0%, transparent 60%); --mh-glow-info: radial-gradient(ellipse at 70% 30%, rgba(59, 130, 246, 0.06) 0%, transparent 50%); /* ---------- 9. ZONAS PERMANENTEMENTE ESCURAS ---------- Hero sobre foto, rodape institucional, bloco 
.
     NAO mudam entre os temas: o texto por cima e sempre claro. */
  --mh-zone:          #0a1628;
  --mh-zone-2:        #1a2d4a;
  --mh-zone-deep:     #0d1f38;
  --mh-zone-ink:      #ffffff;
  --mh-zone-ink-90:   rgba(255, 255, 255, 0.90);
  --mh-zone-ink-80:   rgba(255, 255, 255, 0.80);
  --mh-zone-ink-70:   rgba(255, 255, 255, 0.70);
  --mh-zone-ink-50:   rgba(255, 255, 255, 0.50);
  --mh-zone-ink-40:   rgba(255, 255, 255, 0.40);
  --mh-zone-fill-10:  rgba(255, 255, 255, 0.10);
  --mh-zone-fill-20:  rgba(255, 255, 255, 0.20);
  --mh-zone-border:   rgba(255, 255, 255, 0.12);
  --mh-photo-veil:    linear-gradient(to bottom, rgba(8, 11, 22, 0.72) 0%, rgba(8, 11, 22, 0.60) 45%, rgba(8, 11, 22, 0.94) 100%);
  /* Sombra para texto claro POR CIMA de foto. O veu sozinho nao resolve:
     numa foto de jato branco em ceu claro, escurecer o bastante para o texto
     ler apagaria a imagem. A sombra garante a leitura sem custar a foto. */
  --mh-zone-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 12px rgba(0, 0, 0, 0.35);
  --mh-photo-veil-strong: linear-gradient(180deg, rgba(10, 22, 40, 0.85) 0%, rgba(10, 22, 40, 0.95) 100%);
  --mh-photo-fade:    linear-gradient(transparent, rgba(0, 0, 0, 0.30));

  /* ---------- 10. MARCAS DE TERCEIROS (constantes) ---------- */
  --mh-whatsapp:        #25d366;
  --mh-whatsapp-hover:  #1da851;
  --mh-whatsapp-soft:   rgba(37, 211, 102, 0.12);
  --mh-whatsapp-border: rgba(37, 211, 102, 0.30);
  --mh-facebook:  #1877f2;
  --mh-twitter:   #1da1f2;
  --mh-linkedin:  #0a66c2;

  /* ---------- 11. NAO-COR ---------- */
  --mh-transition: all 0.3s ease;
  /* icone monocromatico de biblioteca (ex.: seta do accordion do Bootstrap),
     que so pode ser recolorido por filtro */
  --mh-icon-invert: invert(1);
  --mh-radius-sm: 8px;
  --mh-radius: 12px;
  --mh-radius-lg: 20px;

  /* seta de