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

/* @layer base { */
:root {
  --color-base: 31 27 54;
  --color-accented:  37 99 235;
  --color-inverted: 255 255 255;
  --color-accented-hover: 59 130 246;
  --color-muted: 55 65 81;
  --color-dimmed: 75 85 99;
  --color-error: 220 38 38;

  --color-border-base: 209 213 219;
  --color-border-accented:  37 99 235;
}

.label {
  @apply text-sm font-medium text-skin-muted;
}

.input {
  @apply appearance-none rounded-md border border-skin-base px-3 py-2 placeholder-gray-400 shadow-sm focus:border-skin-accented focus:outline-none focus:ring-skin-accented sm:text-sm;
}

.link {
  @apply font-medium text-skin-accented hover:text-skin-accented-hover;
}

.check {
  @apply border-skin-base h-4 w-4 text-skin-accented focus:ring-skin-accented rounded;
}

.button {
  @apply inline-flex justify-center py-2 px-4 border border-skin-base rounded-md shadow-sm text-sm font-medium text-skin-muted bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-skin-accented;
}

.control-error .label {
  @apply text-skin-error;
}

.control-error .input {
  @apply border-skin-error focus:border-skin-error focus:ring-skin-error;
}

.help {
  @apply mt-2 text-sm text-skin-dimmed;
}

.help-error {
  @apply text-skin-error;
}

.button[disabled] {
  @apply bg-gray-50 text-skin-dimmed cursor-default;
}

.button-accented {
  @apply rounded-md border border-transparent bg-skin-accented py-2 px-4 text-sm font-medium text-skin-inverted shadow-sm hover:bg-skin-accented-hover focus:outline-none focus:ring-2 focus:ring-skin-accented focus:ring-offset-2;
}

input[type="search"] {
  @apply block w-full rounded-md border border-skin-base pl-10 leading-5 placeholder-gray-400 focus:placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-skin-accented focus:border-skin-accented sm:text-sm;
}

.desktop-menu {
  @apply hidden lg:ml-6 lg:flex lg:space-x-8;
}

.desktop-menu-item {
  @apply font-sans uppercase border-transparent text-skin-dimmed underline-offset-4 decoration-2 hover:underline hover:decoration-skin-accented hover:text-skin-muted inline-flex items-center px-1 pt-1 text-sm font-medium;
}

.desktop-menu-item__active {
  @apply decoration-skin-accented underline text-skin-base;
}

.mobile-menu {
  @apply pt-2 pb-3 space-y-1;
}

.mobile-menu-item {
  @apply font-sans border-transparent text-skin-dimmed hover:bg-gray-200 hover:border-gray-300 hover:text-skin-muted block pl-3 pr-4 py-2 border-l-4 text-base font-medium;
}

.mobile-menu-item__active {
  @apply bg-skin-accented-hover border-skin-accented text-skin-accented hover:text-skin-accented hover:bg-skin-accented-hover hover:border-skin-accented;
}

.desktop-profile-menu-item {
  @apply block w-full text-left font-sans px-4 py-2 text-sm text-skin-dimmed hover:bg-gray-200 hover:text-skin-muted;
}

.mobile-profile-menu-item {
  @apply block font-sans px-4 py-2 text-base font-medium text-skin-dimmed hover:text-skin-muted hover:bg-gray-200;
}

.mobile-button {
  @apply inline-flex items-center justify-center p-2 rounded-md text-skin-dimmed hover:text-skin-muted hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-skin-accented;
}