@custom-variant dark (&:is(.vscode-dark *));

/* Quantum Theme for Demo Time
 * A modern, tech-focused theme with gradient accents
 */

.slide.quantum {
  --demotime-primary: #3a86ff;
  --demotime-secondary: #8338ec;
  --demotime-accent: #ff006e;
  --demotime-light: #f8f9fa;

  --demotime-color: var(--demotime-light);
  --demotime-background: linear-gradient(135deg, #1a1b26 0%, #24283b 100%);

  --demotime-heading-color: var(--demotime-light);
  --demotime-heading-background: transparent;

  --demotime-font-size: var(--vscode-editor-font-size, 1.1em);

  --demotime-link-color: var(--demotime-primary);
  --demotime-link-active-color: var(--demotime-accent);

  --demotime-blockquote-border: var(--demotime-accent);
  --demotime-blockquote-background: rgba(255, 0, 110, 0.1);

  /* Default layout */
  --demotime-default-background: var(--demotime-background);
  --demotime-default-color: var(--demotime-color);
  --demotime-default-heading-color: var(--demotime-heading-color);
  --demotime-default-heading-background: var(--demotime-heading-background);

  /* Intro layout */
  --demotime-intro-background: linear-gradient(135deg, #1a1b26 0%, #24283b 100%);
  --demotime-intro-color: var(--demotime-color);
  --demotime-intro-heading-color: transparent;
  --demotime-intro-heading-background: linear-gradient(
    to right,
    var(--demotime-primary),
    var(--demotime-accent)
  );

  /* Quote layout */
  --demotime-quote-background: linear-gradient(135deg, #2b2d3e 0%, #1a1b26 100%);
  --demotime-quote-color: var(--demotime-color);
  --demotime-quote-heading-color: var(--demotime-accent);
  --demotime-quote-heading-background: transparent;

  /* Section layout */
  --demotime-section-background: linear-gradient(135deg, #24283b 0%, #1a1b26 100%);
  --demotime-section-color: var(--demotime-color);
  --demotime-section-heading-color: transparent;
  --demotime-section-heading-background: linear-gradient(
    to right,
    var(--demotime-secondary),
    var(--demotime-primary)
  );

  /* Image layouts */
  --demotime-image-heading-background: rgba(0, 0, 0, 0.8);

  --demotime-image-left-background: var(--demotime-background);
  --demotime-image-left-color: var(--demotime-color);
  --demotime-image-left-heading-color: var(--demotime-primary);
  --demotime-image-left-heading-background: transparent;

  --demotime-image-right-background: var(--demotime-background);
  --demotime-image-right-color: var(--demotime-color);
  --demotime-image-right-heading-color: var(--demotime-primary);
  --demotime-image-right-heading-background: transparent;

  /* Two columns layout */
  --demotime-two-columns-background: var(--demotime-background);
  --demotime-two-columns-color: var(--demotime-color);
  --demotime-two-columns-heading-color: var(--demotime-primary);
  --demotime-two-columns-heading-background: transparent;

  background: var(--demotime-background);
  color: var(--demotime-color);
  font-size: var(--demotime-font-size);

  .slide__content__inner {
    @apply p-8 space-y-6;
    box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  h1 {
    @apply text-4xl mb-4;
    color: var(--demotime-heading-color);
    background: var(--demotime-heading-background);
    -webkit-background-clip: text;
    -webkit-text-fill-color: inherit;
  }

  h2 {
    @apply text-3xl mb-3;
    color: var(--demotime-heading-color);
    background: var(--demotime-heading-background);
  }

  h3 {
    @apply text-2xl mb-2;
    color: var(--demotime-heading-color);
    background: var(--demotime-heading-background);
  }

  h4 {
    @apply text-xl mb-2;
    color: var(--demotime-heading-color);
    background: var(--demotime-heading-background);
  }

  h5 {
    @apply text-lg mb-1;
    color: var(--demotime-heading-color);
    background: var(--demotime-heading-background);
  }

  p {
    @apply leading-relaxed opacity-90;

    &:has(> img),
    &:has(> a) {
      @apply opacity-100;
    }
  }

  a {
    @apply text-(--demotime-link-color) underline transition-colors duration-200;

    &:hover {
      @apply text-(--demotime-link-active-color);
    }
  }

  ul,
  ol {
    @apply ml-6;

    li {
      @apply mb-2 opacity-90;
      position: relative;
    }

    ul,
    ol {
      @apply mt-2;
    }
  }

  ul {
    @apply list-none;

    li::before {
      content: '•';
      color: var(--demotime-accent);
      font-weight: bold;
      display: inline-block;
      width: 1em;
      margin-left: -1em;
    }
  }

  ol {
    @apply list-decimal;

    li::marker {
      color: var(--demotime-accent);
      font-weight: bold;
    }
  }

  img {
    @apply rounded-md shadow-lg;
  }

  blockquote {
    @apply border-l-4 p-4 my-4 border-(--demotime-blockquote-border) bg-(--demotime-blockquote-background) rounded-r-md;

    p {
      @apply italic;
    }
  }

  code {
    @apply px-1.5 py-0.5 rounded-sm;
    color: var(--demotime-accent);
  }

  pre {
    @apply p-4 rounded-md shadow-inner;
    background-color: rgba(0, 0, 0, 0.3);

    code {
      background-color: transparent;
      color: var(--demotime-light);
    }
  }

  /* Layout-specific styles */
  .default {
    background: var(--demotime-default-background);
    color: var(--demotime-default-color);

    h1 {
      color: var(--demotime-default-heading-color);
      background: var(--demotime-default-heading-background);
    }
  }

  .intro {
    background: var(--demotime-intro-background);
    color: var(--demotime-intro-color);

    .slide__content__inner {
      @apply flex flex-col items-center justify-center text-center;
    }

    h1 {
      @apply text-6xl mb-6;
      line-height: 1.2;
      color: var(--demotime-intro-heading-color);
      background: var(--demotime-intro-heading-background);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    p {
      @apply text-xl max-w-2xl opacity-80;
    }
  }

  .quote {
    background: var(--demotime-quote-background);
    color: var(--demotime-quote-color);

    .slide__content__inner {
      @apply flex flex-col items-center justify-center text-center px-16;
    }

    h1 {
      @apply text-5xl mb-8;
      color: var(--demotime-quote-heading-color);
      background: var(--demotime-quote-heading-background);
      font-style: italic;
      position: relative;

      &::before,
      &::after {
        content: '“ ';
        font-size: 1.5em;
        opacity: 0.5;
      }

      &::after {
        content: ' ”';
      }
    }

    p {
      @apply text-xl opacity-70;
      font-style: italic;
    }
  }

  .section {
    background: var(--demotime-section-background);
    color: var(--demotime-section-color);

    .slide__content__inner {
      @apply flex flex-col items-center justify-center text-center;
    }

    h1 {
      @apply text-6xl mb-6;
      line-height: 1.2;
      color: var(--demotime-section-heading-color);
      background: var(--demotime-section-heading-background);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: -0.5rem;
        left: 25%;
        width: 50%;
        height: 3px;
        background: var(--demotime-accent);
        border-radius: 3px;
      }
    }

    h2 {
      @apply text-3xl opacity-90 mb-4;
    }

    p {
      @apply text-xl opacity-80 max-w-2xl;
    }
  }

  .image {
    .slide__content__inner {
      @apply flex flex-col items-center justify-center text-center;
    }

    h1 {
      @apply py-2 px-4 mb-6 inline-block;
      background: var(--demotime-image-heading-background);
      border-left: 3px solid var(--demotime-accent);
      border-right: 3px solid var(--demotime-accent);
      border-radius: 4px;
    }

    img {
      @apply max-h-[70vh] w-auto object-contain rounded-md shadow-xl;
      border: 2px solid rgba(255, 255, 255, 0.1);
    }
  }

  .image-left {
    background: var(--demotime-image-left-background);
    color: var(--demotime-image-left-color);

    h1 {
      color: var(--demotime-image-left-heading-color);
      background: var(--demotime-image-left-heading-background);
    }

    .slide__content__inner {
      @apply w-full flex flex-col space-y-4;
    }
  }

  .image-right {
    background: var(--demotime-image-right-background);
    color: var(--demotime-image-right-color);

    h1 {
      color: var(--demotime-image-right-heading-color);
      background: var(--demotime-image-right-heading-background);
    }

    .slide__content__inner {
      @apply w-full flex flex-col space-y-4;
    }
  }

  .two-columns {
    background: var(--demotime-two-columns-background);
    color: var(--demotime-two-columns-color);

    .slide__content__inner {
      @apply w-full grid grid-cols-2 gap-8 space-y-0;
    }

    .slide__left,
    .slide__right {
      @apply w-full space-y-4;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 2rem;
        bottom: 2rem;
        width: 1px;
        background: linear-gradient(to bottom, transparent, var(--demotime-accent), transparent);
      }
    }

    .slide__left::after {
      right: -1rem;
    }

    .slide__right::after {
      left: -1rem;
      display: none;
    }

    h1 {
      color: var(--demotime-two-columns-heading-color);
      background: var(--demotime-two-columns-heading-background);
    }

    ul,
    ol {
      @apply ml-4;
    }
  }
}
