/**
 * OXYTOCIN APPS - UNIFIED BRAND SYSTEM
 * Beautiful, calm, welcoming lavender theme with warm accents
 * Used across Phoenix Foundation and PCREF Impact Challenge
 */

:root {
    /* === OXYTOCIN BRAND COLORS === */
    
    /* Primary Lavender Gradient - Main brand colors */
    --oxytocin-primary-start: #667eea;      /* Beautiful lavender blue */
    --oxytocin-primary-end: #764ba2;        /* Deeper lavender purple */
    --oxytocin-primary-light: #8a97ec;      /* Lighter lavender for hover states */
    --oxytocin-primary-dark: #5a6fd8;       /* Darker lavender for active states */
    
    /* Secondary Colors - Warm and welcoming */
    --oxytocin-indigo: #2D2458;             /* Dark indigo for buttons (not too dark!) */
    --oxytocin-indigo-light: #403168;       /* Lighter indigo for hover */
    --oxytocin-gold: #D4AF37;               /* Muted gold accents */
    --oxytocin-gold-light: #E0C547;         /* Lighter gold for highlights */
    --oxytocin-gold-dark: #B8941F;          /* Darker gold for depth */
    
    /* Supporting Colors */
    --oxytocin-white: #FFFFFF;
    --oxytocin-cream: #FEFEFE;              /* Slightly warm white */
    --oxytocin-gray-50: #F8F9FC;            /* Very light lavender-tinted gray */
    --oxytocin-gray-100: #F1F3F9;           /* Light lavender-tinted gray */
    --oxytocin-gray-200: #E8ECEF;           /* Medium light gray */
    --oxytocin-gray-300: #D1D6DB;           /* Medium gray */
    --oxytocin-gray-400: #9CA3AF;           /* Medium dark gray */
    --oxytocin-gray-500: #6B7280;           /* Dark gray */
    --oxytocin-gray-600: #4B5563;           /* Darker gray */
    --oxytocin-gray-700: #374151;           /* Very dark gray */
    --oxytocin-gray-800: #1F2937;           /* Almost black */
    --oxytocin-gray-900: #111827;           /* Near black */
    
    /* Status Colors - Harmonized with brand */
    --oxytocin-success: #10B981;            /* Emerald green */
    --oxytocin-warning: #F59E0B;            /* Amber */
    --oxytocin-error: #EF4444;              /* Red */
    --oxytocin-info: var(--oxytocin-primary-start); /* Use primary lavender */
    
    /* === GRADIENTS === */
    --oxytocin-gradient-primary: linear-gradient(135deg, var(--oxytocin-primary-start) 0%, var(--oxytocin-primary-end) 100%);
    --oxytocin-gradient-primary-soft: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    --oxytocin-gradient-gold: linear-gradient(135deg, var(--oxytocin-gold) 0%, var(--oxytocin-gold-dark) 100%);
    --oxytocin-gradient-glass: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    --oxytocin-gradient-hero: linear-gradient(135deg, var(--oxytocin-gray-50) 0%, var(--oxytocin-white) 100%);
    
    /* === SECTION-SPECIFIC GRADIENTS === */
    /* Soft Wellness Lavender - Calming, therapeutic */
    --oxytocin-gradient-wellness: linear-gradient(135deg, #7B8FEB 0%, #8A6BB0 100%);
    
    /* Educational Indigo - Focus, learning mode */
    --oxytocin-gradient-education: linear-gradient(135deg, #2D2458 0%, #403168 100%);
    
    /* Resources Lavender + Gold - Professional, resourceful */
    --oxytocin-gradient-resources: linear-gradient(135deg, var(--oxytocin-primary-start) 0%, var(--oxytocin-primary-end) 85%, var(--oxytocin-gold) 100%);
    
    /* Clean Assessment Lavender - Clinical, professional */
    --oxytocin-gradient-assessment: linear-gradient(135deg, #6B82EA 0%, #7A52A8 100%);
    
    /* === DESIGN SYSTEM === */
    
    /* Spacing */
    --oxytocin-space-xs: 0.25rem;   /* 4px */
    --oxytocin-space-sm: 0.5rem;    /* 8px */
    --oxytocin-space-md: 1rem;      /* 16px */
    --oxytocin-space-lg: 1.5rem;    /* 24px */
    --oxytocin-space-xl: 2rem;      /* 32px */
    --oxytocin-space-2xl: 3rem;     /* 48px */
    --oxytocin-space-3xl: 4rem;     /* 64px */
    
    /* Border Radius */
    --oxytocin-radius-sm: 8px;
    --oxytocin-radius-md: 12px;
    --oxytocin-radius-lg: 16px;
    --oxytocin-radius-xl: 20px;
    --oxytocin-radius-2xl: 24px;
    --oxytocin-radius-full: 9999px;
    
    /* Shadows - Soft and welcoming */
    --oxytocin-shadow-sm: 0 1px 3px rgba(102, 126, 234, 0.06), 0 1px 2px rgba(0, 0, 0, 0.02);
    --oxytocin-shadow-md: 0 4px 6px rgba(102, 126, 234, 0.07), 0 2px 4px rgba(0, 0, 0, 0.03);
    --oxytocin-shadow-lg: 0 10px 15px rgba(102, 126, 234, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    --oxytocin-shadow-xl: 0 20px 25px rgba(102, 126, 234, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --oxytocin-shadow-2xl: 0 25px 50px rgba(102, 126, 234, 0.15), 0 12px 20px rgba(0, 0, 0, 0.08);
    --oxytocin-shadow-glow: 0 0 20px rgba(102, 126, 234, 0.3);
    
    /* Transitions */
    --oxytocin-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --oxytocin-transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --oxytocin-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Typography */
    --oxytocin-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, system-ui, sans-serif;
    --oxytocin-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    
    /* Container Widths */
    --oxytocin-container-sm: 640px;
    --oxytocin-container-md: 768px;
    --oxytocin-container-lg: 1024px;
    --oxytocin-container-xl: 1280px;
    --oxytocin-container-2xl: 1440px;
}

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

/* Background Classes */
.oxytocin-bg-primary { background: var(--oxytocin-gradient-primary); }
.oxytocin-bg-primary-soft { background: var(--oxytocin-gradient-primary-soft); }
.oxytocin-bg-glass { 
    background: var(--oxytocin-gradient-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.oxytocin-bg-white { background: var(--oxytocin-white); }
.oxytocin-bg-cream { background: var(--oxytocin-cream); }

/* Section-Specific Backgrounds */
.oxytocin-bg-wellness { background: var(--oxytocin-gradient-wellness); }
.oxytocin-bg-education { background: var(--oxytocin-gradient-education); }
.oxytocin-bg-resources { background: var(--oxytocin-gradient-resources); }
.oxytocin-bg-assessment { background: var(--oxytocin-gradient-assessment); }

/* Text Colors */
.oxytocin-text-primary { color: var(--oxytocin-primary-start); }
.oxytocin-text-indigo { color: var(--oxytocin-indigo); }
.oxytocin-text-gold { color: var(--oxytocin-gold); }
.oxytocin-text-white { color: var(--oxytocin-white); }
.oxytocin-text-gray { color: var(--oxytocin-gray-600); }

/* Button Styles */
.oxytocin-btn {
    font-family: var(--oxytocin-font-family);
    font-weight: 600;
    padding: var(--oxytocin-space-md) var(--oxytocin-space-xl);
    border-radius: var(--oxytocin-radius-lg);
    border: none;
    cursor: pointer;
    transition: var(--oxytocin-transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--oxytocin-space-sm);
    text-decoration: none;
    box-shadow: var(--oxytocin-shadow-md);
}

.oxytocin-btn-primary {
    background: var(--oxytocin-gradient-primary);
    color: var(--oxytocin-white);
}

.oxytocin-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--oxytocin-shadow-lg);
}

.oxytocin-btn-secondary {
    background: var(--oxytocin-white);
    color: var(--oxytocin-primary-start);
    border: 1px solid var(--oxytocin-primary-start);
}

.oxytocin-btn-secondary:hover {
    background: var(--oxytocin-gradient-primary);
    color: var(--oxytocin-white);
    transform: translateY(-2px);
}

.oxytocin-btn-indigo {
    background: var(--oxytocin-indigo);
    color: var(--oxytocin-white);
}

.oxytocin-btn-indigo:hover {
    background: var(--oxytocin-indigo-light);
    transform: translateY(-2px);
    box-shadow: var(--oxytocin-shadow-lg);
}

.oxytocin-btn-gold {
    background: var(--oxytocin-gradient-gold);
    color: var(--oxytocin-indigo);
}

.oxytocin-btn-gold:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);
}

/* Card Styles */
.oxytocin-card {
    background: var(--oxytocin-white);
    border-radius: var(--oxytocin-radius-lg);
    padding: var(--oxytocin-space-xl);
    box-shadow: var(--oxytocin-shadow-md);
    border-left: 4px solid var(--oxytocin-primary-start);
    transition: var(--oxytocin-transition-normal);
}

.oxytocin-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--oxytocin-shadow-xl);
}

.oxytocin-card-glass {
    background: var(--oxytocin-gradient-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Navigation Styles */
.oxytocin-nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--oxytocin-gray-200);
    box-shadow: var(--oxytocin-shadow-sm);
}

.oxytocin-nav-link {
    color: var(--oxytocin-gray-600);
    text-decoration: none;
    font-weight: 500;
    padding: var(--oxytocin-space-sm) var(--oxytocin-space-md);
    border-radius: var(--oxytocin-radius-sm);
    transition: var(--oxytocin-transition-fast);
}

.oxytocin-nav-link:hover,
.oxytocin-nav-link.active {
    color: var(--oxytocin-primary-start);
    background: var(--oxytocin-gradient-primary-soft);
}

/* Layout Utilities */
.oxytocin-container {
    max-width: var(--oxytocin-container-xl);
    margin: 0 auto;
    padding: 0 var(--oxytocin-space-lg);
}

.oxytocin-grid {
    display: grid;
    gap: var(--oxytocin-space-lg);
}

.oxytocin-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.oxytocin-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.oxytocin-grid-responsive { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Responsive Design */
@media (max-width: 768px) {
    .oxytocin-grid-cols-2,
    .oxytocin-grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .oxytocin-container {
        padding: 0 var(--oxytocin-space-md);
    }
}

/* === ANIMATION KEYFRAMES === */
@keyframes oxytocin-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes oxytocin-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(102, 126, 234, 0.6);
    }
}

/* Animation Utilities */
.oxytocin-animate-fade-up {
    animation: oxytocin-fade-in-up 0.6s ease-out forwards;
}

.oxytocin-animate-pulse-glow {
    animation: oxytocin-pulse-glow 2s ease-in-out infinite;
}

/* === ACCESSIBILITY === */
.oxytocin-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus States */
.oxytocin-btn:focus,
.oxytocin-nav-link:focus {
    outline: 2px solid var(--oxytocin-primary-start);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .oxytocin-bg-primary,
    .oxytocin-bg-primary-soft {
        background: var(--oxytocin-white) !important;
        color: var(--oxytocin-gray-800) !important;
    }
}

/* === OXYTOCIN BRAND SIGNATURE === */
.oxytocin-brand-signature {
    position: relative;
}

.oxytocin-brand-signature::after {
    content: "🧬 Oxytocin Apps";
    position: absolute;
    bottom: -20px;
    right: 0;
    font-size: 0.75rem;
    color: var(--oxytocin-gray-400);
    font-weight: 500;
}