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

/* now your custom font and base-layer overrides */
@layer base {
  @font-face {
    font-family: "Geist";
    font-weight: 400;
    font-style: normal;
    src: url("/fonts/geist-sans/Geist-Regular.woff2") format("woff2");
  }
  @font-face {
    font-family: "GeistMono";
    font-weight: 400;
    font-style: normal;
    src: url("/fonts/geist-mono/GeistMono-Regular.woff2") format("woff2");
  }

  body {
    @apply font-sans;
  }
  textarea {
    @apply font-mono !important;
  }

  /* 1) Base theming for all buttons */
  button {
    background: var(--themed-bg, var(--ds-gray-1000));
    color: var(--themed-fg, var(--ds-background-100));
  }

  /* 2) Override background on buttons that carry data-hover */
  #playButton:hover {
    /* force the light‐gray fill */
    background-color: hsl(0, 0%, 80%) !important;
    transition: background-color 0.2s ease-in-out;
  }
  #regenerateButton:hover {
    /* force the light‐gray fill */
    background-color: hsl(0, 0%, 17%) !important;
    transition: background-color 0.2s ease-in-out;
  }

  #outputText {
    /* already have these: */
    white-space: pre-wrap; /* keep your line-breaks and wrap at spaces */
    overflow: auto; /* scrollbars when needed */
  }

  .word-colored {
    font-family: monospace;
    white-space: pre-wrap; /* preserve line breaks */
    overflow-wrap: break-word; /* wrap long words */
  }

  #outputText.english-bg {
    position: relative; /* for the pseudo‐element */
    background-color: transparent !important;
  }

  /* 2) Create an ::before that holds the PNG and inverts it */
  #outputText.english-bg::before {
    content: "";
    position: absolute;
    inset: 0; /* top/right/bottom/left = 0 */
    background: url("/assets/murica.png") center/contain no-repeat;
    filter: invert(1) brightness(0.8);
    z-index: 2; /* behind your text */
    pointer-events: none;
  }
}