/* Premium Psychology-Driven Color System */
/* Designed using color psychology research for boundary-setting confidence and mental wellness */

:root {
    /* === PSYCHOLOGICAL FOUNDATION COLORS === */
    
    /* Core Trust & Authority - Deep Blue Psychology */
    --trust-foundation: #1e3a8a;        /* Deep blue - builds instant trust & professional credibility */
    --trust-light: #3b82f6;             /* Confident blue - mental clarity & reliability */
    --trust-surface: rgba(30, 58, 138, 0.08); /* Subtle blue backgrounds */
    
    /* Empowerment & Confidence - Sophisticated Purples */
    --empowerment-primary: #6366f1;     /* Royal purple - confidence without aggression */
    --empowerment-rich: #4f46e5;        /* Deep confident purple - luxury & self-worth */
    --empowerment-soft: #a78bfa;        /* Gentle confidence - approachable authority */
    --empowerment-glow: rgba(99, 102, 241, 0.15); /* Confidence aura */
    
    /* Growth & Achievement - Healing Greens */
    --growth-success: #059669;          /* Forest green - grounded achievement */
    --growth-fresh: #10b981;            /* Fresh green - progress & vitality */
    --growth-sage: #6b7280;             /* Sage green - balanced wisdom */
    --growth-surface: rgba(5, 150, 105, 0.1); /* Growth backgrounds */
    
    /* Warmth & Support - Amber Wisdom */
    --warmth-gold: #d97706;             /* Warm amber - wisdom & insight */
    --warmth-honey: #f59e0b;            /* Golden honey - nurturing support */
    --warmth-cream: #fef3c7;            /* Warm cream - comfort & safety */
    --warmth-glow: rgba(217, 119, 6, 0.12); /* Wisdom aura */
    
    /* === PREMIUM BACKGROUND SYSTEM === */
    
    /* Sophisticated Dark Foundation - Reduces cognitive load */
    --premium-void: #0f172a;            /* Deep navy void - premium depth */
    --premium-canvas: #1e293b;          /* Rich slate - elegant surfaces */
    --premium-surface: #334155;         /* Elevated surfaces - luxury feel */
    --premium-glass: rgba(255, 255, 255, 0.03); /* Glass morphism */
    --premium-border: rgba(255, 255, 255, 0.08); /* Subtle definition */
    
    /* Warm Light Alternative - Reduces eye strain while maintaining elegance */
    --warm-foundation: #fefdf8;         /* Warm white - organic comfort */
    --warm-canvas: #f8fafc;             /* Cool white - clean sophistication */
    --warm-surface: #f1f5f9;            /* Light surface - airy spaciousness */
    
    /* === PSYCHOLOGICAL TEXT HIERARCHY === */
    
    /* High-Impact Text - Commands attention */
    --text-hero: #0f172a;               /* Dark hero text - maximum authority */
    --text-primary: #e2e8f0;            /* Primary text - clear communication */
    --text-emphasis: #6366f1;           /* Empowerment purple - confidence */
    
    /* Supportive Text - Guides without overwhelming */
    --text-secondary: #cbd5e1;          /* Secondary text - approachable guidance */
    --text-supporting: #94a3b8;         /* Supporting text - gentle direction */
    --text-whisper: #64748b;            /* Subtle text - background information */
    
    /* Emotional Text Colors */
    --text-success: #059669;            /* Achievement text - progress celebration */
    --text-wisdom: #d97706;             /* Insight text - valuable guidance */
    --text-trust: #1e3a8a;              /* Trust text - reliability indicator */
    
    /* === PREMIUM INTERACTIVE SYSTEM === */
    
    /* Primary Actions - Empowerment Psychology */
    --action-primary: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --action-primary-hover: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    --action-primary-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
    --action-primary-text: #ffffff;
    
    /* Secondary Actions - Trust Building */
    --action-secondary: transparent;
    --action-secondary-border: #6366f1;
    --action-secondary-text: #6366f1;
    --action-secondary-hover: rgba(99, 102, 241, 0.08);
    --action-secondary-glow: 0 0 20px rgba(99, 102, 241, 0.2);
    
    /* Success Actions - Achievement Psychology */
    --action-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --action-success-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    --action-success-glow: rgba(16, 185, 129, 0.15);
    
    /* Wisdom Actions - Insight Psychology */
    --action-wisdom: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --action-wisdom-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
    --action-wisdom-glow: rgba(245, 158, 11, 0.15);
    
    /* === PREMIUM CARD & SURFACE SYSTEM === */
    
    /* Glass Morphism Premium Cards */
    --card-premium: rgba(255, 255, 255, 0.05);
    --card-premium-border: rgba(255, 255, 255, 0.1);
    --card-premium-shadow: 0 8px 32px rgba(15, 23, 42, 0.4);
    --card-premium-backdrop: blur(16px);
    
    /* Elevated Surfaces */
    --surface-elevated: rgba(255, 255, 255, 0.08);
    --surface-elevated-border: rgba(255, 255, 255, 0.12);
    --surface-elevated-shadow: 0 4px 20px rgba(15, 23, 42, 0.3);
    
    /* Interactive Surfaces */
    --surface-interactive: rgba(99, 102, 241, 0.03);
    --surface-interactive-hover: rgba(99, 102, 241, 0.08);
    --surface-interactive-border: rgba(99, 102, 241, 0.2);
    
    /* === PREMIUM FORM SYSTEM === */
    
    /* Input Psychology - Trust Building */
    --input-foundation: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-focus: #6366f1;
    --input-focus-glow: 0 0 20px rgba(99, 102, 241, 0.2);
    --input-text: #e2e8f0;
    --input-placeholder: #94a3b8;
    
    /* Label Psychology - Gentle Guidance */
    --label-primary: #cbd5e1;
    --label-secondary: #94a3b8;
    --label-required: #f59e0b;
    
    /* === PSYCHOLOGICAL STATUS SYSTEM === */
    
    /* Success Psychology - Achievement Celebration */
    --status-success-bg: rgba(16, 185, 129, 0.1);
    --status-success-border: rgba(16, 185, 129, 0.2);
    --status-success-text: #10b981;
    --status-success-icon: #059669;
    
    /* Warning Psychology - Gentle Guidance */
    --status-warning-bg: rgba(245, 158, 11, 0.1);
    --status-warning-border: rgba(245, 158, 11, 0.2);
    --status-warning-text: #f59e0b;
    --status-warning-icon: #d97706;
    
    /* Info Psychology - Trust Building */
    --status-info-bg: rgba(59, 130, 246, 0.1);
    --status-info-border: rgba(59, 130, 246, 0.2);
    --status-info-text: #3b82f6;
    --status-info-icon: #1e3a8a;
    
    /* Danger Psychology - Respectful Authority */
    --status-danger-bg: rgba(239, 68, 68, 0.08);
    --status-danger-border: rgba(239, 68, 68, 0.15);
    --status-danger-text: #ef4444;
    --status-danger-icon: #dc2626;
    
    /* === PREMIUM GRADIENTS === */
    
    /* Hero Gradients - Maximum Impact */
    --gradient-hero: linear-gradient(135deg, #1e3a8a 0%, #6366f1 50%, #a78bfa 100%);
    --gradient-confidence: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-wisdom: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    
    /* Surface Gradients - Subtle Sophistication */
    --gradient-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    
    /* === PREMIUM SHADOWS & DEPTH === */
    
    /* Psychological Depth - Premium Feel */
    --shadow-hero: 0 25px 50px rgba(15, 23, 42, 0.5);
    --shadow-premium: 0 20px 40px rgba(15, 23, 42, 0.4);
    --shadow-elevated: 0 12px 25px rgba(15, 23, 42, 0.3);
    --shadow-surface: 0 4px 15px rgba(15, 23, 42, 0.2);
    --shadow-subtle: 0 2px 8px rgba(15, 23, 42, 0.1);
    
    /* Colored Shadows - Emotional Depth */
    --shadow-confidence: 0 15px 35px rgba(99, 102, 241, 0.25);
    --shadow-success: 0 15px 35px rgba(16, 185, 129, 0.25);
    --shadow-wisdom: 0 15px 35px rgba(245, 158, 11, 0.25);
    
    /* === PSYCHOLOGICAL SPACING === */
    
    /* Breathing Room - Reduces Cognitive Load */
    --space-micro: 0.125rem;    /* 2px - Tight spacing */
    --space-tiny: 0.25rem;      /* 4px - Minimal breathing room */
    --space-small: 0.5rem;      /* 8px - Comfortable spacing */
    --space-medium: 1rem;       /* 16px - Standard spacing */
    --space-large: 1.5rem;      /* 24px - Generous spacing */
    --space-huge: 2.5rem;       /* 40px - Section separation */
    --space-hero: 4rem;         /* 64px - Hero sections */
    
    /* === PREMIUM BORDER RADIUS === */
    
    /* Psychological Softness - Approachable Authority */
    --radius-subtle: 0.375rem;  /* 6px - Gentle curves */
    --radius-medium: 0.75rem;   /* 12px - Comfortable curves */
    --radius-large: 1rem;       /* 16px - Prominent curves */
    --radius-hero: 1.5rem;      /* 24px - Hero elements */
    --radius-circle: 50%;       /* Perfect circles */
    --radius-pill: 999px;       /* Pill shapes */
}

/* === PREMIUM COMPONENT IMPLEMENTATIONS === */

/* Hero Button - Maximum Psychological Impact */
.btn-hero {
    background: var(--action-primary);
    color: var(--action-primary-text);
    border: none;
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-confidence);
    padding: var(--space-medium) var(--space-large);
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.btn-hero:hover {
    background: var(--action-primary-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-premium);
}

.btn-hero:active {
    transform: translateY(-1px);
}

/* Premium Card - Glass Morphism with Psychological Depth */
.card-premium {
    background: var(--card-premium);
    border: 1px solid var(--card-premium-border);
    border-radius: var(--radius-hero);
    box-shadow: var(--card-premium-shadow);
    backdrop-filter: var(--card-premium-backdrop);
    padding: var(--space-large);
    transition: all 0.4s ease;
}

.card-premium:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hero);
    border-color: rgba(99, 102, 241, 0.2);
}

