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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }

  span {
    @apply text-white;
  }

  a {
    @apply text-blue-600 underline;
  }

  select,
  input {
    @apply box-border bg-transparent shadow-main/10 hover:shadow-primary/50
    focus:ring-primary focus:ring-2 focus:ring-offset-2
    focus:shadow-primary selection:bg-secondary selection:text-black 
    outline-none px-3 py-2 rounded-md shadow-[0_0_0_1px];
  }

  input {
    @apply appearance-none items-center justify-center 
     w-full  text-base leading-none transition-all;
  }

  select {
    @apply appearance-none;
  }

  :root {
    --color-main: 0 0% 0%;

    --color-secondary: 0 0% 10%;

    --color-neutral: 0 0% 100%;
    --color-neutral-accent: 0 0% 90%;

    --color-highlight: 0 0% 0%;

    --color-primary: 222.2 47.4% 11.2%;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-main: 0 0% 100%;

      --color-primary: 260 80% 50%;
      --color-secondary: 260 50% 70%;

      --color-neutral: 250 30% 8%;
      --color-neutral-accent: 250 40% 12%;

      --color-highlight: 250 20% 15%;
    }
  }
}

@layer base {
  * {
    @apply border-highlight;
  }
  body {
    @apply bg-neutral text-main;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

label {
  @apply mb-1 text-sm opacity-70;
}

fieldset {
  @apply mb-2 flex flex-col items-start;
}

:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
