/**
 * 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.
 */

/* ========================
   DESIGN SYSTEM TOKENS
   Reference: midday.ai aesthetic
   See: docs/02-marketing/frontend-refactoring/STYLE-GUIDE.md
   ======================== */

:root {
    /* Typography */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;

    /* Colors */
    --color-bg: #FFFFFF;
    --color-fg: #121212;
    --color-muted: #707070;
    --color-border: #E5E5E5;
    --color-primary-bg: #18181b;
    --color-primary-fg: #FAFAFA;

    /* Accents */
    --color-pink: #db2777;
    --color-violet: #7c3aed;
    --color-cyan: #0891b2;
    --color-emerald: #10b981;

    /* Radius - Sharp corners for editorial aesthetic */
    --radius: 0px;

    /* Transitions */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Marketing-specific typography overrides */
.marketing-page h1,
.marketing-page h2,
.marketing-page h3 {
    font-family: var(--font-serif);
}

/* Sharp corners for all interactive elements in marketing */
.marketing-page button,
.marketing-page .btn,
.marketing-page input,
.marketing-page select,
.marketing-page textarea {
    border-radius: var(--radius);
}

/* Primary button style - Dark charcoal */
.btn-primary {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-fg);
    border-radius: var(--radius);
    transition: background-color var(--transition-fast) var(--ease-out);
}

.btn-primary:hover {
    background-color: rgba(24, 24, 27, 0.9);
}

/* Secondary button style - Outline */
.btn-secondary {
    background-color: transparent;
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.btn-secondary:hover {
    background-color: #F4F4F5;
}

/* Glassmorphism header */
.glass-header {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}

/* Solid header when scrolled */
.glass-header.header-scrolled {
    background: #ffffff !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ============================================
   STICKY POSITIONING UTILITIES
   For secondary navigation bars
   NOTE: These MUST be outside @layer for browser compatibility
   ============================================ */

.top-16 {
  top: 4rem; /* 64px */
}

.top-20 {
  top: 5rem; /* 80px */
}

@media (min-width: 1024px) {
  .lg\:top-16 {
    top: 4rem;
  }

  .lg\:top-20 {
    top: 5rem;
  }
}

@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;
  }

}