/**
 * MMA Tower - Unified Component System
 * =====================================
 * Premium, consistent styling for recurring UI components
 * 
 * DESIGN PHILOSOPHY:
 * - Every recurring element has ONE definitive style
 * - Users instantly recognize component types across all floors
 * - Professional, intentional design that reflects $700+ premium value
 * 
 * COMPONENT TYPES:
 * 1. Exercise Sections (Interactive tasks)
 * 2. Insight Boxes (Tips, Key Insights, Pro Tips)
 * 3. Warning Boxes (Warnings, Important notes)
 * 4. Action Required Banners
 * 5. Success/Completion Boxes
 * 6. Locked Content Indicators
 * 7. Archetype Cards (Identity)
 * 8. Quote/Callout Boxes
 */

/* ==========================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================== */

:root {
    /* Primary Brand */
    --mma-gold: #c5a028;
    --mma-gold-light: #d4af37;
    --mma-gold-dark: #a68a1f;
    --mma-gold-glow: rgba(197, 160, 40, 0.3);
    
    /* Component Colors */
    --comp-exercise: #f59e0b;
    --comp-exercise-bg: rgba(245, 158, 11, 0.08);
    --comp-exercise-border: rgba(245, 158, 11, 0.25);
    --comp-exercise-glow: rgba(245, 158, 11, 0.15);
    
    --comp-insight: #c5a028;
    --comp-insight-bg: rgba(197, 160, 40, 0.08);
    --comp-insight-border: rgba(197, 160, 40, 0.25);
    
    --comp-warning: #ef4444;
    --comp-warning-bg: rgba(239, 68, 68, 0.08);
    --comp-warning-border: rgba(239, 68, 68, 0.25);
    
    --comp-action: #f59e0b;
    --comp-action-bg: rgba(245, 158, 11, 0.12);
    --comp-action-border: rgba(245, 158, 11, 0.4);
    
    --comp-success: #10b981;
    --comp-success-bg: rgba(16, 185, 129, 0.08);
    --comp-success-border: rgba(16, 185, 129, 0.25);
    
    --comp-locked: #64748b;
    --comp-locked-bg: rgba(100, 116, 139, 0.08);
    --comp-locked-border: rgba(100, 116, 139, 0.25);
    
    /* Typography */
    --comp-label-size: 0.75rem;
    --comp-label-weight: 700;
    --comp-label-tracking: 0.05em;
    
    /* Spacing */
    --comp-padding: 1.5rem;
    --comp-padding-sm: 1rem;
    --comp-radius: 12px;
    --comp-radius-sm: 8px;
    
    /* Archetype Colors */
    --arch-insurgent: #ef4444;
    --arch-insurgent-bg: rgba(239, 68, 68, 0.1);
    --arch-sage: #10b981;
    --arch-sage-bg: rgba(16, 185, 129, 0.1);
    --arch-sovereign: #f59e0b;
    --arch-sovereign-bg: rgba(245, 158, 11, 0.1);
}


/* ==========================================
   1. EXERCISE SECTIONS
   Icon: clipboard | Color: Amber
   Used for: Interactive tasks, save-to-blueprint items
   ========================================== */

.mma-exercise {
    background: var(--comp-exercise-bg);
    border: 1px solid var(--comp-exercise-border);
    border-radius: var(--comp-radius);
    padding: var(--comp-padding);
    position: relative;
    overflow: hidden;
}

/* Subtle left accent bar */
.mma-exercise::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--comp-exercise) 0%, rgba(245, 158, 11, 0.5) 100%);
}

.mma-exercise-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.mma-exercise-icon {
    width: 32px;
    height: 32px;
    color: var(--comp-exercise);
    flex-shrink: 0;
}

.mma-exercise-icon svg {
    width: 100%;
    height: 100%;
}

.mma-exercise-label {
    font-size: var(--comp-label-size);
    font-weight: var(--comp-label-weight);
    letter-spacing: var(--comp-label-tracking);
    text-transform: uppercase;
    color: var(--comp-exercise);
}

.mma-exercise-title {
    font-size: 0.875rem;
    color: #94a3b8;
    margin-top: 2px;
}


/* ==========================================
   2. INSIGHT BOXES (Tips, Key Insights)
   Icon: lightbulb | Color: Gold
   Used for: Helpful tips, key takeaways, pro tips
   ========================================== */

