/* 📜✨ PHASE 1C: ENHANCED TYPOGRAPHY - ANCIENT WISDOM FONTS & HIERARCHY */
/* Ancient Wisdom Guide - Premium Typography System */

/* ============================================ */
/* 🏛️ ANCIENT WISDOM FONT IMPORTS */
/* ============================================ */

/* Core Ancient & Mystical Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

/* Enhanced Ancient Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Celtic+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Mystical Script Fonts */
@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');

/* ============================================ */
/* 🎨 ENHANCED TYPOGRAPHY VARIABLES */
/* ============================================ */

:root {
    /* Ancient Font Families */
    --font-ancient-display: 'Cinzel Decorative', 'Cinzel', serif;
    --font-ancient-headers: 'Cinzel', 'Playfair Display', serif;
    --font-ancient-body: 'EB Garamond', 'Philosopher', serif;
    --font-mystical-script: 'Almendra', 'Metamorphous', cursive;
    --font-cosmic-tech: 'Orbitron', monospace;
    --font-modern-clean: 'Inter', sans-serif;
    
    /* Enhanced Typography Scale */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */
    --text-6xl: 3.75rem;   /* 60px */
    --text-7xl: 4.5rem;    /* 72px */
    --text-8xl: 6rem;      /* 96px */
    --text-9xl: 8rem;      /* 128px */
    
    /* Enhanced Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Enhanced Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --tracking-epic: 0.15em;
    
    /* Mystical Text Effects */
    --text-glow-gold: 0 0 20px rgba(255, 215, 0, 0.6);
    --text-glow-blue: 0 0 20px rgba(79, 156, 255, 0.6);
    --text-glow-purple: 0 0 20px rgba(157, 78, 221, 0.6);
    --text-shadow-ancient: 2px 2px 4px rgba(0, 0, 0, 0.7);
    --text-shadow-mystical: 0 0 10px rgba(255, 215, 0, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.5);
    --text-shadow-cosmic: 0 0 15px rgba(79, 156, 255, 0.4), 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* ============================================ */
/* 📜 ANCIENT WISDOM TYPOGRAPHY CLASSES */
/* ============================================ */

/* Epic Display Headers */
.text-epic-display {
    font-family: var(--font-ancient-display);
    font-size: var(--text-8xl);
    font-weight: 900;
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-epic);
    text-shadow: var(--text-shadow-mystical);
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 3s ease-in-out infinite;
}

/* Ancient Headers Hierarchy */
.text-ancient-h1 {
    font-family: var(--font-ancient-headers);
    font-size: var(--text-6xl);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-wider);
    color: var(--gold-primary);
    text-shadow: var(--text-shadow-ancient);
    margin-bottom: 1.5rem;
}

.text-ancient-h2 {
    font-family: var(--font-ancient-headers);
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-wide);
    color: var(--gold-secondary);
    text-shadow: var(--text-shadow-ancient);
    margin-bottom: 1.25rem;
}

.text-ancient-h3 {
    font-family: var(--font-ancient-headers);
    font-size: var(--text-3xl);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    color: var(--bronze-primary);
    text-shadow: var(--text-shadow-ancient);
    margin-bottom: 1rem;
}

.text-ancient-h4 {
    font-family: var(--font-ancient-headers);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
    color: var(--text-accent);
    text-shadow: var(--text-shadow-ancient);
    margin-bottom: 0.875rem;
}

/* Enhanced Quote Typography */
.quote-text-enhanced {
    font-family: var(--font-ancient-body);
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-wide);
    color: var(--text-primary);
    text-shadow: var(--text-shadow-mystical);
    text-align: center;
    position: relative;
    margin: 2rem 0;
    padding: 0 2rem;
}

.quote-text-enhanced::before {
    content: '"';
    font-family: var(--font-ancient-display);
    font-size: var(--text-6xl);
    color: var(--jedi-blue);
    position: absolute;
    top: -2rem;
    left: 0;
    opacity: 0.4;
    text-shadow: var(--text-glow-blue);
    animation: quotePulse 3s ease-in-out infinite;
}

