/* Accent utilities driven by the single --accent CSS variable set in base.html.
   Rebranding = change --accent (or settings.accent_color) in one place. */
.bg-accent      { background-color: var(--accent); }
.text-accent    { color: var(--accent); }
.border-accent  { border-color: var(--accent); }
.ring-accent    { --tw-ring-color: var(--accent); }

/* Opacity-modifier variants used in markup (bg-accent/10 etc.) rely on Tailwind,
   but these plain fallbacks keep the accent tint working without a build step. */
.bg-accent\/10  { background-color: color-mix(in srgb, var(--accent) 10%, transparent); }
.bg-accent\/15  { background-color: color-mix(in srgb, var(--accent) 15%, transparent); }

/* Consistent, visible focus ring for interactive elements that don't already carry
   their own (buttons, links, summary). Form fields keep their focus:ring-accent styles.
   Accessibility (visual-overhaul §3.8). */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* Soft, warm elevation for cards — subtle depth instead of hard lines
   (visual-overhaul §3.4). Applied to the standard card surface pattern. */
.rounded-2xl.border { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.03); }
.dark .rounded-2xl.border { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.25); }

/* Loading spinner. */
.spinner { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Gentle "settled" pop for the parent confirmation check (visual-overhaul §3.5/§4.1).
   Disabled automatically by the reduced-motion rule below. */
@keyframes pop-in {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.animate-pop-in { animation: pop-in 0.35s ease-out both; }

/* Respect reduced-motion for every animation/transition. */
@media (prefers-reduced-motion: reduce) {
  *, html, body { transition: none !important; animation: none !important; }
}