/* Success State - Achievement Psychology */
.achievement-card {
    background: linear-gradient(135deg, 
        var(--status-success-bg) 0%, 
        rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid var(--status-success-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-success);
}

/* Wisdom State - Insight Psychology */
.wisdom-card {
    background: linear-gradient(135deg, 
        var(--status-warning-bg) 0%, 
        rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid var(--status-warning-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-wisdom);
}

/* Premium Input - Trust Building */
.input-premium {
    background: var(--input-foundation);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-medium);
    color: var(--input-text);
    padding: var(--space-small) var(--space-medium);
    transition: all 0.3s ease;
    font-size: 1rem;
}

.input-premium:focus {
    border-color: var(--input-focus);
    box-shadow: var(--input-focus-glow);
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

.input-premium::placeholder {
    color: var(--input-placeholder);
}

/* === RESPONSIVE PSYCHOLOGY === */

@media (max-width: 768px) {
    :root {
        /* Reduce cognitive load on mobile */
        --shadow-hero: 0 15px 30px rgba(15, 23, 42, 0.3);
        --shadow-premium: 0 10px 20px rgba(15, 23, 42, 0.25);
        --shadow-confidence: 0 8px 20px rgba(99, 102, 241, 0.2);
    }
    
    .btn-hero {
        padding: var(--space-small) var(--space-medium);
        font-size: 1rem;
    }
    
    .card-premium {
        padding: var(--space-medium);
        border-radius: var(--radius-large);
    }
}

/* === ACCESSIBILITY PSYCHOLOGY === */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

@media (prefers-contrast: high) {
    :root {
        --text-primary: #ffffff;
        --card-premium-border: rgba(255, 255, 255, 0.2);
        --empowerment-primary: #7c3aed;
    }
}

/* Light Mode Psychology Alternative */
@media (prefers-color-scheme: light) {
    :root {
        --premium-void: var(--warm-foundation);
        --premium-canvas: var(--warm-canvas);
        --premium-surface: var(--warm-surface);
        --text-primary: var(--text-hero);
        --text-secondary: #475569;
        --card-premium: rgba(255, 255, 255, 0.8);
        --card-premium-border: rgba(0, 0, 0, 0.1);
    }
}