/* base.css - Base Typography, Colors, Globals */

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-weight: 400;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.25;
}

/* Accessibility skip link */
.skip-link {
    position: absolute;
    top: -80px;
    left: 20px;
    background-color: var(--color-gold);
    color: var(--color-bg-primary);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-weight: bold;
    z-index: 9999;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 20px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-surface);
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-light);
}

/* Selection */
::selection {
    background-color: var(--color-fire-glow);
    color: var(--color-gold-light);
}

/* Keyframes for common animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
    0% { transform: scale(0.95); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.5; }
}

.animate-fade-in {
    animation: fadeIn var(--transition-normal) forwards;
}

.animate-slide-up {
    animation: slideUp var(--transition-normal) forwards;
}

.pulse-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--color-gold);
    border-radius: 50%;
    margin-right: var(--space-sm);
    animation: pulseGlow 2s infinite ease-in-out;
}