:root {
  --primary-500: #1b2a5b;
  --primary-dark: #0f1b3d;
  --primary-light: #e8ecf6;
  --primary-lighter: oklch(97% 0.02 255);
  --primary-extralight: #1b2a5b0d;

  --secondary-500: #d2b36b;
  --secondary-dark: #b08f3e;
  --secondary-light: #d2b36b1a;

  --tertiary-500: #f2c94c;
  --tertiary-light: #f2c94c1a;

  --gray-base: #6b7280;
  --gray-light: #6b72803d;
  --gray-extralight: #f5f7fb;

  --alert-base: #d32f2f;
  --alert-light: #d32f2f1a;
  --alert-extralight: #d32f2f0a;

  --warning-base: #f59e0b;
  --warning-light: #f59e0b1a;

  --success-base: #16a34a;
  --success-light: #16a34a45;

  --cx-rounded-small: 6px;
  --cx-rounded-medium: 14px;
  --cx-rounded-large: 28px;
  --cx-rounded-full: 99999999px;

  .primary-font-base {
    font-family: "Inter", sans-serif;
    font-style: normal;
  }

  .secondary-font-base {
    font-family: "Inter", sans-serif;
    font-style: normal;
  }

  [x-cloak] {
    display: none;
  }
}


/* A reusable class for pulsing when HTMX is loading */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.htmx-pulse.htmx-request {
  animation: pulse 2s infinite;
  cursor: wait;
}