/* ═══════════════════════════════════════════════════════════════════
   ΩMEGA DESIGN SYSTEM — "Graphite Inox Industrial"
   Conceito: Industrial Cognitive Core
   Não é dark mode. É: grafite fosco + inox escovado + HUD operacional.
   ═══════════════════════════════════════════════════════════════════

   ARQUITETURA DE CAMADAS VISUAIS:
     Camada 1 — Estrutural  → grafite fosco    (bg-0..3)
     Camada 2 — Mecânica    → inox escovado    (metal-0..2)
     Camada 3 — Cognitiva   → azul elétrico controlado (active)
     Camada 4 — Crítica     → âmbar / vermelho cirúrgico

   SEMÂNTICA:
     Interface passiva → metálica (--metal-*)
     Interface viva    → azul controlado (--active-*)
*/

:root {
  /* ── Estrutural — Grafite neutro absoluto (sem roxo/azul) ─────── */
  --bg-0:   #0a0a0a;
  --bg-1:   #171717;
  --bg-2:   #1e1e1e;
  --bg-3:   #242424;
  --bg-4:   #2a2a2a;

  /* ── Mecânica — Inox escovado ────────────────────────────────── */
  --metal-0: #aeb6bf;   /* inox claro */
  --metal-1: #c7d0da;   /* inox polido */
  --metal-2: #8f99a4;   /* inox médio */
  --metal-3: #6a7480;   /* grafite metálico */
  --metal-4: #4a5560;   /* grafite escuro */

  /* ── Accent operacional — passivo, não neon ──────────────────── */
  --accent:       #8fa3ad;
  --accent-hover: #a8bbc4;
  --accent-dim:   #6a8090;

  /* ── Cognitiva — azul controlado (SOMENTE estados vivos) ─────── */
  --active-0:    #2d6a8f;   /* azul aço profundo */
  --active-1:    #3d88b8;   /* azul elétrico controlado */
  --active-glow: rgba(61, 136, 184, 0.18);
  --pulse-glow:  rgba(61, 136, 184, 0.28);

  /* ── Crítica — âmbar e vermelho cirúrgico ────────────────────── */
  --warn:    #b07828;
  --warn-bg: rgba(176, 120, 40, 0.12);
  --error:   #a04040;
  --error-bg:rgba(160, 64, 64, 0.12);

  /* ── ΩMEGA Brand (YouTube / Canal) ───────────────────────────── */
  --omega-cyan:      #44aaff;   /* ação ativa — IA agindo */
  --omega-cyan-dim:  rgba(68,170,255,0.12);
  --ring1-orange:    #ffaa00;   /* muro operacional — bloqueio/alerta */
  --ring1-orange-dim:rgba(255,170,0,0.12);

  /* ── Sucesso — verde inox muted ──────────────────────────────── */
  --success:    #4a8a6a;
  --success-bg: rgba(74, 138, 106, 0.12);

  /* ── Texto ───────────────────────────────────────────────────── */
  --text-0: #c7d0da;   /* metal-1 — títulos */
  --text-1: #9aa5b0;   /* metal entre 0 e 2 — corpo */
  --text-2: #6a7888;   /* metal-3 muted — secundário */
  --text-3: #4a5868;   /* muito muted — hints */

  /* ── Bordas — extremamente sutis ────────────────────────────── */
  --border-0: rgba(255, 255, 255, 0.06);   /* estrutural */
  --border-1: rgba(210, 220, 230, 0.08);   /* painel */
  --border-2: rgba(210, 220, 230, 0.12);   /* hover */
  --border-3: rgba(143, 163, 173, 0.20);   /* foco / seleção */

  /* ── Superfícies ─────────────────────────────────────────────── */
  --surface-glass: rgba(18, 18, 18, 0.88);
  --surface-panel: rgba(26, 26, 26, 0.72);
  --surface-card:  rgba(36, 36, 36, 0.60);
  --surface-hover: rgba(44, 44, 44, 0.80);

  /* ── Sombras ─────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.55);
  --inset-border: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   OVERRIDES GLOBAIS — aplica o sistema nas camadas que CSS controla
   ═══════════════════════════════════════════════════════════════════ */

html {
  background-color: var(--bg-0) !important;
  color: var(--text-1) !important;
}

body {
  background-color: var(--bg-0) !important;
  color: var(--text-1) !important;
}

/* ── Remoção de Focus nativo (Azul do Browser) ─────────────────── */
* {
  -webkit-tap-highlight-color: transparent !important;
}

:focus {
  outline: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* ── Nav ───────────────────────────────────────────────────────── */
nav {
  background: var(--surface-glass) !important;
  border-bottom: 1px solid var(--border-0) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  overflow: visible !important;
}

nav a {
  color: var(--text-2) !important;
  transition: color 0.2s ease !important;
}
nav a:not(.btn):hover { color: var(--metal-0) !important; }

/* ── Header / Hero ─────────────────────────────────────────────── */
header {
  border-bottom: 1px solid var(--border-0) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* ── Títulos ───────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  color: var(--text-0) !important;
}

/* ── Painéis / Cards ───────────────────────────────────────────── */
.container {
  color: var(--text-1);
}

.highlight {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Botões ────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent) !important;
  color: var(--bg-0) !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: 0 0 0 1px rgba(143,163,173,0.2) !important;
  transition: all 0.2s ease !important;
}
.btn-primary:hover {
  background: var(--accent-hover) !important;
  color: var(--bg-0) !important;
  box-shadow: 0 0 12px rgba(143,163,173,0.15) !important;
}

.btn-secondary {
  background: transparent !important;
  color: var(--metal-2) !important;
  border: 1px solid var(--border-2) !important;
  transition: all 0.2s ease !important;
}
.btn-secondary:hover {
  border-color: var(--border-3) !important;
  color: var(--metal-0) !important;
  background: var(--surface-hover) !important;
}

/* ── Status cards ──────────────────────────────────────────────── */
.status-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: var(--inset-border), var(--shadow-sm) !important;
}
.status-card:hover {
  border-color: var(--border-2) !important;
  background: var(--bg-3) !important;
}