.mma-insight {
    background: var(--comp-insight-bg);
    border: 1px solid var(--comp-insight-border);
    border-radius: var(--comp-radius);
    padding: var(--comp-padding);
    position: relative;
}

/* Subtle left accent bar */
.mma-insight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--comp-insight) 0%, var(--mma-gold-dark) 100%);
    border-radius: var(--comp-radius) 0 0 var(--comp-radius);
}

.mma-insight-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.mma-insight-icon {
    width: 20px;
    height: 20px;
    color: var(--comp-insight);
    flex-shrink: 0;
}

.mma-insight-icon svg {
    width: 100%;
    height: 100%;
}

.mma-insight-label {
    font-size: var(--comp-label-size);
    font-weight: var(--comp-label-weight);
    letter-spacing: var(--comp-label-tracking);
    text-transform: uppercase;
    color: var(--comp-insight);
}

.mma-insight-content {
    color: #cbd5e1;
    line-height: 1.6;
}

/* Variant: Pro Tip (same style, different label) */
.mma-insight--tip .mma-insight-label::after {
    content: ' TIP';
}

/* Variant: Key Insight */
.mma-insight--key .mma-insight-label::after {
    content: ' INSIGHT';
}


/* ==========================================
   3. WARNING BOXES
   Icon: warning | Color: Red
   Used for: Important warnings, cautions, critical info
   ========================================== */

.mma-warning {
    background: var(--comp-warning-bg);
    border: 1px solid var(--comp-warning-border);
    border-radius: var(--comp-radius);
    padding: var(--comp-padding);
    position: relative;
}

.mma-warning::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--comp-warning) 0%, rgba(239, 68, 68, 0.5) 100%);
    border-radius: var(--comp-radius) 0 0 var(--comp-radius);
}

.mma-warning-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.mma-warning-icon {
    width: 20px;
    height: 20px;
    color: var(--comp-warning);
    flex-shrink: 0;
}

.mma-warning-icon svg {
    width: 100%;
    height: 100%;
}

.mma-warning-label {
    font-size: var(--comp-label-size);
    font-weight: var(--comp-label-weight);
    letter-spacing: var(--comp-label-tracking);
    text-transform: uppercase;
    color: var(--comp-warning);
}

.mma-warning-content {
    color: #cbd5e1;
    line-height: 1.6;
}


/* ==========================================
   4. ACTION REQUIRED BANNERS
   Icon: warning | Color: Amber
   Used for: Tasks requiring immediate action
   ========================================== */

.mma-action {
    background: var(--comp-action-bg);
    border: 2px solid var(--comp-action-border);
    border-radius: var(--comp-radius);
    padding: var(--comp-padding);
    position: relative;
    overflow: hidden;
}

/* Animated glow effect */
.mma-action::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--comp-radius);
    background: linear-gradient(90deg, transparent, var(--comp-exercise-glow), transparent);
    animation: action-pulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes action-pulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.mma-action-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--comp-action);
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 0 var(--comp-radius) 0 var(--comp-radius-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1;
}

.mma-action-badge svg {
    width: 12px;
    height: 12px;
}

.mma-action-content {
    position: relative;
    z-index: 1;
}

.mma-action-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--comp-action);
    margin-bottom: 8px;
    margin-top: 8px;
}

.mma-action-text {
    color: #fff;
    line-height: 1.6;
}


/* ==========================================
   5. SUCCESS / COMPLETION BOXES
   Icon: check-circle | Color: Emerald
   Used for: Completed items, success states
   ========================================== */

.mma-success {
    background: var(--comp-success-bg);
    border: 1px solid var(--comp-success-border);
    border-radius: var(--comp-radius);
    padding: var(--comp-padding-sm);
}

.mma-success-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mma-success-icon {
    width: 20px;
    height: 20px;
    color: var(--comp-success);
    flex-shrink: 0;
}

.mma-success-icon svg {
    width: 100%;
    height: 100%;
}

.mma-success-text {
    color: var(--comp-success);
    font-weight: 600;
}


/* ==========================================
   6. LOCKED CONTENT
   Icon: lock | Color: Slate
   Used for: Locked floors, premium content
   ========================================== */

.mma-locked {
    background: var(--comp-locked-bg);
    border: 1px solid var(--comp-locked-border);
    border-radius: var(--comp-radius);
    padding: var(--comp-padding-sm);
    opacity: 0.8;
}

.mma-locked-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mma-locked-icon {
    width: 16px;
    height: 16px;
    color: var(--comp-locked);
    flex-shrink: 0;
}

