:root {
  /* Updated with Catppuccin (Latte) colors */
  --kalouk-light-blue: var(--ctp-latte-sky);
  --kalouk-blue: var(--ctp-latte-blue);
  --kalouk-yellow: var(--ctp-latte-red);
  --kalouk-orange: var(--ctp-latte-peach);
  --kalouk-green: var(--ctp-latte-green);
  --kalouk-red: var(--ctp-latte-red);
}

/* General */

.slidev-layout {
  background-color: var(--ctp-latte-base);
  color: var(--ctp-latte-text);
}

html.dark .slidev-layout {
  background: var(--ctp-mocha-base);
  color: var(--ctp-mocha-text);
}

.slidev-code-wrapper {
  border: 2px solid var(--ctp-latte-surface2);
}

html.dark .slidev-code-wrapper {
  border-color: var(--ctp-mocha-surface2);
}

/* Kalouk Layouts */

.slidev-layout.equation {
  @apply h-full grid;
}

.slidev-layout.equation .katex-display {
  font-size: 3rem;
}

.slidev-layout.quiz {
  @apply h-full grid;
}

.slidev-layout.subsection {
  @apply text-center grid h-full;
  h1 {
    @apply text-5xl font-700;
  }
}

/* Slidev Layouts (refined) */

.slidev-layout.default {
  @apply h-full grid;
}

.slidev-layout.cover {
  @apply h-full grid;

  h1 {
    @apply text-8xl font-900 leading-20;
  }

  h1 + p {
    @apply -mt-2 opacity-50 text-2xl mb-4;
  }

  p + h2,
  ul + h2,
  table + h2 {
    @apply mt-10;
  }
}

.slidev-layout.intro {
  @apply h-full grid;

  h1 {
    @apply text-6xl font-800 leading-20;
  }

  h1 + p {
    @apply -mt-2 opacity-50 mb-4;
  }

  p + h2,
  ul + h2,
  table + h2 {
    @apply mt-10;
  }
}

.slidev-layout.section {
  h1 {
    @apply text-6xl font-800 leading-20;
  }
}

.slidev-layout.fact {
  @apply text-center grid h-full;
  h1 {
    @apply text-6xl font-700;
  }
  p {
    @apply font-700 text-2xl mt-8;
  }
}

.slidev-layout.statement {
  @apply text-center grid h-full;

  h1 {
    @apply text-6xl font-700;
  }
}

.slidev-layout.quote {
  @apply grid h-full;

  h1 + p {
    @apply mt-2;
  }
}

.slidev-layout.end {
  @apply tracking-widest h-full text-center grid place-content-center select-none;

  h1 + p {
    @apply mt-2;
  }

  background-color: var(--ctp-latte-surface2);
  color: var(--ctp-mocha-text);
}

html.dark .slidev-layout.end {
  background-color: var(--ctp-mocha-surface2);
  color: var(--ctp-mocha-text);
}
