@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ============================================================
   MÉTODO I.M.A. — SYSTEM-WIDE DARK PREMIUM THEME
   Color palette sourced from Conversation_Lab.html (canonical IMA identity)
   ============================================================ */

/* ── 1. DARK THEME TOKENS (default) ── */
:root:not([data-theme="light"]), html.dark, html:not([data-theme="light"]) {
  /* Backgrounds — deep navy like the RPG Lab */
  --bg-base:        #0b1329;
  --bg-surface:     #131f37;
  --bg-card:        #131f37;
  --bg-card-hover:  #1c2b4c;
  --bg-overlay:     rgba(11, 19, 41, 0.92);
  --bg-glass:       rgba(19, 31, 55, 0.95);

  /* Text */
  --text-primary:   #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;
  --text-accent:    #38bdf8;

  /* Accent Palette (IMA RPG canonical) */
  --accent:         #38bdf8;   /* Cyan */
  --accent-light:   #7dd3fc;
  --accent-gold:    #fbbf24;
  --accent-emerald: #34d399;
  --accent-crimson: #f87171;
  --accent-indigo:  #818cf8;

  /* Borders */
  --border-subtle:  #1e293b;
  --border-default: #2d3e63;
  --border-strong:  rgba(56, 189, 248, 0.4);

  /* Buttons */
  --btn-bg:         #1e3a5f;
  --btn-text:       #f8fafc;
  --btn-border:     #38bdf8;
  --btn-bg-hover:   #38bdf8;
  --btn-text-hover: #000000;
}

/* ── 2. LIGHT THEME TOKENS ── */
[data-theme="light"] {
  --bg-base:        #f8fafc;
  --bg-surface:     #ffffff;
  --bg-card:        #ffffff;
  --bg-card-hover:  #f1f5f9;
  --bg-overlay:     rgba(248, 250, 252, 0.92);
  --bg-glass:       rgba(255, 255, 255, 0.95);

  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #64748b;
  --text-accent:    #0284c7;

  --accent:         #0284c7;
  --accent-light:   #38bdf8;
  --accent-gold:    #b45309;
  --accent-emerald: #047857;
  --accent-crimson: #dc2626;
  --accent-indigo:  #4338ca;

  --border-subtle:  #e2e8f0;
  --border-default: #cbd5e1;
  --border-strong:  rgba(2, 132, 199, 0.4);

  --btn-bg:         #e0f2fe;
  --btn-text:       #0369a1;
  --btn-border:     #0284c7;
  --btn-bg-hover:   #0284c7;
  --btn-text-hover: #ffffff;
}

/* ── 3. BASE STYLES ── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
}

/* ── 4. TYPOGRAPHY — Space Grotesk para headings ── */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .navbar-brand,
.font-heading, .nav-logo,
.feature-title, .ending-title, .coaching-title,
.rpg-title, .brand-tag {
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: -0.02em;
}

/* ── 5. CANTOS RETOS (IMA Standard) — Apenas componentes ── */
.btn, .btn-primary, .btn-login, .nav-login-btn,
button[class*="btn-"], .feature-card, .login-modal,
.debrief-card, .btn-action {
  border-radius: 0 !important;
}

/* ── 6. BOTÕES PRIMÁRIOS ── */
.btn, .btn-primary, .btn-login, .nav-login-btn, button[class*="btn-"] {
  font-family: 'Space Grotesk', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-primary, .btn-login, .nav-login-btn {
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  border: 1px solid var(--btn-border);
}

.btn-primary:hover, .btn-login:hover, .nav-login-btn:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}

.btn-secondary {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
}

.btn-secondary:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  border-color: var(--btn-bg-hover);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}

/* ── 7. NAVBAR & SIDEBAR ── */
.navbar, aside {
  background: var(--bg-overlay) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-color: var(--border-subtle) !important;
}

/* ── 8. MODALS & CARDS ── */
.login-modal, .feature-card, .debrief-card {
  background: var(--bg-glass) !important;
  border: 1px solid var(--border-default) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
}

