@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
  font-family: "libertinus-bold";
  src: url("../assets/fonts/libertinus_serif/LibertinusSerif-Bold.woff2");
}
@font-face {
  font-family: "libertinus-semibold";
  src: url("../assets/fonts/libertinus_serif/LibertinusSerif-Semibold.woff2");
}
@font-face {
  font-family: "libertinus-regular";
  src: url("../assets/fonts/libertinus_serif/LibertinusSerif-Regular.woff2");
}
@font-face {
  font-family: "karla-extrabold";
  src: url("../assets/fonts/karla/Karla-ExtraBold.ttf");
}
@font-face {
  font-family: "karla-bold";
  src: url("../assets/fonts/karla/Karla-Bold.ttf");
}
@font-face {
  font-family: "karla-semibold";
  src: url("../assets/fonts/karla/Karla-SemiBold.ttf");
}
@font-face {
  font-family: "karla-regular";
  src: url("../assets/fonts/karla/Karla-Regular.ttf");
}
@font-face {
  font-family: "karla-light";
  src: url("../assets/fonts/karla/Karla-Light.ttf");
}
@layer base {
  html {
    @apply font-regular;
  }
}
.currency {
  @apply font-mono;
}

h1 {
  @apply text-5xl font-serif-bold;
}

h2 {
  @apply text-4xl font-serif-bold;
}

h3 {
  @apply text-3xl font-serif-bold;
}

h4 {
  @apply text-2xl font-serif-bold;
}

h5 {
  @apply text-xl font-serif-bold;
}

h6 {
  @apply text-base font-serif-bold;
}

a {
  @apply no-underline
    text-secondary
    ring-offset-2
    focus:ring-1
    ring-current;
}

small {
  @apply text-xs;
}

.button {
  @apply py-2
    px-4
    rounded-md
    ring-offset-2
    focus:ring-1
    ring-current
    transition
    shadow-sm
    ease-in-out
    disabled:bg-gray-100
    disabled:hover:bg-gray-100
    disabled:text-gray-400
    disabled:shadow-inner
    disabled:cursor-not-allowed;
}
.button--primary {
  @apply bg-primary-900 hover:bg-primary text-white ring-primary-900;
}
.button--secondary {
  @apply bg-secondary-900 hover:bg-secondary text-white ring-secondary-900;
}
.button--success {
  @apply bg-success-100 hover:bg-success-200 text-success;
}
.button--info {
  @apply bg-info-100 hover:bg-info-200 text-info;
}
.button--warning {
  @apply bg-warning-100 hover:bg-warning-200 text-warning;
}
.button--danger {
  @apply bg-error-100 hover:bg-error-200 text-error;
}
.button--text {
  @apply border-0 shadow-none bg-transparent ring-offset-0 ring-current;
}
.button--icon {
  @apply w-8 h-8 p-2 rounded-full;
}
.button--fab {
  @apply p-4;
}
.button--sm {
  @apply text-sm;
}
.button--xs {
  @apply text-xs;
}
.button--md {
  @apply text-base;
}
.button--lg {
  @apply text-lg;
}
.button--block {
  @apply w-full;
}
.button--w-icon span {
  @apply ml-2;
}

.header {
  @apply flex
    justify-between
    items-center
    h-14
    py-2
    px-6
    shadow;
}

.card {
  @apply shadow
    border
    border-gray-200
    border-r-2
    rounded-2xl;
}
.card--heavy {
  @apply shadow-lg;
}
.card--medium {
  @apply shadow-md;
}
.card--flat {
  @apply shadow-none;
}

input.input,
select.input,
textarea.input {
  @apply bg-gray-100
      w-full
      px-4 
      py-2 
      rounded-md
      text-sm
      focus:outline-info-100
      disabled:bg-gray-200
      disabled:cursor-not-allowed
      disabled:shadow-inner
      text-primary
      focus:ring-0
      border-0;
}
input.white,
select.white,
textarea.white {
  @apply bg-white;
}
input.input-error,
select.input-error,
textarea.input-error {
  @apply border-solid
      border-2
      border-error-300;
}
input.checkbox,
select.checkbox,
textarea.checkbox {
  @apply border-2
      border-secondary
      checked:bg-secondary
      checked:hover:bg-secondary
      focus:ring-1
      focus:ring-secondary
      checked:focus:bg-secondary;
}

label.label {
  @apply flex items-center text-primary font-medium text-sm ml-2 mt-1 mb-1;
}

input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus {
  @apply outline-none;
}