@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

:root {
  --app-primary: var(--color-yellow-500);
  --app-1: var(--color-zinc-50);
  --app-2: var(--color-zinc-400);
  --app-surface-1: var(--color-zinc-950);
  --app-surface-2: var(--color-zinc-900);
  --app-surface-3: var(--color-zinc-800);
  --app-surface-4: var(--color-zinc-700);
  --app-surface-5: var(--color-zinc-600);
  --app-surface-6: var(--color-zinc-500);
}

@theme {
  --color-primary: var(--app-primary);
  --color-1: var(--app-1);
  --color-2: var(--app-2);
  --color-surface-1: var(--app-surface-1);
  --color-surface-2: var(--app-surface-2);
  --color-surface-3: var(--app-surface-3);
  --color-surface-4: var(--app-surface-4);
  --color-surface-5: var(--app-surface-5);
  --color-surface-6: var(--app-surface-6);
}

@utility app-dim {
  @apply hover:opacity-70 active:opacity-90 transform-gpu transition-opacity;
}


@layer base {
  @font-face {
    font-family: 'Commit Mono';
    src: url("CommitMono-VariableFont.woff2") format('woff2-variations');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-style: normal;
  }

  body {
    @apply font-sans antialiased caret-primary bg-surface-1 text-1;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold font-sans;
  }

  form {
    @apply grid grid-cols-1 gap-2;
  }

  form label {
    @apply font-semibold mt-4;

    &:first-of-type {
      @apply mt-0;
    }
  }

  input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="datetime-local"], input[type="number"], textarea {
    @apply bg-zinc-800 border-zinc-700 w-full rounded;

    &:focus {
      @apply ring-primary border-primary;
    }
  }

  input[type="checkbox"] {
    @apply size-4 rounded border-zinc-300 text-primary focus:ring-primary;
  }

  input[type="submit"] {
    @apply px-3 py-3 text-primary border border-2 border-primary text-sm cursor-pointer
        font-semibold hover:opacity-70 active:opacity-90 transform-gpu transition-opacity;

    &:focus {
      @apply ring-4 ring-primary/20;
      outline: none;
    }
  }

  a:not([class]) {
    @apply hover:opacity-70 active:opacity-90 transform-gpu transition-opacity font-semibold;
  }
}

.app-block:not(:last-child) {
  @apply mb-4;
}

.btn-primary {
  @apply px-3 h-10 leading-1 inline-flex items-center justify-center text-primary border border-2 border-primary text-sm cursor-pointer
    font-semibold hover:opacity-70 active:opacity-90 transform-gpu transition-opacity
    self-start whitespace-nowrap rounded;
}

.btn-dark {
  @apply px-3 h-10 leading-1 inline-flex items-center justify-center bg-zinc-950 text-zinc-50 text-sm cursor-pointer
    font-semibold hover:opacity-70 active:opacity-90 transform-gpu transition-opacity self-start whitespace-nowrap rounded;
}

.btn-secondary {
  @apply px-3 h-10 leading-1 inline-flex items-center justify-center bg-zinc-200 text-surface-1 text-sm cursor-pointer
    font-semibold hover:opacity-70 active:opacity-90 transform-gpu transition-opacity self-start whitespace-nowrap rounded;
}

.btn-link {
  @apply px-3 h-10 leading-1 inline-flex items-center justify-center text-sm cursor-pointer
    font-semibold hover:opacity-70 active:opacity-90 transform-gpu transition-opacity self-start whitespace-nowrap rounded;
}

.btn-danger {
  @apply px-3 h-10 leading-1 inline-flex items-center justify-center text-sm cursor-pointer text-red-500
    font-semibold hover:opacity-70 active:opacity-90 transform-gpu transition-opacity self-start whitespace-nowrap rounded;
}

/* Devise */

body.devise {
  @apply bg-surface-1 text-1;

  h2 {
    @apply text-2xl;
  }
}

trix-toolbar .trix-button--icon {
  filter: invert(1) !important;
}