@import 'tailwindcss';

@plugin '@tailwindcss/typography';

@custom-variant dark (&:is(.dark *));

@theme {
  --font-sans: Imprima, ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Playwrite US Modern', cursive;
  --font-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility font-heading {
  font-family: var(--font-heading);
}

@layer utilities {
  html {
    overflow-y: auto;
    color-scheme: light;
    scroll-padding-top: 100px;
  }

  html.dark {
    color-scheme: dark;
  }

  html,
  body {
    @apply size-full;
  }

  body {
    @apply font-sans antialiased;
    @apply flex flex-col;
    @apply bg-neutral-100 dark:bg-neutral-900;
    @apply text-black/75 dark:text-white/75;
  }

  header {
    @apply fixed left-0 right-0 top-0 z-50 py-6;
    @apply bg-neutral-100/75 dark:bg-neutral-900/75;
    @apply saturate-200 backdrop-blur-xs;
  }

  main {
    @apply flex-1 py-32;
  }

  footer {
    @apply py-6 text-sm;
  }

  article {
    @apply prose prose-neutral max-w-full dark:prose-invert prose-img:mx-auto prose-img:my-auto;
    @apply prose-headings:font-heading prose-headings:font-extralight;
    @apply prose-headings:text-black dark:prose-headings:text-white;
  }
}

@layer utilities {
  article a {
    @apply font-sans text-current underline underline-offset-[3px];
    @apply decoration-black/30 dark:decoration-white/30;
    @apply transition-colors duration-300 ease-in-out;
  }
  article a:hover {
    @apply text-black dark:text-white;
    @apply decoration-black/50 dark:decoration-white/50;
  }
}

.animate {
  @apply -translate-y-3 opacity-0;
  @apply transition-all duration-300 ease-out;
}

.animate.show {
  @apply translate-y-0 opacity-100;
}

html #back-to-top {
  @apply pointer-events-none opacity-0;
}

html.scrolled #back-to-top {
  @apply pointer-events-auto opacity-100;
}

/* shiki config */
pre {
  @apply border border-black/15 py-5 dark:border-white/20;
}

:root {
  --astro-code-foreground: #09090b;
  --astro-code-background: #fafafa;
  --astro-code-token-comment: #a19595;
  --astro-code-token-keyword: #f47067;
  --astro-code-token-string: #00a99a;
  --astro-code-token-function: #429996;
  --astro-code-token-constant: #2b70c5;
  --astro-code-token-parameter: #4e8fdf;
  --astro-code-token-string-expression: #ae42a0;
  --astro-code-token-punctuation: #8996a3;
  --astro-code-token-link: #8d85ff;
}

.dark {
  --astro-code-foreground: #fafafa;
  --astro-code-background: #09090b;
  --astro-code-token-comment: #a19595;
  --astro-code-token-keyword: #f47067;
  --astro-code-token-string: #00a99a;
  --astro-code-token-function: #6eafad;
  --astro-code-token-constant: #b3cceb;
  --astro-code-token-parameter: #4e8fdf;
  --astro-code-token-string-expression: #bf7db6;
  --astro-code-token-punctuation: #8996a3;
  --astro-code-token-link: #8d85ff;
}

/* copy code button on codeblocks */
.copy-code {
  @apply absolute right-3 top-3 grid size-9 place-content-center rounded-sm border border-black/15 bg-neutral-100 text-center duration-300 ease-in-out dark:border-white/20 dark:bg-neutral-900;
}

.copy-code:hover {
  @apply bg-[#E9E9E9] transition-colors dark:bg-[#232323];
}

.copy-code:active {
  @apply scale-90 transition-transform;
}
