/*
 * AICEO live H5 compatibility bridge.
 * Generated tokens remain the source of truth; this file only maps legacy
 * hard-coded SmartWell utility colors to the shared design-system semantics.
 */
:root {
  color-scheme: dark;
}

html,
body,
#root {
  min-height: 100%;
  background: var(--ds-color-canvas);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-family-sans);
}

#root [class*="bg-[#F0F7F4]"],
#root [class*="bg-[#FAFAFA]"],
#root [class*="bg-slate-950"] {
  background-color: var(--ds-color-canvas) !important;
}

#root [class*="from-[#E8F4ED]"] {
  --tw-gradient-from: var(--ds-color-surface-elevated) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: color-mix(in srgb, var(--ds-color-surface-elevated) 0%, transparent) var(--tw-gradient-to-position) !important;
}

#root [class*="via-[#F0F7F4]"] {
  --tw-gradient-to: color-mix(in srgb, var(--ds-color-surface) 0%, transparent) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--ds-color-surface) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

#root [class*="to-[#FAFAFA]"] {
  --tw-gradient-to: var(--ds-color-canvas) var(--tw-gradient-to-position) !important;
}

#root [class*="bg-[#F5FAF7]"],
#root [class*="bg-[#F0F7F4]/"],
#root [class*="bg-card"],
#root [class*="bg-background"] {
  background-color: var(--ds-color-surface) !important;
}

#root [class*="bg-[#E8F4ED]"],
#root [class*="bg-[#D5EDE0]"],
#root [class*="bg-emerald-400/"] {
  background-color: var(--ds-color-surface-elevated) !important;
}

#root [class*="bg-[#4A7C59]"],
#root [class~="bg-emerald-400"] {
  background-color: var(--ds-color-primary) !important;
  color: var(--ds-color-on-primary) !important;
}

#root [class*="border-[#C8DDD4]"],
#root [class*="border-emerald-300"],
#root [class*="border-white/15"],
#root [class*="border-border"] {
  border-color: var(--ds-color-border) !important;
}

#root [class*="border-[#4A7C59]"] {
  border-color: var(--ds-color-primary) !important;
}

#root [class*="text-[#2D3436]"],
#root [class*="text-slate-950"],
#root [class*="text-foreground"],
#root h1,
#root h2,
#root h3,
#root h4,
#root p {
  color: var(--ds-color-text-primary) !important;
}

#root [class*="text-[#5B6668]"],
#root [class*="text-muted-foreground"],
#root [class*="text-slate-400"],
#root [class*="text-slate-300"] {
  color: var(--ds-color-text-secondary) !important;
}

#root [class*="text-[#4A7C59]"],
#root [class*="text-emerald-"],
#root a:not([class*="text-"]) {
  color: var(--ds-color-primary) !important;
}

#root [class*="text-[#FAFAFA]"],
#root [class~="text-white"],
#root [class*="text-white/"] {
  color: var(--ds-color-on-primary) !important;
}

#root button,
#root input,
#root textarea,
#root select {
  font-family: var(--ds-font-family-sans);
  transition-duration: var(--ds-duration-normal) !important;
  transition-timing-function: var(--ds-easing-standard) !important;
}

#root button:focus-visible,
#root a:focus-visible,
#root input:focus-visible,
#root textarea:focus-visible,
#root select:focus-visible {
  outline: 3px solid var(--ds-color-focus) !important;
  outline-offset: 2px !important;
}

#root input,
#root textarea,
#root select {
  background: var(--ds-color-surface-elevated) !important;
  border-color: var(--ds-color-border) !important;
  color: var(--ds-color-text-primary) !important;
}

#root input::placeholder,
#root textarea::placeholder {
  color: var(--ds-color-text-muted) !important;
  opacity: 1;
}

#root [class*="shadow-[0_"] {
  box-shadow: var(--ds-shadow-sm) !important;
}

#root [class*="shadow-lg"],
#root [class*="shadow-xl"] {
  box-shadow: var(--ds-shadow-md) !important;
}

@media (prefers-reduced-motion: reduce) {
  #root *,
  #root *::before,
  #root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keep semantic foreground on all legacy primary buttons after text mappings. */
#root button[class*="bg-[#4A7C59]"],
#root button[class~="bg-emerald-400"] {
  background-color: var(--ds-color-primary) !important;
  border-color: var(--ds-color-primary) !important;
  color: var(--ds-color-on-primary) !important;
}

/* Legacy slate body copy on dark purple cards. */
#root [class*="text-[#4A5568]"] {
  color: var(--ds-color-text-secondary) !important;
}