/* Clean CSS that works WITH reveal.js best practices */

:root {
  /* Reveal.js theme colors */
  --r-main-color: #2563eb;
  --r-heading-color: #2563eb;
  --r-selection-color: #10b981;
  --r-code-font: "JetBrains Mono", "Fira Code", monospace;

  /* Typography scale system - modular scale with 1.414 ratio */
  --base-font-size: 1em;
  --ratio: 1.414;
  --step-down-2: calc(var(--base-font-size) / var(--ratio) / var(--ratio));
  --step-down-1: calc(var(--base-font-size) / var(--ratio));
  --step-up-1: calc(var(--base-font-size) * var(--ratio));
  --step-up-2: calc(var(--step-up-1) * var(--ratio));
  --step-up-3: calc(var(--step-up-2) * var(--ratio));
  --step-up-4: calc(var(--step-up-3) * var(--ratio));
}

/* Use reveal.js's own CSS custom properties for theming */
.reveal {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* Responsive typography using modular scale - work with reveal.js scaling */
.reveal h1 {
  font-size: var(--step-up-3) !important;
  font-weight: 700;
  line-height: 1.2;
}

.reveal h2 {
  font-size: var(--step-up-2) !important;
  font-weight: 700;
  line-height: 1.3;
}

.reveal h3 {
  font-size: var(--step-up-1) !important;
  font-weight: 700;
  line-height: 1.4;
}

/* Accent color for emphasis */
.reveal strong {
  color: #10b981;
  font-weight: 700;
}

/* Code styling - enhance defaults */
.reveal pre {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: var(--step-down-1);
}

.reveal code {
  border-radius: 4px;
  font-size: var(--step-down-1);
}




/* Fix mermaid text cutoff issues */
.reveal .mermaid text {
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
}

.reveal .mermaid .node rect {
  padding: 8px !important;
}

.reveal .mermaid svg {
  overflow: visible !important;
}

/* QR Code sizing - HTML only, PDF uses markdown sizing */
.reveal img[src*="qr"] {
  width: 200px;
  height: auto;
}