.quote-text-enhanced::after {
    content: '"';
    font-family: var(--font-ancient-display);
    font-size: var(--text-6xl);
    color: var(--jedi-blue);
    position: absolute;
    bottom: -2rem;
    right: 0;
    opacity: 0.4;
    text-shadow: var(--text-glow-blue);
    animation: quotePulse 3s ease-in-out infinite 1.5s;
}

/* Ancient Author Attribution */
.quote-author-enhanced {
    font-family: var(--font-mystical-script);
    font-size: var(--text-lg);
    font-weight: 700;
    font-style: italic;
    color: var(--gold-primary);
    text-shadow: var(--text-glow-gold);
    text-align: center;
    margin-top: 1.5rem;
    letter-spacing: var(--tracking-wider);
    position: relative;
}

.quote-author-enhanced::before {
    content: '— ';
    font-family: var(--font-ancient-headers);
    color: var(--bronze-primary);
    margin-right: 0.5rem;
}

.quote-author-enhanced::after {
    content: ' —';
    font-family: var(--font-ancient-headers);
    color: var(--bronze-primary);
    margin-left: 0.5rem;
}

/* Mystical Body Text */
.text-mystical-body {
    font-family: var(--font-ancient-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
    color: var(--text-secondary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.text-mystical-emphasis {
    font-family: var(--font-mystical-script);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--gold-primary);
    text-shadow: var(--text-glow-gold);
    letter-spacing: var(--tracking-wide);
}

/* Cosmic Tech Typography */
.text-cosmic-tech {
    font-family: var(--font-cosmic-tech);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    color: var(--jedi-blue);
    text-shadow: var(--text-glow-blue);
    text-transform: uppercase;
}

/* ============================================ */
/* 🎨 ENHANCED BUTTON TYPOGRAPHY */
/* ============================================ */

.btn-text-epic {
    font-family: var(--font-cosmic-tech);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.btn-text-ancient {
    font-family: var(--font-ancient-headers);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-shadow: var(--text-shadow-ancient);
}

.btn-text-mystical {
    font-family: var(--font-mystical-script);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-shadow: var(--text-glow-gold);
}

/* ============================================ */
/* 🌟 ENHANCED UI ELEMENT TYPOGRAPHY */
/* ============================================ */

/* Navigation Typography */
.nav-text {
    font-family: var(--font-cosmic-tech);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* Menu Typography */
.menu-title {
    font-family: var(--font-ancient-headers);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--gold-primary);
    text-shadow: var(--text-shadow-ancient);
    letter-spacing: var(--tracking-wide);
    margin-bottom: 1rem;
}

.menu-item {
    font-family: var(--font-ancient-body);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-secondary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.menu-item:hover {
    color: var(--gold-primary);
    text-shadow: var(--text-glow-gold);
    transform: translateX(5px);
}

/* Form Typography */
.form-label {
    font-family: var(--font-ancient-headers);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-accent);
    text-shadow: var(--text-shadow-ancient);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.form-input {
    font-family: var(--font-ancient-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
}

/* Status & Feedback Typography */
.status-epic {
    font-family: var(--font-cosmic-tech);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-shadow: var(--text-glow-blue);
    color: var(--jedi-blue);
}

.status-success {
    font-family: var(--font-mystical-script);
    font-size: var(--text-base);
    font-weight: 600;
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.status-warning {
    font-family: var(--font-ancient-headers);
    font-size: var(--text-base);
    font-weight: 600;
    color: #ffaa00;
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
}

.status-error {
    font-family: var(--font-cosmic-tech);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--sith-red);
    text-shadow: var(--text-glow-red);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* ============================================ */
/* 📱 RESPONSIVE TYPOGRAPHY */
/* ============================================ */

@media (max-width: 1024px) {
    .text-epic-display {
        font-size: var(--text-6xl);
    }
    
    .text-ancient-h1 {
        font-size: var(--text-5xl);
    }
    
    .text-ancient-h2 {
        font-size: var(--text-3xl);
    }
    
    .quote-text-enhanced {
        font-size: var(--text-lg);
        padding: 0 1.5rem;
    }
}

@media (max-width: 768px) {
    .text-epic-display {
        font-size: var(--text-5xl);
        letter-spacing: var(--tracking-wider);
    }
    
    .text-ancient-h1 {
        font-size: var(--text-4xl);
    }
    
    .text-ancient-h2 {
        font-size: var(--text-2xl);
    }
    
    .text-ancient-h3 {
        font-size: var(--text-xl);
    }
    
    .quote-text-enhanced {
        font-size: var(--text-base);
        padding: 0 1rem;
        line-height: var(--leading-normal);
    }
    
    .quote-text-enhanced::before,
    .quote-text-enhanced::after {
        font-size: var(--text-4xl);
    }
}

@media (max-width: 480px) {
    .text-epic-display {
        font-size: var(--text-4xl);
        letter-spacing: var(--tracking-wide);
    }
    
    .text-ancient-h1 {
        font-size: var(--text-3xl);
    }
    
    .text-ancient-h2 {
        font-size: var(--text-xl);
    }
    
    .quote-text-enhanced {
        font-size: var(--text-sm);
        padding: 0 0.5rem;
    }
    
    .quote-author-enhanced {
        font-size: var(--text-base);
    }
    
    .btn-text-epic {
        font-size: var(--text-base);
        letter-spacing: var(--tracking-wide);
    }
}

/* ============================================ */
/* ✨ MYSTICAL TEXT ANIMATIONS */
/* ============================================ */

@keyframes textShimmer {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 1;
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.9;
    }
}

@keyframes quotePulse {
    0%, 100% {
        opacity: 0.4;
        text-shadow: var(--text-glow-blue);
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        text-shadow: 0 0 30px rgba(79, 156, 255, 0.8);
        transform: scale(1.05);
    }
}

@keyframes textGlow {
    0%, 100% {
        text-shadow: var(--text-glow-gold);
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.8), var(--text-shadow-ancient);
    }
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Text Reveal Animation Classes */
.text-reveal {
    overflow: hidden;
    border-right: 2px solid var(--gold-primary);
    white-space: nowrap;
    animation: typewriter 3s steps(40, end), blinkCursor 0.75s step-end infinite;
}

@keyframes blinkCursor {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: var(--gold-primary);
    }
}

/* Floating Text Effect */
.text-floating {
    animation: floatText 3s ease-in-out infinite;
}

@keyframes floatText {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Enhanced Text Selection */
::selection {
    background: rgba(255, 215, 0, 0.3);
    color: #ffffff;
    text-shadow: var(--text-glow-gold);
}

::-moz-selection {
    background: rgba(255, 215, 0, 0.3);
    color: #ffffff;
    text-shadow: var(--text-glow-gold);
}

/* ============================================ */
/* 🎯 TYPOGRAPHY UTILITY CLASSES */
/* ============================================ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

.italic { font-style: italic; }
.not-italic { font-style: normal; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-wrap { white-space: normal; }
.text-nowrap { white-space: nowrap; }
.text-pre { white-space: pre; }
.text-pre-line { white-space: pre-line; }
.text-pre-wrap { white-space: pre-wrap; }

/* Mystical Text Effects Utilities */
.text-glow-gold {
    text-shadow: var(--text-glow-gold);
    animation: textGlow 3s ease-in-out infinite;
}

.text-glow-blue {
    text-shadow: var(--text-glow-blue);
}

.text-glow-purple {
    text-shadow: var(--text-glow-purple);
}

.text-ancient-shadow {
    text-shadow: var(--text-shadow-ancient);
}

.text-mystical-shadow {
    text-shadow: var(--text-shadow-mystical);
}

.text-cosmic-shadow {
    text-shadow: var(--text-shadow-cosmic);
}

/* ============================================ */
/* 🚪 LOGOUT BUTTON STYLES */
/* ============================================ */
.btn-logout {
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    border: 2px solid #ff4444;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-family: var(--font-cosmic-tech);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-logout:hover {
    background: linear-gradient(135deg, #ff6666 0%, #dd2222 100%);
    border-color: #ff6666;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
}