@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html[data-theme="default"] {
    --color-white: 249 249 249; /* #F9F9F9 */
    --color-black: 26 22 29; /* #1A161D */

    --color-light: 238 206 230; /* #EECEE6 */
    --color-mid: 141 94 183; /* #8D5EB7 */
    --color-dark: 33 29 73; /* #211D49 */

    --color-highlight: 208 64 20; /* #D04014 */

    --color-active: 0 135 85; /* #008755 */
    --color-warning: 250 207 142; /* #FACF8E */
    --color-inactive: 216 247 245; /* #d6e4f7 */
    --color-error: 245 129 129; /* #F58181 */
  }

  html[data-theme="sky"] {
    --color-white: 249 249 249; /* #F9F9F9 */
    --color-black: 26 22 29; /* #1A161D */
    --color-light: 204 238 242; /* #CCEEF2 */
    --color-mid: 42 102 159; /* #2A669F */
    --color-dark: 20 32 74; /* #14204A */
    --color-highlight: 208 64 20; /* #D04014 */

    --color-active: 166 211 129; /* #A6D381 */
    --color-warning: 244 190 102; /* #F4BE66 */
    --color-inactive: 216 247 245; /* #d6e4f7 */
    --color-error: 208 64 20; /* #D04014 */
  }

  a.block-link:after {
    position: absolute;
    content: "";
    inset: 0;
  }
}

/* Default editor styles */
@layer components {
  .codex-editor__redactor .ce-block .ce-block__content {
    @apply text-base font-normal font-sans text-dark leading-[1.6] space-y-[1.6rem];

    h1.ce-header {
      @apply text-3xl md:text-4xl font-semibold font-sans leading-[1.2];
    }

    h2.ce-header {
      @apply text-2xl font-medium font-sans leading-[1.3] mb-4 mt-8;
    }

    h3.ce-header {
      @apply text-xl font-normal font-sans leading-[1.3] mb-4 mt-6;
    }

    p,
    li {
      @apply leading-[1.6] tracking-wide max-w-[85ch];

      a {
        @apply text-[#1A9597] underline underline-offset-2 hover:text-[#158486] focus:outline-2 focus:outline-offset-2 focus:outline-[#1A9597];
      }

      strong,
      b {
        @apply font-semibold;
      }
    }

    p {
      @apply mb-4;
    }

    .cdx-quote {
      @apply bg-[#eef0f3] border-l-inactive border-l-8 p-6 mb-4;

      .cdx-quote__caption {
        @apply block ml-6 mt-2 text-sm text-dark;
      }

      .cdx-quote__text {
        quotes: "\201C""\201D""\2018""\2019";
        @apply pl-6;

        &:before {
          @apply -ml-8 mr-2 text-dark text-6xl leading-4 align-text-bottom font-serif;
          content: open-quote;
        }

        p {
          @apply inline italic text-lg;
        }
      }
    }

    .cdx-list {
      @apply mb-4 pl-6;

      &--ordered {
        @apply list-decimal;
      }

      &--unordered {
        @apply list-disc;
      }

      .cdx-list {
        @apply mt-2 mb-0;
      }

      .cdx-list__item {
        @apply mb-2 pl-2;
      }
    }

    .cdx-nested-list {
      @apply mb-4 pl-6;

      &--ordered {
        @apply list-decimal;
      }

      &--unordered {
        @apply list-disc;
      }

      .cdx-nested-list {
        @apply mt-2 mb-0;
      }

      .cdx-nested-list__item {
        @apply mb-2 pl-2;
      }
    }

    .cdx-table {
      @apply w-full border-collapse border-2 border-dark my-6;

      &__head {
        @apply font-semibold border-dark border-r-2 p-3 bg-light;
      }

      &__row {
        @apply border-dark border-b-2;
      }

      &__cell {
        @apply border-dark border-r-2 p-3;
      }
    }

    .cdx-embed {
      iframe {
        @apply w-full border-none;
      }
    }
  }
}