@import "tailwindcss";

@theme {
  --color-primary: #AD954F;
  --color-secondary: #FF9800;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-secondary: #000000;
}

body {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Global button microinteraction */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .text-button,
  .btn-text
) {
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    transform 0.16s ease,
    opacity 0.18s ease;
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .text-button,
  .btn-text
):where(:hover, :focus-visible) {
  filter: brightness(0.97);
  transform: translateY(-1px);
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .text-button,
  .btn-text
):active {
  filter: brightness(0.94);
  transform: translateY(0);
}

:where(
  button:disabled,
  input[type="button"]:disabled,
  input[type="submit"]:disabled,
  input[type="reset"]:disabled,
  [role="button"][aria-disabled="true"],
  .text-button[aria-disabled="true"],
  .btn-text[aria-disabled="true"]
) {
  cursor: not-allowed;
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"],
    .text-button,
    .btn-text
  ) {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  }

  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"],
    .text-button,
    .btn-text
  ):where(:hover, :focus-visible) {
    transform: none;
  }
}

/* Global skeleton and spinner utilities */
.loader.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}