@layer reset, base, components, layout, utils;

@layer base {
  :root {
    interpolate-size: allow-keywords;
  }

  body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-optical-sizing: auto;
    font-stretch: semi-condensed;

    color: var(--color-neutral);
  }

  h1,
  h2,
  h3,
  h4 {
    color: oklch(from var(--color-neutral) calc(l - 0.15) c h);
  }

  :is(p, li) > a {
    color: var(--color-secondary);

    text-decoration: none;

    border-bottom: 1px solid var(--color-primary);
  }

  dd {
    margin-inline-start: unset;
  }

  p + ul {
    list-style-type: square;

    li {
      margin-block-end: 0.75rem;

      &::marker {
        color: oklch(from var(--color-neutral) calc(l + 0.4) c h);
      }
    }
  }

  ul p {
    margin: unset;
  }

  table {
    inline-size: 100%;
    border-collapse: collapse;
    overflow-wrap: break-word;

    th,
    td {
      padding: 0.5rem 1rem;
    }

    th {
      text-align: left;

      color: oklch(from var(--color-neutral) calc(l - 0.15) c h);
      background-color: oklch(from var(--color-neutral) calc(l + 0.61) c h);
    }

    tr:not(:last-child) {
      border-block-end: 1px solid
        oklch(from var(--color-neutral) calc(l + 0.5) c h);
    }
  }

  details {
    background-color: oklch(from var(--color-neutral) calc(l + 0.61) c h);

    &:not(:last-child) {
      border-block-end: 1px solid
        oklch(from var(--color-neutral) calc(l + 0.5) c h);
    }

    &::details-content {
      block-size: 0;

      overflow: hidden;
      transition: block-size 0.2s ease allow-discrete;

      @starting-style {
        block-size: 0;
      }
    }

    &:open {
      &::details-content {
        padding-inline: 1rem;

        block-size: auto;
      }

      summary {
        background-color: var(--color-primary);

        &:hover,
        &:focus-visible {
          background-color: oklch(
            from var(--color-primary) calc(l - 0.1) c calc(h + 0.2)
          );
        }
      }

      svg {
        rotate: 180deg;
      }
    }

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1rem;

      color: oklch(from var(--color-neutral) calc(l - 0.15) c h);

      font-size: var(--font-size-lg);
      font-weight: 600;

      cursor: pointer;
      transition: background-color 0.1s linear;

      svg {
        transition: rotate 0.15s linear;
      }

      &:hover,
      &:focus-visible {
        background-color: oklch(from var(--color-neutral) calc(l + 0.55) c h);
      }
    }
  }

  @view-transition {
    navigation: auto;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }

    @view-transition {
      navigation: none;
    }
  }
}