@import url('https://api.fontshare.com/css?f[]=satoshi@400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400&display=swap');
@import 'tailwindcss';

@theme {
  --font-sans: 'Satoshi', sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', monospace;
}

@layer base {
  :root {
    color-scheme: dark;
  }

  html {
    @apply bg-slate-950;
  }

  body {
    @apply text-slate-50 font-sans;
  }

  button:not(:disabled) {
    @apply cursor-pointer;
  }

  h1, h2, h3 {
    @apply text-slate-200 font-bold;
  }

  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-xl;
  }
}

@layer components {
  .box {
    @apply text-sm flex flex-col gap-1 text-slate-400 transition-colors;

    @variant has-[:not(:first-child:focus):focus] {
      @apply text-slate-50;
    }
  }

  .box > :not(:first-child) {
    @apply border border-slate-400 p-2 text-slate-50 transition outline-none font-normal flex-1;

    @variant focus {
      @apply border-slate-50;
    }
  }

  .box > textarea {
    @apply resize-none placeholder-slate-400 font-mono;
  }

  .btn {
    @apply px-2 py-1 text-slate-400 border border-current transition-colors;

    @variant [&:hover,&:focus] {
      @apply text-slate-50;
    }

    @variant aria-checked {
      @apply bg-slate-50 text-slate-950 border-slate-50;
    }
  }
}
