/* ============================================================
   Sisopia — Theme tokens
   ============================================================ */

:root {
  /* Colores */
  --sis-primary: #0F1B3D;
  --sis-primary-deep: #0A1128;
  --sis-accent: #A3E635;
  --sis-accent-soft: rgba(163, 230, 53, 0.15);
  --sis-bg: #FFFFFF;
  --sis-surface: #F4F5F7;
  --sis-text: #3A3F4B;
  --sis-text-muted: #7A8290;
  --sis-text-on-dark: #E8EAF0;
  --sis-border: #E1E4EA;

  /* Tipografía */
  --sis-font-display: 'Space Grotesk', system-ui, sans-serif;
  --sis-font-body: 'Inter', system-ui, sans-serif;
  --sis-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing */
  --sis-space-1: 0.25rem;
  --sis-space-2: 0.5rem;
  --sis-space-3: 1rem;
  --sis-space-4: 1.5rem;
  --sis-space-5: 2rem;
  --sis-space-6: 3rem;
  --sis-space-8: 5rem;

  /* Radios */
  --sis-radius-sm: 6px;
  --sis-radius-md: 12px;
  --sis-radius-lg: 20px;

  /* Sombras */
  --sis-shadow-sm: 0 2px 8px rgba(15, 27, 61, 0.08);
  --sis-shadow-md: 0 8px 24px rgba(15, 27, 61, 0.12);
  --sis-shadow-lg: 0 24px 48px rgba(15, 27, 61, 0.16);
}

/* ============================================================
   Reveal overrides
   ============================================================ */

.reveal {
  font-family: var(--sis-font-body);
  font-size: 24px;
  color: var(--sis-text);
  background: var(--sis-bg);
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--sis-font-display);
  font-weight: 700;
  color: var(--sis-primary);
  text-transform: none;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sis-space-4) 0;
}

.reveal h1 { font-size: 4rem; line-height: 1.05; }
.reveal h2 { font-size: 2.75rem; line-height: 1.1; }
.reveal h3 { font-size: 1.75rem; line-height: 1.2; }

.reveal p { line-height: 1.55; margin: 0 0 var(--sis-space-3) 0; }

.reveal a {
  color: var(--sis-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--sis-accent);
  transition: color 0.2s ease;
}
.reveal a:hover { color: var(--sis-accent); }

.reveal .progress { color: var(--sis-accent); height: 4px; }
.reveal .controls { color: var(--sis-primary); }

/* ============================================================
   Slide variants (fondo oscuro vs claro)
   ============================================================ */

.reveal section.slide-dark {
  background: var(--sis-primary-deep);
  color: var(--sis-text-on-dark);
}
.reveal section.slide-dark h1,
.reveal section.slide-dark h2,
.reveal section.slide-dark h3 { color: #FFFFFF; }
.reveal section.slide-dark a { color: var(--sis-accent); border-bottom-color: var(--sis-accent); }

.reveal section.slide-light { background: var(--sis-bg); }
.reveal section.slide-surface { background: var(--sis-surface); }

/* Aplicar el fondo desde la propia section requiere CSS extra en reveal */
.reveal .slides section.slide-dark { background-color: var(--sis-primary-deep); }
.reveal .slides section.slide-light { background-color: var(--sis-bg); }
.reveal .slides section.slide-surface { background-color: var(--sis-surface); }

/* ============================================================
   Responsive — móvil (< 768px)
   ============================================================ */

@media (max-width: 768px) {
  .reveal { font-size: 18px; }
  .reveal h1 { font-size: 2.2rem; }
  .reveal h2 { font-size: 1.75rem; }
  .reveal h3 { font-size: 1.25rem; }
  .reveal section { padding: var(--sis-space-3) !important; }
}