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

:root {
  --kn-primary-50:  216 232 254;  /* #d8e8fe */
  --kn-primary-100: 181 212 252;  /* #b5d4fc */
  --kn-primary-200: 102 166 250;  /* #66a6fa */
  --kn-primary-300: 28 123 247;   /* #1c7bf7 */
  --kn-primary-400: 7 87 192;     /* #0757c0 */
  --kn-primary-500: 4 53 117;     /* #043575 */
  --kn-primary-600: 3 42 94;      /* #032a5e */
  --kn-primary-700: 2 31 69;      /* #021f45 */
  --kn-primary-800: 2 20 44;      /* #02142c */
  --kn-primary-900: 1 11 25;      /* #010b19 */
  --kn-primary-950: 0 4 10;       /* #00040a */

  --kn-secondary-50:  255 219 225;  /* #ffdbe1 */
  --kn-secondary-100: 255 189 199;  /* #ffbdc7 */
  --kn-secondary-200: 255 117 138;  /* #ff758a */
  --kn-secondary-300: 255 51 82;    /* #ff3352 */
  --kn-secondary-400: 235 0 35;     /* #eb0023 */
  --kn-secondary-500: 166 0 25;     /* #a60019 */
  --kn-secondary-600: 133 0 20;     /* #850014 */
  --kn-secondary-700: 102 0 15;     /* #66000f */
  --kn-secondary-800: 66 0 10;      /* #42000a */
  --kn-secondary-900: 36 0 5;       /* #240005 */
  --kn-secondary-950: 15 0 2;       /* #0f0002 */

  --kn-tertiary-50: 240 253 250;
  --kn-tertiary-100: 204 251 241;
  --kn-tertiary-200: 153 246 228;
  --kn-tertiary-300: 94 234 212;
  --kn-tertiary-400: 45 212 191;
  --kn-tertiary-500: 20 184 166;
  --kn-tertiary-600: 13 148 136;
  --kn-tertiary-700: 15 118 110;
  --kn-tertiary-800: 17 94 89;
  --kn-tertiary-900: 19 78 74;
  --kn-tertiary-950: 4 47 46;

  /*
  --kn-background-50: 239 246 255;
  --kn-background-100: 219 234 254;
  --kn-background-200: 191 219 254;
  --kn-background-300: 147 197 253;
  --kn-background-400: 96 165 250;
  --kn-background-500: 59 130 246;
  --kn-background-600: 37 99 235;
  --kn-background-700: 29 78 216;
  --kn-background-800: 30 64 175;
  --kn-background-900: 30 58 138;
  --kn-background-950: 23 37 84;
  */
  --kn-background-50: 243 244 246;
  --kn-background-500: 255 255 255;

  --kn-foreground-50: 249 250 251;
  --kn-foreground-100: 243 244 246;
  --kn-foreground-200: 229 231 235;
  --kn-foreground-300: 209 213 219;
  --kn-foreground-400: 156 163 175;
  --kn-foreground-500: 107 114 128;
  --kn-foreground-600: 75 85 99;
  --kn-foreground-700: 55 65 81;
  --kn-foreground-800: 31 41 55;
  --kn-foreground-900: 17 24 39;
  --kn-foreground-950: 3 7 18;
}

@layer components {
  /** Buttons */
  .btn {
    @apply relative inline-flex items-center rounded-md px-4 py-2 text-sm font-medium;
  }

  .btn-primary {
    @apply border border-primary-300 bg-primary-300 hover:bg-primary-400 text-white;
  }

  .btn-secondary {
    @apply border border-secondary-300 bg-secondary-300 hover:bg-secondary-200 text-white;
  }

  .btn-tertiary {
    @apply border border-tertiary-300 bg-tertiary-300 hover:bg-tertiary-200 text-tertiary-900;
  }

  .btn-amber {
    @apply border border-amber-300 bg-amber-300 hover:bg-amber-200 text-amber-900;
  }

  .btn-teal {
    @apply border border-teal-300 bg-teal-300 hover:bg-teal-200 text-teal-900;
  }

  .btn-danger {
    @apply border border-red-600 bg-red-500 hover:bg-red-600 text-white;
  }

  .btn-neutral {
    @apply border border-gray-300 bg-background text-foreground-700 hover:bg-gray-50;
  }

  .btn-disabled {
    @apply cursor-not-allowed;
  }
  /** -- Buttons */

  /** Pagy */
  .pagy {
    @apply text-sm text-foreground-700;

    label {
      @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
      input {
        @apply bg-gray-100 border-none rounded-md;
      }
    }
  }

  .pagy.nav {
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
  }

  .pagy.nav a {
    @apply relative inline-flex items-center px-4 py-2 font-semibold text-foreground-900 ring-1 ring-inset ring-gray-300;

    &:first-child {
      @apply rounded-l-md text-foreground-400;
    }

    &:last-child {
      @apply rounded-r-md text-foreground-400;
    }

    &:hover {
      @apply bg-gray-50;
    }

    &:focus {
      @apply z-20 outline-offset-0;
    }

    &:not([href]) {
      @apply text-foreground-300 bg-gray-100 cursor-default;
    }
  }

  .pagy.nav a.current {
    @apply text-secondary-700 bg-secondary-200;
  }
  /** -- Pagy */
}