/**
 * Marketing Component Utilities
 *
 * This file defines reusable CSS utilities for marketing landing pages.
 * These classes ensure consistent gradient text, badges, and contrast
 * across all marketing templates.
 *
 * USAGE:
 * - Consumer audience: .text-gradient-hero (pink-violet)
 * - Investor audience: .text-gradient-investor (blue-cyan)
 * - Labs audience: .text-gradient-labs (cyan-emerald)
 *
 * IMPORTANT: Use these utility classes instead of inline styles.
 * Never use style="background-image: linear-gradient(...)" in templates.
 */

@layer components {
  /* ============================================
     GRADIENT TEXT UTILITIES
     ============================================ */

  /**
   * Consumer/Hero gradient (pink to violet)
   * Use for: Consumer landing page headlines, CTAs
   */
  .text-gradient-hero {
    background-image: linear-gradient(to right, #db2777, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /**
   * Investor gradient (blue to cyan)
   * Use for: Investor landing page headlines, metrics
   */
  .text-gradient-investor {
    background-image: linear-gradient(to right, #2563eb, #0891b2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /**
   * Labs/B2B gradient (cyan to emerald)
   * Use for: Labs landing page headlines, business metrics
   */
  .text-gradient-labs {
    background-image: linear-gradient(to right, #0891b2, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /**
   * Alternative gradients for variety
   */
  .text-gradient-pink-violet {
    background-image: linear-gradient(to right, #ec4899, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .text-gradient-violet-purple {
    background-image: linear-gradient(to right, #8b5cf6, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .text-gradient-cyan-teal {
    background-image: linear-gradient(to right, #06b6d4, #14b8a6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .text-gradient-teal-emerald {
    background-image: linear-gradient(to right, #14b8a6, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /**
   * Amber-Orange gradient
   * Use for: LifeSense marketplace headlines, pricing sections
   */
  .text-gradient-amber-orange {
    background-image: linear-gradient(to right, #d97706, #ea580c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* ============================================
     BADGE ELEVATION TOKENS
     For badges on dark backgrounds (>= slate-800)
     ============================================ */

  /**
   * Generic elevated badge
   * Adds visual separation from dark backgrounds
   */
  .badge-elevated {
    @apply border-2 shadow-lg;
    background-color: rgba(0, 0, 0, 0.6);
  }

  /**
   * Badge on dark background (blue variant)
   * Use for: Status badges, labels on dark hero sections
   */
  .badge-on-dark {
    @apply border-2 shadow-lg;
    background-color: rgba(30, 58, 138, 0.6); /* blue-900/60 */
    border-color: rgba(29, 78, 216, 0.5); /* blue-700/50 */
    color: #ffffff;
  }

  /**
   * Badge on dark background (pink variant)
   * Use for: Consumer landing page status badges
   */
  .badge-on-dark-pink {
    @apply border-2 shadow-lg;
    background-color: rgba(131, 24, 67, 0.6); /* pink-900/60 */
    border-color: rgba(190, 24, 93, 0.5); /* pink-700/50 */
    color: #ffffff;
  }

  /**
   * Badge on dark background (violet variant)
   * Use for: Investor landing page status badges
   */
  .badge-on-dark-violet {
    @apply border-2 shadow-lg;
    background-color: rgba(76, 29, 149, 0.6); /* violet-900/60 */
    border-color: rgba(109, 40, 217, 0.5); /* violet-700/50 */
    color: #ffffff;
  }

  /**
   * Badge on dark background (cyan variant)
   * Use for: Labs landing page status badges
   */
  .badge-on-dark-cyan {
    @apply border-2 shadow-lg;
    background-color: rgba(22, 78, 99, 0.6); /* cyan-900/60 */
    border-color: rgba(14, 116, 144, 0.5); /* cyan-700/50 */
    color: #ffffff;
  }

  /* ============================================
     CTA BUTTON UTILITIES
     ============================================ */

  /**
   * Primary CTA button with gradient
   * Use for: Main call-to-action buttons
   */
  .btn-cta-primary {
    @apply inline-flex items-center justify-center px-8 py-4 font-bold rounded-full;
    @apply transition-all duration-300 hover:scale-105;
    background-image: linear-gradient(to right, #db2777, #7c3aed);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .btn-cta-primary:hover {
    background-image: linear-gradient(to right, #be185d, #6d28d9);
    box-shadow: 0 10px 25px -5px rgba(219, 39, 119, 0.4);
  }

  /**
   * Secondary CTA button (outline style)
   */
  .btn-cta-secondary {
    @apply inline-flex items-center justify-center px-8 py-4 font-bold rounded-full;
    @apply transition-all duration-300 hover:scale-105;
    @apply border-2 border-white/30 bg-white/10 text-white;
    backdrop-filter: blur(8px);
  }

  .btn-cta-secondary:hover {
    @apply bg-white/20 border-white/50;
  }

  /* ============================================
     TEXT SHADOW UTILITIES
     For legibility on gradient backgrounds
     ============================================ */

  .text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  }

  .text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .text-shadow-white {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
  }

  /* ============================================
     RTL SUPPORT UTILITIES
     ============================================ */

  /**
   * Mirror elements for RTL layouts
   */
  .rtl-mirror {
    transform: scaleX(-1);
  }

  /**
   * Gradient direction for RTL
   * Use when gradient should flow right-to-left in Arabic
   */
  .text-gradient-hero-rtl {
    background-image: linear-gradient(to left, #db2777, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .text-gradient-investor-rtl {
    background-image: linear-gradient(to left, #2563eb, #0891b2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .text-gradient-labs-rtl {
    background-image: linear-gradient(to left, #0891b2, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}