/* =====================================================================
   .NET brand theme for reveal.js
   Type: Space Grotesk (headings) + Open Sans (body), self-hosted.
   Color: #512BD4 primary, #512BD4 -> #D600AA signature gradient.
   Dark default, with a light option via `.reveal.light` on the root.
   ===================================================================== */

/* ---- Self-hosted fonts (SIL Open Font License) ---- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-v12-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/open-sans-v34-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/open-sans-v34-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/open-sans-v34-latin-700.woff2") format("woff2");
}

/* ---- Design tokens ---- */
:root {
  --dn-purple: #512bd4;
  --dn-purple-bright: #a78bfa;
  --dn-magenta: #d600aa;
  --dn-gradient: linear-gradient(120deg, #512bd4, #d600aa);
  --dn-gradient-soft: linear-gradient(120deg, #6f4be0, #d600aa);

  --dn-ink: #1b1b1f;
  --dn-ink-soft: #232328;
  --dn-white: #ffffff;
  --dn-muted: #b4b4be;
  --dn-line: rgba(255, 255, 255, 0.12);

  /* Fluent system colors */
  --dn-danger: #c42b1c;
  --dn-info: #005fb7;
  --dn-success: #0f7b0f;

  --dn-code-bg: #15151a;
}

/* ---- reveal.js variable mapping (dark default) ---- */
.reveal-viewport {
  background: var(--dn-ink);
}

.reveal {
  --r-background-color: var(--dn-ink);
  --r-main-font: "Open Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --r-main-font-size: 28px;
  --r-main-color: #ededf2;
  --r-heading-font: "Space Grotesk", "Open Sans", system-ui, sans-serif;
  --r-heading-color: var(--dn-white);
  --r-heading-font-weight: 700;
  --r-heading-line-height: 1.1;
  --r-heading-letter-spacing: -0.01em;
  --r-heading-text-transform: none;
  --r-heading1-size: 2.4em;
  --r-heading2-size: 1.5em;
  --r-heading3-size: 1.1em;
  --r-link-color: var(--dn-purple-bright);
  --r-link-color-hover: #b9a6ff;
  --r-link-color-dark: var(--dn-magenta);
  --r-selection-background-color: rgba(214, 0, 170, 0.35);
  --r-code-font: "Cascadia Code", "Fira Code", "SFMono-Regular", Consolas, monospace;
  font-weight: 400;
}

/* Apply the brand colors and typography directly. We don't load an upstream
   reveal.js theme, so the --r-* variables above need to be consumed here or
   text falls back to the browser defaults (black Times New Roman at 16px),
   which is both invisible on the dark background and far too small. */
.reveal {
  color: var(--r-main-color);
  font-family: var(--r-main-font);
  font-size: var(--r-main-font-size);
  line-height: 1.4;
}
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  color: var(--r-heading-color);
}

/* ---- Light option ---- */
.reveal.light {
  --r-background-color: #ffffff;
  --r-main-color: #1b1b1f;
  --r-heading-color: #1b1b1f;
  --r-link-color: var(--dn-purple);
  --r-link-color-hover: var(--dn-magenta);
}
.reveal.light + .reveal-viewport,
.reveal-viewport:has(.reveal.light) {
  background: #ffffff;
}

/* ---- Headings ---- */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: var(--r-heading-font);
  font-weight: 700;
  line-height: var(--r-heading-line-height);
  letter-spacing: -0.01em;
}

/* Gradient text helper used for the signature look. A solid fallback color is
   declared first so the text is never invisible when background-clip:text is
   unsupported or disabled (e.g. forced-colors / high-contrast mode). */
.reveal .gradient,
.reveal h1 .grad,
.reveal h2 .grad {
  color: var(--dn-purple-bright);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .reveal .gradient,
  .reveal h1 .grad,
  .reveal h2 .grad {
    background: var(--dn-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .reveal .gradient,
  .reveal h1 .grad,
  .reveal h2 .grad {
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }
}

/* ---- Links ---- */
.reveal a {
  color: var(--r-link-color);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 109, 240, 0.4);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.reveal a:hover {
  color: var(--r-link-color-hover);
  border-bottom-color: var(--dn-magenta);
}

/* ---- Code ---- */
.reveal pre {
  width: 100%;
  margin: 0.6em 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--dn-line);
  border-radius: 12px;
  overflow: hidden;
}
.reveal pre code {
  background: var(--dn-code-bg);
  padding: 1.1em 1.2em;
  border-radius: 12px;
  font-size: 0.62em;
  line-height: 1.45;
  max-height: 540px;
}
.reveal code {
  font-family: var(--r-code-font);
}
.reveal :not(pre) > code {
  background: rgba(138, 109, 240, 0.14);
  color: #d9ccff;
  padding: 0.1em 0.4em;
  border-radius: 6px;
  font-size: 0.92em;
}

/* Lift the Monokai comment/meta tokens to meet WCAG AA on the code background
   (the stock #75715e is only ~3.7:1). Keeps a muted look at ~5.2:1. */
.reveal .hljs-comment,
.reveal .hljs-quote,
.reveal .hljs-meta {
  color: #8b8778;
}

/* ---- Lists ---- */
.reveal ul,
.reveal ol {
  margin-left: 1em;
}
.reveal li {
  margin: 0.35em 0;
}
.reveal li::marker {
  color: var(--dn-magenta);
}

/* ---- Blockquote ---- */
.reveal blockquote {
  width: 92%;
  background: var(--dn-ink-soft);
  border-left: 4px solid var(--dn-purple);
  border-radius: 0 10px 10px 0;
  padding: 0.6em 1em;
  box-shadow: none;
  font-style: normal;
}

/* ---- Tables ---- */
.reveal table {
  margin: 0.4em auto;
  border-collapse: collapse;
  font-size: 0.85em;
}
.reveal table th {
  background: rgba(81, 43, 212, 0.25);
  color: var(--dn-white);
  border-bottom: 2px solid var(--dn-purple);
}
.reveal table th,
.reveal table td {
  padding: 0.35em 0.7em;
  border-bottom: 1px solid var(--dn-line);
}

/* ---- Progress + controls in brand color ---- */
.reveal .progress {
  color: var(--dn-magenta);
  height: 4px;
}
.reveal .controls {
  color: var(--dn-purple-bright);
}
.reveal .slide-number {
  background: rgba(81, 43, 212, 0.55);
  color: #fff;
  font-family: var(--r-main-font);
}