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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

/* Monospace Font */
@font-face {
  font-family: "ReplicaLLMono";
  src: url("./fonts/ReplicaMonoLLWeb-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Other ReplicaLL Fonts */
@font-face {
  font-family: "ReplicaLL";
  src: url("./fonts/ReplicaLLWeb-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ReplicaLL";
  src: url("./fonts/ReplicaLLWeb-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "ReplicaLL";
  src: url("./fonts/ReplicaLLWeb-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ReplicaLL";
  src: url("./fonts/ReplicaLLWeb-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "ReplicaLL";
  src: url("./fonts/ReplicaLLWeb-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ReplicaLL";
  src: url("./fonts/ReplicaLLWeb-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "ReplicaLL";
  src: url("./fonts/ReplicaLLWeb-Heavy.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ReplicaLL";
  src: url("./fonts/ReplicaLLWeb-HeavyItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@layer base {
  html {
    font-family: ReplicaLL;
  }
}

@layer utilities {
  .scrollbar-visible {
    scrollbar-width: thin;  /* For Firefox */
    scrollbar-color: #888 #f1f1f1;  /* For Firefox */
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .scrollbar-visible::-webkit-scrollbar {
    width: 12px;
    background-color: #f1f1f1;
  }

  .scrollbar-visible::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 20px;
    border: 3px solid #f1f1f1;
  }

  .scrollbar-visible::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }

  /* Ensure the scrollbar is always visible in WebKit browsers */
  .scrollbar-visible::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 20px;
  }
}