/*
 * FLOWAYZ THEME SYSTEM - UTILITY CLASSES
 *
 * Auto-adaptive utility classes for theming.
 * These classes automatically respond to mode (light/dark) and accent changes.
 *
 * GUIDELINES FOR DEVELOPERS:
 * - Use these utilities instead of hardcoded colors
 * - bg-accent, text-accent, border-accent adapt to user's chosen accent
 * - bg-surface, text-primary etc. adapt to light/dark mode
 */

/* ========================================
   ACCENT COLOR UTILITIES
   ======================================== */

/* Background with accent — automatically sets contrasting text color.
 * GLOBAL RULE: .bg-accent always provides readable text via --accent-contrast.
 * To override, use an explicit color class or inline style.
 */
.bg-accent {
  background-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

/* Ensure SVGs inside accent backgrounds inherit the contrast color */
.bg-accent svg,
.bg-accent path {
  color: var(--accent-contrast);
  stroke: currentColor;
}
.bg-accent-50 { background-color: var(--accent-50) !important; }
.bg-accent-100 { background-color: var(--accent-100) !important; }
.bg-accent-200 { background-color: var(--accent-200) !important; }
.bg-accent-300 { background-color: var(--accent-300) !important; }
.bg-accent-400 { background-color: var(--accent-400) !important; }
.bg-accent-500 { background-color: var(--accent-500) !important; }
.bg-accent-600 { background-color: var(--accent-600) !important; }
.bg-accent-700 { background-color: var(--accent-700) !important; }
.bg-accent-800 { background-color: var(--accent-800) !important; }
.bg-accent-900 { background-color: var(--accent-900) !important; }

/* Semi-transparent accent backgrounds */
.bg-accent\/5 { background-color: var(--accent-5) !important; }
.bg-accent\/10 { background-color: var(--accent-10) !important; }
.bg-accent\/20 { background-color: var(--accent-20) !important; }
.bg-accent\/30 { background-color: var(--accent-30) !important; }

/* Text with accent */
.text-accent { color: var(--accent) !important; }
.text-accent-50 { color: var(--accent-50) !important; }
.text-accent-100 { color: var(--accent-100) !important; }
.text-accent-200 { color: var(--accent-200) !important; }
.text-accent-300 { color: var(--accent-300) !important; }
.text-accent-400 { color: var(--accent-400) !important; }
.text-accent-500 { color: var(--accent-500) !important; }
.text-accent-600 { color: var(--accent-600) !important; }
.text-accent-700 { color: var(--accent-700) !important; }
.text-accent-800 { color: var(--accent-800) !important; }
.text-accent-900 { color: var(--accent-900) !important; }
.text-accent-contrast { color: var(--accent-contrast) !important; }

/* Border with accent */
.border-accent { border-color: var(--accent) !important; }
.border-accent-100 { border-color: var(--accent-100) !important; }
.border-accent-200 { border-color: var(--accent-200) !important; }
.border-accent-300 { border-color: var(--accent-300) !important; }
.border-accent-500 { border-color: var(--accent-500) !important; }
.border-accent-700 { border-color: var(--accent-700) !important; }

/* Ring with accent (for focus states) */
.ring-accent { --tw-ring-color: var(--accent) !important; }
.ring-accent-200 { --tw-ring-color: var(--accent-200) !important; }
.ring-accent-500 { --tw-ring-color: var(--accent-500) !important; }

/* Focus utilities */
.focus\:ring-accent:focus { --tw-ring-color: var(--accent) !important; }
.focus\:border-accent:focus { border-color: var(--accent) !important; }
.focus\:text-accent:focus { color: var(--accent) !important; }

/* Hover utilities */
.hover\:bg-accent:hover {
  background-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
}
.hover\:bg-accent-hover:hover {
  background-color: var(--accent-hover) !important;
  color: var(--accent-contrast) !important;
}
.hover\:bg-accent\/10:hover { background-color: var(--accent-10) !important; }
.hover\:bg-accent\/20:hover { background-color: var(--accent-20) !important; }
.hover\:text-accent:hover { color: var(--accent) !important; }
.hover\:text-accent-600:hover { color: var(--accent-600) !important; }
.hover\:text-accent-700:hover { color: var(--accent-700) !important; }
.hover\:border-accent:hover { border-color: var(--accent) !important; }

/* ========================================
   SEMANTIC MODE UTILITIES (Light/Dark)
   ======================================== */

/* Already defined in design_tokens.css, extending here */

/* Divide colors */
.divide-default > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-default);
}