/* ── Badges ────────────────────────────────────────────────────── */
.badge-ok {
  background: var(--success-bg) !important;
  color: var(--success) !important;
  border: 1px solid rgba(74,138,106,0.25) !important;
}
.badge-warn {
  background: var(--warn-bg) !important;
  color: var(--warn) !important;
  border: 1px solid rgba(176,120,40,0.25) !important;
}
.badge-local {
  background: rgba(45,106,143,0.12) !important;
  color: var(--active-1) !important;
  border: 1px solid rgba(61,136,184,0.2) !important;
}

/* ── Estados ATIVOS (Unificando com a paleta Accent) ─────── */
.active, [class*="active"],
.category-btn.active {
  color: var(--accent) !important;
  border-color: rgba(143,163,173,0.35) !important;
  background: rgba(143,163,173,0.08) !important;
  box-shadow: 0 0 8px rgba(143,163,173,0.14) !important;
}

/* ── Links ─────────────────────────────────────────────────────── */
a {
  color: var(--metal-2) !important;
  text-decoration: none !important;
}
a:not(.btn):hover { color: var(--metal-0) !important; }

/* Links de ação (CTAs inline) */
.contact-cta a:not(.btn),
.cta a:not(.btn),
[class*="cta"] a:not(.btn) {
  color: var(--accent) !important;
}

/* ── Footer ────────────────────────────────────────────────────── */
footer {
  background: var(--bg-1) !important;
  border-top: 1px solid var(--border-0) !important;
  color: var(--text-3) !important;
}
footer a { color: var(--text-2) !important; }
footer a:not(.btn):hover { color: var(--metal-0) !important; }

/* ── Código / Pre ───────────────────────────────────────────────── */
code, pre, .code-block {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-1) !important;
  color: var(--metal-0) !important;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
}

/* ── Tabelas ───────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th {
  background: var(--bg-3) !important;
  color: var(--metal-0) !important;
  border-bottom: 1px solid var(--border-2) !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  text-transform: uppercase;
}
td {
  border-bottom: 1px solid var(--border-0) !important;
  color: var(--text-1) !important;
}
tr:hover td { background: var(--surface-hover) !important; }

/* ── Language picker (i18n) ────────────────────────────────────── */
.language-picker {
  background: rgba(20, 20, 20, 0.85) !important;
  border: 1px solid var(--border-1) !important;
  box-shadow: none !important;
}
.language-picker:hover {
  border-color: var(--border-2) !important;
}
.language-picker select {
  background-color: var(--bg-1) !important;
  color: var(--text-0) !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa3ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  background-size: 16px !important;
  border: none !important;
  outline: none !important;
}
.language-picker select:hover {
  background-color: var(--bg-2) !important;
}
.language-picker select:focus {
  background-color: var(--bg-1) !important;
  outline: 1px solid var(--accent) !important;
  outline-offset: -2px !important;
}
.language-picker select option {
  background-color: var(--bg-2) !important;
  color: var(--text-0) !important;
}

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq-item {
  border: 1px solid var(--border-0) !important;
  background: var(--surface-panel) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
}
.faq-question {
  color: var(--text-0) !important;
}
.faq-answer {
  color: var(--text-1) !important;
  border-top: 1px solid var(--border-0) !important;
}

/* ── Glow ambiental — SOMENTE em pulse/live ─────────────────────── */
.ambient-glow {
  background: radial-gradient(
    ellipse 40% 30% at 15% 40%,
    rgba(143, 143, 143, 0.03) 0%,
    transparent 70%
  ) !important;
}
.ambient-glow-right {
  background: radial-gradient(
    ellipse 40% 30% at 85% 60%,
    rgba(143, 143, 143, 0.02) 0%,
    transparent 70%
  ) !important;
}

/* ── Scroll customizado ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb {
  background: var(--metal-4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--metal-3); }

/* ── Seleção de texto ───────────────────────────────────────────── */
::selection {
  background: rgba(61, 136, 184, 0.25);
  color: var(--metal-1);
}

/* ── Correção de Autofill (Browser) ────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--text-0) !important;
}