:root {
  --ui-bg: #efe7d2;
  --ui-surface: #f7f1de;
  --ui-surface-muted: #ece4cf;
  --ui-text: #15140f;
  --ui-text-muted: #5a5448;
  --ui-text-subtle: #5a5448;
  --ui-primary: #ed6f5c;
  --ui-primary-strong: #e25e4a;
  --ui-primary-ink: #a82f20;
  --ui-on-primary: #15140f;
  --ui-success: #0f684b;
  --ui-danger: #c53030;
  --ui-focus: #ed6f5c;
  --ui-border: #ddd2b6;
  --ui-radius-sm: 10px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 24px;
  --ui-shadow-clay: 0 18px 36px -16px rgba(21, 20, 15, 0.24), inset 0 6px 12px rgba(247, 241, 222, 0.96), inset 0 -8px 16px rgba(237, 111, 92, 0.07);
  --ui-transition: 160ms ease;

  /* Compatibilidade dos componentes existentes, agora ligada à paleta da landing. */
  --clay-bg: #efe7d2;
  --clay-surface: #f7f1de;
  --clay-grad: linear-gradient(135deg, #f08e7c, #e25e4a);
  --clay-pop: 0 26px 50px -22px rgba(21, 20, 15, 0.3), inset 0 8px 16px rgba(247, 241, 222, 0.98), inset 0 -10px 20px rgba(237, 111, 92, 0.1);
  --clay-mid: 0 18px 36px -16px rgba(21, 20, 15, 0.24), inset 0 6px 12px rgba(247, 241, 222, 0.96), inset 0 -8px 16px rgba(237, 111, 92, 0.08);
  --clay-soft: 0 10px 18px -8px rgba(21, 20, 15, 0.22), inset 0 3px 6px rgba(247, 241, 222, 0.95), inset 0 -4px 8px rgba(21, 20, 15, 0.09);
  --clay-btn: 0 13px 23px -9px rgba(237, 111, 92, 0.5), inset 0 4px 7px rgba(247, 241, 222, 0.45), inset 0 -6px 10px rgba(21, 20, 15, 0.24);
  --clay-inset: inset 0 4px 8px rgba(21, 20, 15, 0.1), inset 0 -2px 5px rgba(247, 241, 222, 0.9);
  --clay-lilac: #ece4cf;
  --clay-lilac-ink: #a82f20;
  --clay-peach: #f7f1de;
  --clay-peach-ink: #5a5448;
  --clay-mint: #dff3e8;
  --clay-mint-ink: #137a4c;
  --clay-sky: #e3eefb;
  --clay-sky-ink: #2563b8;
  --clay-rose: #fde8f0;
  --clay-rose-ink: #c23a72;
  --clay-butter: #fbf0d2;
  --clay-butter-ink: #8a6a10;
}

:where(body, body *) {
  letter-spacing: 0 !important;
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid rgba(237, 111, 92, 0.72);
  outline-offset: 3px;
}

:where(button, [role="button"])[aria-busy="true"] {
  cursor: wait !important;
  opacity: 0.72;
}

.ui-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ux-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: min(260px, calc(100vw - 16px));
  padding: 7px 10px;
  border-radius: 8px;
  background: #15140f;
  color: #f7f1de;
  box-shadow: 0 10px 24px -12px rgba(21, 20, 15, 0.7);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.ux-tooltip[hidden] {
  display: none;
}

.ux-skeleton {
  position: relative;
  overflow: hidden;
  background: #ddd2b6;
}

.ux-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(247, 241, 222, 0.72), transparent);
  transform: translateX(-100%);
  animation: ux-skeleton-pulse 1.8s ease-in-out infinite;
}

@keyframes ux-skeleton-pulse {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .ux-skeleton::after {
    display: none;
  }
}