/* ==========================================================================
   Premium UI/UX Theme for Reveal.js — Day & Night
   Sistema de Design com CSS Custom Properties
   Conformidade de Contraste: WCAG AA (mínimo 4.5:1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN SYSTEM — DARK / NIGHT (padrão)
   -------------------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --color-bg-start:    #0f172a;
  --color-bg-end:      #020617;

  /* Gradientes multicamadas */
  --gradient-bg:
    radial-gradient(circle at 15% 50%, rgba(16, 185, 129, 0.09), transparent 28%),
    radial-gradient(circle at 85% 30%, rgba(251, 191, 36, 0.07), transparent 28%),
    linear-gradient(160deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);

  --gradient-capa:
    radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.18), transparent 55%),
    linear-gradient(160deg, #0f172a 0%, #020617 100%);

  /* Texto — contraste ≥ 7:1 sobre #0f172a */
  --color-text-main:   #f1f5f9;   /* Slate 100   */
  --color-text-sub:    #cbd5e1;   /* Slate 300   */
  --color-text-muted:  #94a3b8;   /* Slate 400   */

  /* Acentos */
  --color-accent-green: #34d399;  /* Emerald 400 — brilhante no escuro */
  --color-accent-gold:  #fbbf24;  /* Amber 400   */
  --color-accent-red:   #f87171;  /* Red 400     */
  --color-accent-blue:  #60a5fa;  /* Blue 400    */

  /* Superfícies */
  --color-surface:       rgba(255, 255, 255, 0.04);
  --color-surface-hover: rgba(255, 255, 255, 0.08);
  --color-border:        rgba(255, 255, 255, 0.10);
  --color-highlight:     rgba(52, 211, 153, 0.15);

  /* Mockups (terminal, code blocks) */
  --color-mockup-bg:   rgba(2, 6, 23, 0.70);
  --color-mockup-text: #e2e8f0;
  --color-code-bg:     #020617;

  /* Sombras */
  --shadow-sm:  0 2px 6px  rgba(0,0,0,0.55);
  --shadow-md:  0 8px 28px rgba(0,0,0,0.75);

  /* Divisoras */
  --color-hr:  rgba(255, 255, 255, 0.12);

  /* Tipografia */
  --font-headings: 'Outfit', 'Inter', sans-serif;
  --font-body:     'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   2. TOKEN SYSTEM — LIGHT / DAY
   -------------------------------------------------------------------------- */
body.light-theme {
  /* Backgrounds */
  --color-bg-start:    #f8fafc;   /* Slate 50  */
  --color-bg-end:      #e2e8f0;   /* Slate 200 */

  --gradient-bg:
    radial-gradient(circle at 15% 50%, rgba(5, 150, 105, 0.06), transparent 28%),
    radial-gradient(circle at 85% 30%, rgba(217, 119, 6, 0.05), transparent 28%),
    linear-gradient(160deg, var(--color-bg-start) 0%, var(--color-bg-end) 100%);

  --gradient-capa:
    radial-gradient(circle at 50% 50%, rgba(5, 150, 105, 0.09), transparent 55%),
    linear-gradient(160deg, #ffffff 0%, #f1f5f9 100%);

  /* Texto — contraste ≥ 7:1 sobre #f8fafc */
  --color-text-main:   #0f172a;   /* Slate 900   */
  --color-text-sub:    #1e293b;   /* Slate 800   */
  --color-text-muted:  #475569;   /* Slate 600   */

  /* Acentos — versões mais escuras para contraste ≥ 4.5:1 em fundo claro */
  --color-accent-green: #065f46;  /* Emerald 900 */
  --color-accent-gold:  #92400e;  /* Amber 800   */
  --color-accent-red:   #991b1b;  /* Red 800     */
  --color-accent-blue:  #1e40af;  /* Blue 800    */

  /* Superfícies */
  --color-surface:       rgba(255, 255, 255, 0.85);
  --color-surface-hover: rgba(255, 255, 255, 1.00);
  --color-border:        rgba(15, 23, 42, 0.10);
  --color-highlight:     rgba(6, 95, 70, 0.10);

  /* Mockups (terminal, code blocks) */
  --color-mockup-bg:   rgba(248, 250, 252, 0.92);
  --color-mockup-text: #1e293b;
  --color-code-bg:     #f1f5f9;

  /* Sombras suaves */
  --shadow-sm:  0 1px 4px  rgba(0,0,0,0.07);
  --shadow-md:  0 6px 24px rgba(0,0,0,0.10);

  /* Divisoras */
  --color-hr:  rgba(15, 23, 42, 0.12);
}

/* --------------------------------------------------------------------------
   3. BACKGROUND GLOBAL — força o tema em toda a aplicação
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  transition:
    color           0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background      0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color    0.5s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow      0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

html,
body,
.reveal-viewport {
  background: var(--gradient-bg) !important;
  background-color: var(--color-bg-start) !important;
}

.reveal,
.reveal .backgrounds {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Limpa fundos individuais de seção (Reveal injeta .slide-background por slide) */
.slide-background,
.slide-background > .slide-background-content {
  background-color: transparent !important;
  background-image: none !important;
}

/* Imagens de fundo de slides (radio.png etc.): mantém no escuro, inverte no claro */
.slide-background-content img {
  transition: filter 0.5s ease;
}
body.light-theme .slide-background-content img {
  filter: invert(1) hue-rotate(180deg) brightness(0.8);
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA BASE
   -------------------------------------------------------------------------- */
.reveal {
  font-family: var(--font-body);
  color: var(--color-text-main);
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: var(--font-headings);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--color-text-main);
  margin-bottom: 12px;
}

.reveal p,
.reveal li {
  line-height: 1.65;
  font-size: 0.95em;
  color: var(--color-text-main);
}

.reveal strong { color: var(--color-text-sub); }

.reveal a {
  color: var(--color-accent-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reveal a:hover { opacity: 0.8; }

/* --------------------------------------------------------------------------
   5. UTILITÁRIOS
   -------------------------------------------------------------------------- */
.text-green  { color: var(--color-accent-green) !important; }
.text-accent { color: var(--color-accent-gold)  !important; }
.mt-4        { margin-top: 2rem !important; }

.section-title {
  font-size: 1.8em !important;
  color: var(--color-accent-green) !important;
  border-bottom: 2px solid var(--color-highlight);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.highlight-text {
  font-size: 1.05em !important;
  font-weight: 700;
  background: var(--color-highlight);
  color: var(--color-accent-green) !important;
  padding: 10px 22px;
  border-radius: 8px;
  display: inline-block;
  border: 1px solid var(--color-border);
}

.disclaimer {
  font-size: 0.65em !important;
  color: var(--color-text-muted) !important;
}

/* Separadores */
.reveal hr {
  border: none;
  border-top: 1px solid var(--color-hr);
  margin: 18px 0;
}

/* --------------------------------------------------------------------------
   6. CAPA — Primeiro Slide
   -------------------------------------------------------------------------- */
.slide-capa {
  background: var(--gradient-capa);
  border-radius: 24px;
  padding: 40px !important;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.slide-capa .logo-capa {
  max-width: 325px;
  margin-bottom: 28px;
}
.slide-capa .logo-capa:hover {
  transform: scale(1.02);
}

.slide-capa .title-primary {
  font-size: 1.8em;
  background: linear-gradient(135deg, var(--color-accent-green), var(--color-accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.15;
  margin-bottom: 0.5em;
}

.slide-capa .subtitle-primary {
  font-size: 1.0em;
  font-weight: 500;
  color: var(--color-text-muted);
}

.slide-capa .target-audience,
.slide-capa .duration {
  font-size: 0.75em;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   7. CARDS & GRIDS
   -------------------------------------------------------------------------- */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  text-align: left;
}

.cards-container {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 22px;
  flex: 1;
  text-align: left;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent-green);
  box-shadow: var(--shadow-md);
  background: var(--color-surface-hover);
}
.card h4 {
  font-size: 1.05em;
  color: var(--color-accent-green);
  margin-bottom: 10px;
}
.card p {
  font-size: 0.85em;
  margin: 0;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   8. ALERTAS & CALLOUTS
   -------------------------------------------------------------------------- */
.alert-box {
  background: var(--color-highlight);
  border-left: 4px solid var(--color-accent-green);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 12px 0;
  text-align: left;
  font-size: 0.85em;
  box-shadow: var(--shadow-sm);
  color: var(--color-text-main);
}
.alert-box.info {
  background: rgba(96, 165, 250, 0.10);
  border-left-color: var(--color-accent-blue);
}
.alert-box.warning {
  background: rgba(251, 191, 36, 0.10);
  border-left-color: var(--color-accent-gold);
}

.challenge-box,
.qa-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 18px 22px;
  border-radius: 16px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text-main);
}
.challenge-box h4,
.qa-box h4 {
  color: var(--color-text-main);
  margin-top: 0;
  margin-bottom: 12px;
}
.challenge-box ol {
  font-size: 0.85em;
  padding-left: 20px;
}
.challenge-box li {
  margin-bottom: 7px;
  color: var(--color-text-main);
}

/* --------------------------------------------------------------------------
   9. LISTAS ESTILIZADAS
   -------------------------------------------------------------------------- */
.styled-list {
  list-style: none !important;
  margin-left: 0 !important;
}
.styled-list li {
  margin-bottom: 14px;
  padding-left: 48px;
  position: relative;
  color: var(--color-text-main);
}
.styled-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent-green);
  font-weight: bold;
  font-size: 1.1em;
}

/* --------------------------------------------------------------------------
   10. MOCKUPS — Terminal / Código / Prompt Boxes
        Seletores de atributo capturam cores hardcoded do HTML
   -------------------------------------------------------------------------- */

/* Container escuro (prompt boxes, terminal wrapper) */
div[style*="background: rgba(0,0,0,0.6)"],
div[style*="background: rgba(0,0,0,0.4)"],
div[style*="background: rgba(255,255,255,0.05)"],
div[style*="background: #1e1e1e"],
div[style*="background: #000000"],
div[style*="background: #000"] {
  background:   var(--color-mockup-bg)  !important;
  color:        var(--color-mockup-text) !important;
  border-color: var(--color-border)     !important;
  box-shadow:   var(--shadow-md)        !important;
  backdrop-filter: blur(8px);
}

/* Painel preto do terminal cmd */
div[style*="background: #000000"],
div[style*="background: #000"] {
  background:   var(--color-code-bg)   !important;
  color:        var(--color-mockup-text) !important;
}

/* Barra de título do mockup Ollama/website (fundo branco hardcoded) */
div[style*="background: #ffffff"],
div[style*="background: rgba(255,255,255,"],
div[style*="background:#ffffff"] {
  background:   var(--color-surface)   !important;
  color:        var(--color-text-main)  !important;
}

/* Textos hardcoded claros → herdados do sistema */
*[style*="color: #ffffff"],
*[style*="color: #fff"],
*[style*="color: #e0e6e2"],
*[style*="color: #f8fafc"] {
  color: var(--color-text-main) !important;
}

*[style*="color: #aaa"],
*[style*="color: #ccc"],
*[style*="color: #cccccc"],
*[style*="color: #999"] {
  color: var(--color-text-muted) !important;
}

/* Cores de ênfase (mantidas nos dois temas via variáveis) */
*[style*="color: #f1c40f"],
*[style*="color: #fbbf24"] {
  color: var(--color-accent-gold) !important;
}

*[style*="color: #2ecc71"],
*[style*="color: #10b981"],
*[style*="color: #34d399"] {
  color: var(--color-accent-green) !important;
}

*[style*="color: #e74c3c"],
*[style*="color: #f87171"],
*[style*="color: #ef4444"] {
  color: var(--color-accent-red) !important;
}

*[style*="color: #3498db"],
*[style*="color: #60a5fa"] {
  color: var(--color-accent-blue) !important;
}

/* Textos escuros hardcoded no HTML (mockup Ollama website branco) */
h2[style*="color: #333"],
*[style*="color: #333"] {
  color: var(--color-text-sub) !important;
}

/* Botão preto "Download" do mockup Ollama */
button[style*="background: #000"],
*[style*="background: #000; color: #fff"],
*[style*="background:#000"] {
  background:   var(--color-text-main) !important;
  color:        var(--color-bg-start) !important;
}

/* Span de path de arquivo (fundo branco + cor escura) */
*[style*="background: #ffffff; color: #333"] {
  background: var(--color-surface)  !important;
  color:      var(--color-text-main) !important;
}

/* Separadores <hr> hardcoded */
hr[style*="border-color: rgba(255,255,255"] {
  border-color: var(--color-hr) !important;
}

/* Texto com color: #ccc dentro de blocos (sublegendas) */
p[style*="color: #ccc"] {
  color: var(--color-text-muted) !important;
}

/* ==========================================================================
   11. UX/UI PREMIUM REFINEMENTS
   ========================================================================== */

/* Sleek Scrollbar Styles */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-green);
}

/* Glassmorphic FAB Theme Toggle Button */
#theme-toggle {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  padding: 8px 12px !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.6 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
}
#theme-toggle:hover {
  opacity: 1 !important;
  transform: scale(1.1);
  border-color: var(--color-accent-green) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Pulsing down-arrow animation for vertical slide stacks */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.bounce-arrow {
  animation: bounce 2s infinite ease-in-out;
  font-size: 0.50em;
  margin-top: 30px;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
.bounce-arrow span {
  color: var(--color-accent-green);
  font-size: 1.4em;
  display: inline-block;
  margin-top: 4px;
}

/* Flashing cursor animation for terminal mockup */
@keyframes blink {
  50% { opacity: 0; }
}
span[style*="animation: blink"] {
  animation: blink 1s step-end infinite !important;
}