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

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Anybody Variable";
  font-style: normal;
  font-display: auto;
  font-weight: 100 900;
  src: url(@fontsource-variable/anybody/files/anybody-latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body {
  @apply bg-amber-50 dark:bg-amber-950;

  @media (prefers-color-scheme: dark) {
    color-scheme: dark;
  }
}

@layer base {
  :root {
    --background: 48 100% 96%;
    --foreground: 21 92% 14%;
    --card: 21 50% 90%;
    --card-foreground: 21 5% 15%;
    --popover: 21 100% 95%;
    --popover-foreground: 21 100% 10%;
    --primary: 161 93.5% 30.4%;
    --primary-foreground: 152 81% 96%;
    --secondary: 48 30% 87%;
    --secondary-foreground: 21 92% 14%;
    --muted: -17 30% 85%;
    --muted-foreground: 21 5% 40%;
    --accent: 0 0% 100%;
    --accent-foreground: 21 5% 15%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 21 5% 90%;
    --border: 21 30% 82%;
    --input: 21 30% 50%;
    --ring: 217 92% 50%;
    --radius: 1rem;
  }
  .dark {
    --background: 21 92% 10%;
    --foreground: 24 5% 90%;
    --card: 24 50% 0%;
    --card-foreground: 24 5% 90%;
    --popover: 24 50% 5%;
    --popover-foreground: 24 5% 90%;
    --primary: 161 93.5% 30.4%;
    --primary-foreground: 0 0% 100%;
    --secondary: 48 30% 20%;
    --secondary-foreground: 0 0% 100%;
    --muted: -14 30% 15%;
    --muted-foreground: 24 5% 60%;
    --accent: -14 30% 15%;
    --accent-foreground: 24 5% 90%;
    --destructive: 0 100% 30%;
    --destructive-foreground: 24 5% 90%;
    --border: 24 30% 18%;
    --input: 24 30% 18%;
    --ring: 217 92% 50%;
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply cursor-default bg-background text-foreground transition-colors;
    @apply selection:bg-primary/90 selection:text-secondary;
  }
  img {
    @apply selection:bg-primary/25;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display font-bold leading-relaxed tracking-tight;
  }
  h1 {
    @apply text-4xl sm:text-5xl;
  }
  h2 {
    @apply text-2xl sm:text-3xl;
  }
  h3 {
    @apply text-xl sm:text-2xl;
  }
  h4 {
    @apply text-lg leading-snug sm:text-xl;
  }
  h5 {
    @apply text-base leading-snug sm:text-lg;
  }
  h6 {
    @apply text-base leading-snug;
  }
  p {
    @apply leading-relaxed;
  }
  input[type="date"]::-webkit-inner-spin-button,
  input[type="date"]::-webkit-calendar-picker-indicator {
    @apply dark:opacity-0;
  }
}

@layer components {
  .site-section {
    @apply mx-auto w-full max-w-5xl px-2 py-10 sm:px-4 xl:px-0;
  }
}

@layer utilities {
  .hover-opacity {
    @apply transition hover:opacity-75;
  }
  .focus-ring {
    @apply focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
  }
  .prose-config {
    @apply prose prose-stone dark:prose-invert focus:outline-none;
    @apply prose-headings:prose-heading-styles;
    @apply prose-a:prose-a-styles;
    @apply prose-pre:prose-pre-styles;
    @apply prose-code:prose-code-styles;
  }
  .prose-heading-styles {
    @apply font-semibold;
  }
  .prose-a-styles {
    @apply focus-ring cursor-pointer rounded-sm no-underline transition;
    @apply text-primary hover:text-primary/75;
  }
  .prose-pre-styles {
    @apply bg-muted text-foreground;
  }
  .prose-code-styles {
    @apply before:content-none after:content-none;
  }
  .prose > ul > li > p {
    @apply my-0;
  }
  .prose > ol > li > p {
    @apply my-0;
  }
}