/* ── 9. GRID DE FUNDO (Dark Mode) ── */
:root:not([data-theme="light"]) body::before,
html:not([data-theme="light"]) body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.012) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ── 10. TAILWIND DARK MODE COLOR FIXES ── */
.dark\:bg-zinc-900, .bg-zinc-900 { background-color: var(--bg-surface) !important; }
.dark\:bg-zinc-950, .bg-zinc-950 { background-color: var(--bg-base) !important; }
.dark\:bg-zinc-800, .bg-zinc-800, .hover\:bg-zinc-800:hover { background-color: var(--bg-card-hover) !important; }
.dark\:border-zinc-800, .border-zinc-800 { border-color: var(--border-default) !important; }
.dark\:text-zinc-100, .text-zinc-100 { color: var(--text-primary) !important; }
.dark\:text-zinc-300, .text-zinc-300 { color: var(--text-secondary) !important; }
.dark\:text-zinc-400, .text-zinc-400 { color: var(--text-muted) !important; }

/* ── 11. GLOW ACCENT ── */
.text-blue-400, .text-sky-400 { color: var(--accent) !important; }
.border-blue-500, .border-sky-500 { border-color: var(--accent) !important; }

/* ── 12. RESPONSIVE MOBILE DRAWER (Fase 26) ── */
@media (max-width: 767px) {
  aside {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    z-index: 50 !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
  }
  aside.mobile-drawer-active {
    transform: translateX(0) !important;
  }
}
/* ============================================================
   TAILWIND OPACITY FIXES FOR LIGHT MODE
   Automatically maps hardcoded dark-mode opacity backgrounds
   to the correct CSS variables using color-mix()
   ============================================================ */
.bg-zinc-900\/40 { background-color: color-mix(in srgb, var(--bg-surface) 40%, transparent) !important; }
.bg-zinc-900\/50 { background-color: color-mix(in srgb, var(--bg-surface) 50%, transparent) !important; }
.bg-zinc-900\/60 { background-color: color-mix(in srgb, var(--bg-surface) 60%, transparent) !important; }
.bg-zinc-900\/70 { background-color: color-mix(in srgb, var(--bg-surface) 70%, transparent) !important; }
.bg-zinc-900\/90 { background-color: color-mix(in srgb, var(--bg-surface) 90%, transparent) !important; }

.bg-zinc-800\/40 { background-color: color-mix(in srgb, var(--bg-card-hover) 40%, transparent) !important; }
.bg-zinc-800\/50 { background-color: color-mix(in srgb, var(--bg-card-hover) 50%, transparent) !important; }
.bg-zinc-800\/70 { background-color: color-mix(in srgb, var(--bg-card-hover) 70%, transparent) !important; }
.bg-zinc-800\/80 { background-color: color-mix(in srgb, var(--bg-card-hover) 80%, transparent) !important; }

.bg-indigo-950\/40 { background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.bg-indigo-950\/60 { background-color: color-mix(in srgb, var(--accent) 15%, transparent) !important; }
.bg-cyan-950\/30 { background-color: color-mix(in srgb, var(--accent-light) 10%, transparent) !important; }

.border-zinc-800\/80 { border-color: color-mix(in srgb, var(--border-default) 80%, transparent) !important; }
.border-zinc-800\/50 { border-color: color-mix(in srgb, var(--border-default) 50%, transparent) !important; }
.dark\:text-zinc-200, .text-zinc-200 { color: var(--text-primary) !important; }
.dark\:text-zinc-50, .text-zinc-50 { color: var(--text-primary) !important; }
.dark\:text-zinc-600, .text-zinc-600 { color: var(--text-muted) !important; }
.dark\:border-zinc-600, .border-zinc-600 { border-color: var(--border-default) !important; }
.dark\:border-zinc-700, .border-zinc-700 { border-color: var(--border-default) !important; }
.dark\:border-zinc-900, .border-zinc-900 { border-color: var(--border-default) !important; }







/* Proteger containers escuros no modo claro */
.force-dark-text, .force-dark-text * {
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
}
.force-dark-text .text-zinc-100 { color: #f4f4f5 !important; }
.force-dark-text .text-zinc-200 { color: #e4e4e7 !important; }
.force-dark-text .text-zinc-300 { color: #d4d4d8 !important; }
.force-dark-text .text-zinc-400 { color: #a1a1aa !important; }
.force-dark-text .text-indigo-400 { color: #818cf8 !important; }
.force-dark-text .text-indigo-300 { color: #a5b4fc !important; }