/* ====================================
   VELORA MONETIZATION DESIGN TOKENS
   Cozy, Reliable, Personable
   "Book + Ritual" Energy (Editorial, not Dashboard)
   ==================================== */

:root {
    /* ========================================
       BACKGROUND COLORS (Cozy Reliability)
       ======================================== */
    
    /* Very pale lavender-gray - refined from bg-parchment */
    --monetization-bg: #faf8f5;
    
    /* White + subtle lilac tint */
    --monetization-card: #ffffff;
    --monetization-card-tint: rgba(139, 92, 246, 0.02);
    
    /* Surface variations */
    --monetization-surface: #f5f3ff;
    --monetization-surface-soft: #f3eefc;
    
    /* ========================================
       BORDER COLORS (Lavender, Low Contrast)
       ======================================== */
    
    /* Lavender line - low contrast but visible */
    --monetization-border: rgba(139, 92, 246, 0.2);
    --monetization-border-subtle: rgba(139, 92, 246, 0.1);
    --monetization-border-strong: rgba(139, 92, 246, 0.3);
    
    /* ========================================
       PRIMARY COLORS (Violet CTAs)
       ======================================== */
    
    /* Primary violet for CTAs */
    --monetization-primary: #6B46C1;
    --monetization-primary-hover: #5B3FD9;
    --monetization-primary-light: #8B5CF6;
    --monetization-primary-lighter: #A78BFA;
    
    /* Focus ring - primary at 30-40% opacity */
    --monetization-focus-ring: rgba(107, 70, 193, 0.35);
    
    /* ========================================
       TRUST ACCENTS (Muted, Restrained)
       ======================================== */
    
    /* Success - muted green (checkmarks only) */
    --monetization-success: #10B981;
    --monetization-success-muted: #6EE7B7;
    --monetization-success-bg: rgba(16, 185, 129, 0.1);
    
    /* Warning - muted amber (trial/guarantee info only) */
    --monetization-warning: #F59E0B;
    --monetization-warning-muted: #FCD34D;
    --monetization-warning-bg: rgba(245, 158, 11, 0.1);
    
    /* ========================================
       TEXT COLORS (Cozy, Readable)
       ======================================== */
    
    --monetization-text-primary: #1A1A1A;
    --monetization-text-secondary: #4A4A4A;
    --monetization-text-muted: #6B7280;
    --monetization-text-soft: #9CA3AF;
    
    /* ========================================
       SHADOWS (Subtle, Trustworthy)
       ======================================== */
    
    --monetization-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.08);
    --monetization-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.08);
    --monetization-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.1);
    --monetization-shadow-card: 0 2px 8px rgba(139, 92, 246, 0.08);
    
    /* ========================================
       RADIUS (Cozy, Rounded)
       ======================================== */
    
    --monetization-radius-sm: 8px;
    --monetization-radius-md: 12px;
    --monetization-radius-lg: 16px;
    --monetization-radius-xl: 20px;
    --monetization-radius-full: 9999px;
    
    /* ========================================
       SPACING (Cozy Rhythm)
       ======================================== */
    
    --monetization-space-xs: 0.5rem;   /* 8px */
    --monetization-space-sm: 0.75rem; /* 12px */
    --monetization-space-md: 1rem;     /* 16px */
    --monetization-space-lg: 1.5rem;   /* 24px */
    --monetization-space-xl: 2rem;     /* 32px */
    --monetization-space-2xl: 3rem;    /* 48px */
    --monetization-space-3xl: 4rem;    /* 64px */
    
    /* Section padding */
    --monetization-section-padding-desktop: 4.5rem; /* 72px */
    --monetization-section-padding-mobile: 2.5rem;  /* 40px */
}

[data-theme="dark"] {
    /* Dark mode adjustments */
    --monetization-bg: #1a1a1a;
    --monetization-card: #252525;
    --monetization-card-tint: rgba(139, 92, 246, 0.05);
    --monetization-surface: #1f1f1f;
    --monetization-surface-soft: #242424;
    
    --monetization-border: rgba(139, 92, 246, 0.3);
    --monetization-border-subtle: rgba(139, 92, 246, 0.15);
    --monetization-border-strong: rgba(139, 92, 246, 0.4);
    
    --monetization-text-primary: #FFFFFF;
    --monetization-text-secondary: #D1D5DB;
    --monetization-text-muted: #9CA3AF;
    --monetization-text-soft: #6B7280;
    
    --monetization-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
    --monetization-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.5);
    --monetization-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.6);
    --monetization-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.monetization-card {
    background: var(--monetization-card);
    border: 1px solid var(--monetization-border);
    border-radius: var(--monetization-radius-xl);
    padding: var(--monetization-space-xl);
    box-shadow: var(--monetization-shadow-card);
    transition: all 0.3s ease;
}

.monetization-card:hover {
    box-shadow: var(--monetization-shadow-md);
    transform: translateY(-2px);
}

.monetization-button-primary {
    background: var(--monetization-primary);
    color: #ffffff !important;
    border: none;
    border-radius: var(--monetization-radius-md);
    padding: var(--monetization-space-md) var(--monetization-space-xl);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.monetization-button-primary:hover {
    background: var(--monetization-primary-hover);
    box-shadow: 0 4px 12px rgba(107, 70, 193, 0.3);
}

.monetization-button-primary:focus {
    outline: 2px solid var(--monetization-focus-ring);
    outline-offset: 2px;
}

/* ========================================
   RESPONSIVE & MOTION REFINEMENTS
   ======================================== */

/* Card hover lift - subtle (2-4px) - already defined above, but ensure mobile disable */
@media (max-width: 768px) {
    .monetization-card:hover {
        transform: none; /* Disable hover lift on mobile */
    }
}

/* Accordion transitions - gentle height */
[x-collapse] {
    transition: height 0.3s ease, opacity 0.3s ease;
}

/* Section reveal - fade/translate small */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animation to major sections */
.monetization-hero,
.monetization-pricing,
.monetization-which-plan,
.monetization-comparison,
.monetization-faq,
.monetization-trust {
    animation: fadeInUp 0.5s ease-out;
}