:root {
  --primary-500: #87384f; /* Long Close maroon */
  --primary-dark: #422e45;
  --primary-light: #dbc3ca;
  --primary-lighter: #f3ebed;
  --primary-extralight: #87384f08;

  --secondary-500: #393d65; /* Long Close navy */
  --secondary-dark: #22253c;
  --secondary-light: #393d650f;

  --tertiary-500: #c9a54b; /* Long Close gold accent */
  --tertiary-light: #c9a54b0f;

  --gray-base: #b5aaa1;
  --gray-light: #b5aaa13d;
  --gray-extralight: #f9f6f4;

  --alert-base: #c0392b;
  --alert-light: #c0392b1a;
  --alert-extralight: #c0392b0a;

  --warning-base: #c9a54b;
  --warning-light: #c9a54b1a;

  --success-base: #2e7d32;
  --success-light: #2e7d3245;

  --cx-rounded-small: 4px;
  --cx-rounded-medium: 8px;
  --cx-rounded-large: 16px;
  --cx-rounded-full: 99999999px;

  .primary-font-base {
    font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
    font-style: normal;
  }

  .secondary-font-base {
    font-family: "Playfair Display", "Georgia", "Times New Roman", 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;
}