/* Placeholder colors */
.placeholder-tertiary::placeholder {
  color: var(--text-tertiary);
}

/* ========================================
   GRADIENT UTILITIES WITH ACCENT
   ======================================== */

.from-accent { --tw-gradient-from: var(--accent) !important; }
.to-accent { --tw-gradient-to: var(--accent) !important; }
.via-accent { --tw-gradient-via: var(--accent) !important; }

.from-accent-400 { --tw-gradient-from: var(--accent-400) !important; }
.to-accent-600 { --tw-gradient-to: var(--accent-600) !important; }

/* Brand gradient utilities - using CSS variables with fallbacks */
.bg-gradient-coral {
  background: linear-gradient(135deg, var(--flowayz-coral, #FF7B54) 0%, color-mix(in srgb, var(--flowayz-coral, #FF7B54) 80%, white) 100%);
}

.bg-gradient-teal {
  background: linear-gradient(135deg, var(--flowayz-teal, #38B2AC) 0%, color-mix(in srgb, var(--flowayz-teal, #38B2AC) 80%, white) 100%);
}

.bg-gradient-navy {
  background: linear-gradient(135deg, var(--flowayz-navy, #1A3C6B) 0%, color-mix(in srgb, var(--flowayz-navy, #1A3C6B) 70%, #3B82F6) 100%);
}

/* ========================================
   SHADOW UTILITIES WITH ACCENT
   ======================================== */

.shadow-accent {
  box-shadow: 0 4px 14px 0 var(--accent-30) !important;
}

.shadow-accent-lg {
  box-shadow: 0 6px 20px var(--accent-30) !important;
}

/* ========================================
   INTERACTIVE ELEMENT UTILITIES
   ======================================== */

/* Link styled with accent */
.link-accent {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

.link-accent:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Badge with accent */
.badge-accent {
  background-color: var(--accent-10);
  color: var(--accent);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Chip/Tag with accent */
.chip-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--accent-10);
  color: var(--accent);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Indicator dot with accent */
.dot-accent {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--accent);
}

/* ========================================
   FORM ELEMENTS WITH ACCENT
   ======================================== */

/* Checkbox styled with accent */
.checkbox-accent:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.checkbox-accent:focus {
  --tw-ring-color: var(--accent-30);
}

/* Radio styled with accent */
.radio-accent:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* Switch/Toggle styled with accent */
.switch-accent:checked {
  background-color: var(--accent);
}

/* Input focus with accent */
.input-accent:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-10);
}

/* ========================================
   NAVIGATION WITH ACCENT
   ======================================== */

/* Nav item active state */
.nav-accent-active {
  background-color: var(--accent);
  color: var(--accent-contrast);
}

/* Tab active state */
.tab-accent-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ========================================
   SELECTION COLOR
   ======================================== */

::selection {
  background-color: var(--accent-20);
}

::-moz-selection {
  background-color: var(--accent-20);
}

/* ========================================
   SCROLLBAR WITH ACCENT (WebKit)
   ======================================== */

.scrollbar-accent::-webkit-scrollbar-thumb {
  background-color: var(--accent-300);
  border-radius: 9999px;
}

.scrollbar-accent::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-400);
}

/* ========================================
   ANIMATIONS WITH ACCENT
   ======================================== */

@keyframes pulse-accent {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--accent-30);
  }
  50% {
    box-shadow: 0 0 0 8px transparent;
  }
}

.animate-pulse-accent {
  animation: pulse-accent 2s infinite;
}

@keyframes ping-accent {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping-accent {
  animation: ping-accent 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  background-color: var(--accent);
}