/*
 * 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;
}

/* Ensure ALL text elements inside accent backgrounds get contrast color.
   Needed because design_tokens.css global rules (h1-h6, p, span, etc.)
   directly set color on these elements, overriding inherited values. */
.bg-accent span,
.bg-accent p,
.bg-accent a,
.bg-accent h1, .bg-accent h2, .bg-accent h3,
.bg-accent h4, .bg-accent h5, .bg-accent h6,
.bg-accent li,
.bg-accent td,
.bg-accent th {
  color: var(--accent-contrast) !important;
}

.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:hover span,
.hover\:bg-accent:hover p,
.hover\:bg-accent:hover a {
  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);
}

/* ========================================
   TYPOGRAPHY UTILITIES
   ======================================== */

/* Display type (Fraunces serif) — UNIQUEMENT pour hero H1 marketing oversize.
 * Ne jamais appliquer sur UI app, dashboard, formulaires, body, blog body.
 * Cibles autorisées : landing/_hero.html.erb H1, fondateur/_hero.html.erb H1,
 * subscriptions/index.html.erb hero H1, signup modal title (optionnel).
 * Cf. docs/DESIGN_PREMIUM.md + plan Sprint 1.1 (Steve Jobs Neat).
 */
.font-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-ultratight);
  line-height: var(--leading-display);
  font-optical-sizing: auto;
}

.font-mono { font-family: var(--font-mono); }
.font-primary { font-family: var(--font-primary); }

/* ----------------------------------------
   Fraunces — optical sizing explicite
   font-optical-sizing: auto couvre la plupart des cas ;
   ces classes forcent une valeur opsz+wght précise
   pour les titres où l'impact doit être maximal.
   ---------------------------------------- */
.fz-display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "wght" 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.fz-heading-display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40, "wght" 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.fz-heading-serif {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 20, "wght" 450;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ----------------------------------------
   Gradient text — accent-aware & brand
   ---------------------------------------- */
.gradient-text {
  background: linear-gradient(135deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 70%, var(--color-teal, #38B2AC) 30%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Fallback : si background-clip non supporté */
  color: var(--accent);
}

.gradient-text-brand {
  background: linear-gradient(135deg,
    var(--color-coral, #FF7B54) 0%,
    var(--color-teal, #38B2AC) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--color-coral, #FF7B54);
}

/* Gradient animé subtil — pour highlights premium (plans, CTA héros) */
.gradient-text-animated {
  background: linear-gradient(270deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 60%, #ffffff 40%) 50%,
    var(--accent) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-text-shift 3s linear infinite;
}

@keyframes gradient-text-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text-animated { animation: none; }
}

/* ----------------------------------------
   Scrollbar custom — accent-aware, discret
   ---------------------------------------- */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--accent-20, rgba(0,0,0,0.12));
  border-radius: var(--radius-full, 9999px);
  transition: background 150ms ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-40, rgba(0,0,0,0.25));
}
/* Scrollbars Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-20, rgba(0,0,0,0.12)) transparent;
}