/*
 * Don't define CSS classes in this file (other than HTML elements).
 * Edit one of the files imported below, or create a new one and import it.
 */

/* Third-party libraries */
@import "fork-awesome";
@import "balloon-css";

/* Our files */
@import "buttons";
@import "content";
@import "forms";
@import "gallery";
@import "navbar";
@import "pagination";
@import "tags";
@import "utilities";

/* Initialize Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --hover-overlay: hsla(0, 0%, 0%, 0.065);
  --active-overlay: hsla(0, 0%, 0%, 0.13);

  /* <https://github.com/kazzkiq/balloon.css#customizing-tooltips> */
  --balloon-color: hsla(0, 0%, 0%, 0.95);
  --balloon-font-size: 0.85rem;
  --body-background-color: #eff1f5;
  --body-color: hsl(0, 0%, 20%);
  --border-color: theme('colors.gray.300');
}

@screen dark {
  :root {
    --hover-overlay: hsla(0, 0%, 100%, 0.065);
    --active-overlay: hsla(0, 0%, 100%, 0.13);
    --balloon-color: hsla(0, 0%, 30%, 0.95);
    --body-background-color: theme('colors.gray.900');
    --body-color: theme('colors.gray.300');
    --border-color: theme('colors.gray.700');
  }
}

body {
  background-color: var(--body-background-color);
  color: var(--body-color);
}

img {
  /* Lower the `alt` texts' contrast rate */
  @apply text-gray-600;
}