.mma-locked-icon svg {
    width: 100%;
    height: 100%;
}

.mma-locked-text {
    color: var(--comp-locked);
    font-size: 0.875rem;
}


/* ==========================================
   7. ARCHETYPE CARDS (Identity Only)
   Used for: Displaying archetype-specific content
   ========================================== */

.mma-archetype {
    border-radius: var(--comp-radius);
    padding: var(--comp-padding);
    position: relative;
}

.mma-archetype--insurgent {
    background: linear-gradient(135deg, var(--arch-insurgent-bg) 0%, transparent 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.mma-archetype--sage {
    background: linear-gradient(135deg, var(--arch-sage-bg) 0%, transparent 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.mma-archetype--sovereign {
    background: linear-gradient(135deg, var(--arch-sovereign-bg) 0%, transparent 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Archetype header with icon */
.mma-archetype-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.mma-archetype-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.mma-archetype-icon svg {
    width: 100%;
    height: 100%;
}

.mma-archetype--insurgent .mma-archetype-icon { color: var(--arch-insurgent); }
.mma-archetype--sage .mma-archetype-icon { color: var(--arch-sage); }
.mma-archetype--sovereign .mma-archetype-icon { color: var(--arch-sovereign); }

.mma-archetype-name {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mma-archetype--insurgent .mma-archetype-name { color: var(--arch-insurgent); }
.mma-archetype--sage .mma-archetype-name { color: var(--arch-sage); }
.mma-archetype--sovereign .mma-archetype-name { color: var(--arch-sovereign); }

/* "This is you" badge */
.mma-archetype-badge {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 9999px;
    color: #fff;
}

.mma-archetype--insurgent .mma-archetype-badge { background: var(--arch-insurgent); }
.mma-archetype--sage .mma-archetype-badge { background: var(--arch-sage); }
.mma-archetype--sovereign .mma-archetype-badge { background: var(--arch-sovereign); }


/* ==========================================
   8. QUOTE / CALLOUT BOXES
   Used for: Important quotes, book excerpts
   ========================================== */

.mma-quote {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border-left: 4px solid var(--mma-gold);
    border-radius: 0 var(--comp-radius) var(--comp-radius) 0;
    padding: var(--comp-padding);
    position: relative;
}

.mma-quote-text {
    font-size: 1.125rem;
    font-style: italic;
    color: #fff;
    line-height: 1.7;
}

.mma-quote-attribution {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--mma-gold);
    font-weight: 600;
}


/* ==========================================
   9. PHASE INDICATORS
   Used for: 90-Day Plan phases
   ========================================== */

.mma-phase {
    border-radius: var(--comp-radius);
    padding: var(--comp-padding);
    position: relative;
}

/* Phase 1: Foundation (Gold) */
.mma-phase--foundation {
    background: var(--comp-insight-bg);
    border: 1px solid var(--comp-insight-border);
}

.mma-phase--foundation .mma-phase-label {
    color: var(--mma-gold);
}

/* Phase 2: Growth (Slate) */
.mma-phase--growth {
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid rgba(100, 116, 139, 0.25);
}

.mma-phase--growth .mma-phase-label {
    color: #94a3b8;
}

/* Phase 3: Scale (Emerald) */
.mma-phase--scale {
    background: var(--comp-success-bg);
    border: 1px solid var(--comp-success-border);
}

.mma-phase--scale .mma-phase-label {
    color: var(--comp-success);
}

.mma-phase-label {
    font-size: var(--comp-label-size);
    font-weight: var(--comp-label-weight);
    letter-spacing: var(--comp-label-tracking);
    text-transform: uppercase;
    margin-bottom: 12px;
}


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

/* Icon sizes for components */
.mma-comp-icon-sm { width: 16px; height: 16px; }
.mma-comp-icon-md { width: 20px; height: 20px; }
.mma-comp-icon-lg { width: 24px; height: 24px; }
.mma-comp-icon-xl { width: 32px; height: 32px; }

/* Highlight ring for current user's archetype */
.mma-archetype--active {
    box-shadow: 0 0 0 2px currentColor;
}

.mma-archetype--insurgent.mma-archetype--active { box-shadow: 0 0 0 2px var(--arch-insurgent); }
.mma-archetype--sage.mma-archetype--active { box-shadow: 0 0 0 2px var(--arch-sage); }
.mma-archetype--sovereign.mma-archetype--active { box-shadow: 0 0 0 2px var(--arch-sovereign); }