@layer slide.theme {
    slide-deck {
      --slide-light-color: hsl(200deg 12% 95%);
      --slide-dark-color: hsl(200deg 12% 5%);
      --slide-fade-light-color: hsl(193deg 28% 87%);
      --slide-fade-dark-color: hsl(193deg 28% 15%);

      --slide-accent-dark-color: hsl(330deg 68% 43%);
      --slide-accent-light-color: hsl(337 99% 79%);

      --slide-action-dark-color: hsl(195deg 53% 27%);
      --slide-action-light-color: hsl(196 77% 80%);

      --slide-active-dark-color: hsl(330deg 53% 27%);
      --slide-active-light-color: hsl(330 52.857% 87%);

      /* fonts */
      --slide-os-serif-font: palatino, 'palatino linotype', 'palatino lt std', 'book antiqua',
        georgia;
      --slide-os-sans-font: 'helvetica neue', helvetica, arial;
      --slide-os-code-font: sfmono-regular, consolas, monaco;

      --slide-serif-font: var(--slide-web-font-serif, var(--slide-os-serif, ui-serif)), serif;
      --slide-sans-font: var(--slide-web-font-sans, var(--slide-os-sans-font, ui-sans-serif)), sans-serif;
      --slide-code-font: var(--slide-web-font-code, var(--slide-os-code-font, ui-monospace)), monospace, serif;

      --slide-font: var(--slide-sans-font);
    }

    slide-deck,
    [slide-item] {
      /* background colors */
      --slide-background: var(--slide-light-color, Canvas);
      --slide-callout-color: var(--slide-fade-light-color);

      /* content colors */
      --slide-color: var(--slide-dark-color, CanvasText);
      --slide-accent-color: var(--slide-accent-dark-color);
      --slide-action-color: var(--slide-action-dark-color);
      --slide-active-color: var(--slide-active-dark-color);
      --slide-border-color: hsl(195deg 10% 50%);

      /* aliased/relative colors */
      --slide-mark-bg-color: var(--slide-callout-color);
      --slide-strikeout-color: var(--slide-accent-color);
      --slide-shadow-color: var(--slide-fade-dark-color);

      --slide-button-color: var(--slide-color);
      --slide-button-text: var(--slide-background);

      /* progressive color enhancements */
      @supports (color: hsl(from red / 1)) {
        --slide-shadow-color: hsl(from var(--slide-fade-dark-color) / 0.4);
      }

      /* light and dark schemes */
      @supports (color: light-dark(red, green)) {
        /* background colors */
        --slide-background: light-dark(
          var(--slide-light-color), var(--slide-dark-color)
        );
        --slide-callout-color: light-dark(
          var(--slide-fade-light-color), var(--slide-fade-dark-color)
        );

        /* content colors */
        --slide-color: light-dark(
          var(--slide-dark-color), var(--slide-light-color)
        );
        --slide-accent-color: light-dark(
          var(--slide-accent-dark-color), var(--slide-accent-light-color)
        );
        --slide-action-color: light-dark(
          var(--slide-action-dark-color), var(--slide-action-light-color)
        );
        --slide-active-color: light-dark(
          var(--slide-active-dark-color), var(--slide-active-light-color)
        );
      }
    }

    /* default prism styles */
    /* not confined to code-slide, since code can appear in other layouts */
    pre[class*="language-"] {
      display: block;
      overflow-x: auto;
      padding: 1lh 1em;
      color: var(--slide-color);
      background: var(--slide-background);
      tab-size: 2;

      --slide-code-color-1: var(--slide-accent-color);
      --slide-code-color-2: oklch(from var(--slide-code-color-1) l c calc(h + 90));
      --slide-code-color-3: oklch(from var(--slide-code-color-1) l c calc(h + 90 * 2));
      --slide-code-color-4: oklch(from var(--slide-code-color-1) l c calc(h + 90 * 3));

      /* don't love this, but it improves compat significantly */
      --slide-code-added-light-hsl: 120deg 93% 80%;
      --slide-code-added-dark-hsl: 146deg 50% 36%;
      --slide-code-removed-light-hsl: 300deg 76% 72%;
      --slide-code-removed-dark-hsl: 300deg 100% 27%;

      --slide-code-added-bg: hsl(var(--slide-code-added-light-hsl));
      --slide-code-added-bg-fade: hsl(var(--slide-code-added-light-hsl) / 0.2);
      --slide-code-removed-bg: hsl(var(--slide-code-removed-light-hsl));
      --slide-code-removed-bg-fade: hsl(var(--slide-code-removed-light-hsl) / 0.2);

      /* these have the same baseline date */
      @supports (color: light-dark(red, green))
        and (color: hsl(from red h s l)) {
        --slide-code-added-bg: light-dark(
          hsl(var(--slide-code-added-light-hsl)),
          hsl(var(--slide-code-added-dark-hsl))
        );
        --slide-code-added-bg-fade: hsl(
          from var(--slide-code-added-bg) h s l / 0.2
        );
        --slide-code-removed-bg: light-dark(
          hsl(var(--slide-code-removed-light-hsl)),
          hsl(var(--slide-code-removed-dark-hsl))
        );
        --slide-code-removed-bg-fade: hsl(
          from var(--slide-code-removed-bg) h s l / 0.2
        );
      }

      .token {
        &.comment,
        &.coord {
          color: var(--slide-code-color-1);
          font-style: italic;
        }

        &.coord {
          /* +++ is a problem */
          font-variant-ligatures: none;
        }

        &.keyword {
          font-style: italic;
        }

        &.parameter {
          color: var(--slide-code-color-4);
        }

        &.string,
        &.regex,
        &.number,
        &.literal {
          color: var(--slide-code-color-2);
        }

        &.rule,
        &.selector,
        &.keyword + .function {
          color: var(--slide-code-color-3);
          font-weight: bold;
        }

        &.tag {
          color: var(--slide-code-color-3);
        }

        &.attr-name {
          font-style: italic;
        }

        &.deleted:not(.prefix) {
          background-color: hsl(from var(--slide-code-removed-bg) h s l / 0.2);
          opacity: 0.6;
          text-decoration: line-through;
          text-decoration-color: var(--slide-color);

          &:hover {
            text-decoration: unset;
            opacity: unset;
          }

          * { filter: grayscale(0.5); }
        }

        &.inserted:not(.prefix) {
          background-color: hsl(from var(--slide-code-added-bg) h s l / 0.2);
        }

        &.inserted.prefix {
          background-color: var(--slide-code-added-bg);
        }

        &.deleted.prefix {
          background-color: var(--slide-code-removed-bg);
          filter: none;
        }

        &.bold {
          font-weight: bold;
        }

        &.important,
        &.italic {
          font-style: italic;
        }

        &.prefix,
        &.prolog,
        &.doctype,
        &.cdata,
        &.punctuation {
          color: hsl(from var(--slide-color) h s l / 0.6);
        }
      }
    }
  }