@layer base {
  html[data-theme='light'] {
    --custom-radial-blur: #e1e7fd;
    --ifm-background-color: #fff;
    --ifm-color-primary: #2563eb; /* New Primary Blue */
    --ifm-color-primary-dark: #204fcf; /* Darker Blue */
    --ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
    --ifm-color-primary-darkest: #163c9d; /* Darkest Blue */
    --ifm-color-primary-light: #2974ff; /* Light Blue */
    --ifm-color-primary-lighter: #3280ff; /* Lighter Blue */
    --ifm-color-primary-lightest: #3a8bff; /* Lightest Blue */
    --ifm-code-font-size: 95%;
    --ifm-navbar-link-hover-color: inherit;
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  }

  html[data-theme='dark'] {
    --custom-radial-blur: #1d1b48;
    --ifm-background-color: #18181b;
    --ifm-color-primary: #ffffff; /* New Primary Blue */
    --ifm-color-primary-dark: #204fcf; /* Darker Blue */
    --ifm-color-primary-darker: #1b45b7; /* Even Darker Blue */
    --ifm-color-primary-darkest: #163c9d; /* Darkest Blue */
    --ifm-color-primary-light: #2974ff; /* Light Blue */
    --ifm-color-primary-lighter: #3280ff; /* Lighter Blue */
    --ifm-color-primary-lightest: #3a8bff; /* Lightest Blue */
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
  }

  .react-tweet-theme {
    --tweet-container-margin: 1.5rem 0;
    --tweet-header-font-size: 0.9375rem;
    --tweet-header-line-height: 1.25rem;
    --tweet-body-font-size: 1.25rem;
    --tweet-body-font-weight: 400;
    --tweet-body-line-height: 1.5rem;
    --tweet-body-margin: 0;
    --tweet-quoted-container-margin: 0.75rem 0;
    --tweet-quoted-body-font-size: 0.938rem;
    --tweet-quoted-body-font-weight: 400;
    --tweet-quoted-body-line-height: 1.25rem;
    --tweet-quoted-body-margin: 0.25rem 0 0.75rem 0;
    --tweet-info-font-size: 0.9375rem;
    --tweet-info-line-height: 1.25rem;
    --tweet-actions-font-size: 0.875rem;
    --tweet-actions-line-height: 1rem;
    --tweet-actions-font-weight: 700;
    --tweet-actions-icon-size: 1.25em;
    --tweet-actions-icon-wrapper-size: calc(
      var(--tweet-actions-icon-size) + 0.75em
    );
    --tweet-replies-font-size: 0.875rem;
    --tweet-replies-line-height: 1rem;
    --tweet-replies-font-weight: 700;
  }

  :is([data-theme='light'], .light) :where(.react-tweet-theme),
  :where(.react-tweet-theme) {
    --tweet-skeleton-gradient: linear-gradient(
      270deg,
      #fafafa,
      #eaeaea,
      #eaeaea,
      #fafafa
    );
    --tweet-border: 1px solid #cfd9de;
    --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      Helvetica, Arial, sans-serif;
    --tweet-font-color: #0f1419;
    --tweet-font-color-secondary: #536471;
    --tweet-bg-color: #fff;
    --tweet-bg-color-hover: #f7f9f9;
    --tweet-quoted-bg-color-hover: rgba(0, 0, 0, 0.03);
    --tweet-color-blue-primary: #1d9bf0;
    --tweet-color-blue-primary-hover: #1a8cd8;
    --tweet-color-blue-secondary: #006fd6;
    --tweet-color-blue-secondary-hover: rgba(0, 111, 214, 0.1);
    --tweet-color-red-primary: #f91880;
    --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
    --tweet-color-green-primary: #00ba7c;
    --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
    --tweet-twitter-icon-color: var(--tweet-font-color);
    --tweet-verified-old-color: #829aab;
    --tweet-verified-blue-color: var(--tweet-color-blue-primary);
  }

  :is([data-theme='dark'], .dark) :where(.react-tweet-theme) {
    --tweet-skeleton-gradient: linear-gradient(
      270deg,
      #15202b,
      #1e2732,
      #1e2732,
      #15202b
    );
    --tweet-border: 1px solid #425364;
    --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      Helvetica, Arial, sans-serif;
    --tweet-font-color: #f7f9f9;
    --tweet-font-color-secondary: #8b98a5;
    --tweet-bg-color: #333333;
    --tweet-bg-color-hover: #1e2732;
    --tweet-quoted-bg-color-hover: hsla(0, 0%, 100%, 0.03);
    --tweet-color-blue-primary: #1d9bf0;
    --tweet-color-blue-primary-hover: #1a8cd8;
    --tweet-color-blue-secondary: #6bc9fb;
    --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1);
    --tweet-color-red-primary: #f91880;
    --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
    --tweet-color-green-primary: #00ba7c;
    --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
    --tweet-twitter-icon-color: var(--tweet-font-color);
    --tweet-verified-old-color: #829aab;
    --tweet-verified-blue-color: #fff;
  }

  pre,
  code {
    @apply text-sm;
  }

  body {
    @apply text-base;
    @apply antialiased;
    @apply bg-white dark:bg-[#0C0C0C];
  }

  #__docusaurus {
    @apply bg-white dark:bg-[#0C0C0C];
  }

  img {
    pointer-events: none;
  }

  a {
    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }
  compatible-label {
    display: inline-block;
    padding: 2px 8px;
    margin: 0;
    background-color: #228b22;
    color: #000;
    font-size: 13px;
    vertical-align: middle;
    line-height: 1.6;
    border-radius: 4px;
    font-weight: var(--ifm-font-weight-bold);
  }

  .btn-shadow {
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  }
}

.tweet-wrapper {
  [class*='actions_'] {
    display: none !important;
  }
  [class*='authorFollow_'] {
    display: none !important;
  }
  [class*='replies_'] {
    margin-top: 10px;
  }
}

.font-serif {
  letter-spacing: -4px;
}
