@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
  themes: cyberpunk --default;
}

@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/arvo-400-cda0160d.woff2") format("woff2");
}

@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/arvo-700-26abb29e.woff2") format("woff2");
}

@theme {
  --font-slab: "Arvo", ui-serif, Georgia, serif;
}

@layer base {
  body {
    background-image:
      repeating-linear-gradient(30deg, transparent 0 27px, color-mix(in oklab, var(--color-base-300) 45%, transparent) 27px 28px),
      repeating-linear-gradient(150deg, transparent 0 27px, color-mix(in oklab, var(--color-base-300) 45%, transparent) 27px 28px);
    background-attachment: fixed;
  }

  h1, h2, h3, .card-title {
    font-family: var(--font-slab);
    font-weight: 700;
  }
}

.prose {
  --tw-prose-links: var(--color-primary);
}

@layer components {
  dialog::backdrop {
    @apply bg-base-300/50;
  }

  dialog {
    @apply p-0 rounded-lg border border-base-300 bg-base-100;
  }
}