:root {
  /* --- JMIC-inspired palette --- */
  /* Primary = gold accent used for buttons/headings */
  --primary-500: #b89d52; /* gold */
  --primary-dark: #8e7633; /* deeper gold/brown */
  --primary-light: #f5efd9; /* warm off-white with gold tint */
  --primary-lighter: #fcf8ea; /* extra-light background wash */
  --primary-extralight: #b89d520f; /* translucent gold wash */

  /* Secondary = dark ink/charcoal used in nav/text */
  --secondary-500: #1e2430; /* near-black/ink */
  --secondary-dark: #0f131b; /* even darker for hovers */
  --secondary-light: #1e24300d; /* subtle overlay */

  /* Tertiary = muted forest green (seen in accents/photos/brand) */
  --tertiary-500: #0f4d3a; /* deep green */
  --tertiary-light: #0f4d3a14; /* gentle green tint */

  /* Neutrals */
  --gray-base: #6b7280; /* muted slate */
  --gray-light: #e5e7eb; /* light divider */
  --gray-extralight: #fafafa; /* page bg */

  /* Status colors (kept harmonious with the new scheme) */
  --alert-base: #d92d20; /* red */
  --alert-light: #d92d201a;
  --alert-extralight: #d92d200a;

  --warning-base: #c27c1a; /* warmer amber to fit gold */
  --warning-light: #c27c1a1a;

  --success-base: #10b981; /* emerald that fits with green */
  --success-light: #10b98145;

  /* Radii */
  --cx-rounded-small: 4px;
  --cx-rounded-medium: 8px;
  --cx-rounded-large: 16px;
  --cx-rounded-full: 99999999px;
}

/* Typography helpers (keep as-is unless you want to swap fonts) */
.primary-font-base {
  font-family: "Poppins", sans-serif;
  font-style: normal;
}
.secondary-font-base {
  font-family: "IBM Plex Mono", monospace;
  font-style: normal;
}

/* Utility */
[x-cloak] {
  display: none;
}

/* Reusable HTMX loading pulse */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.htmx-pulse.htmx-request {
  animation: pulse 2s infinite;
  cursor: wait;
}