/**
 * MyAthletiq Brand Styles
 * Inspired by Elevate Studios design system
 */

:root {
    /* Brand Colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gold: #a98b53;

    /* Opacity variants */
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-15: rgba(255, 255, 255, 0.15);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-90: rgba(255, 255, 255, 0.9);

    --color-black-50: rgba(0, 0, 0, 0.5);
    --color-black-80: rgba(0, 0, 0, 0.8);

    /* Typography */
    --font-family: system-ui, Arial, sans-serif;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 900;

    /* Spacing */
    --letter-spacing-wide: 0.08em;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Global typography */
body {
    font-family: var(--font-family);
}

/* Heading styles with Elevate Studios aesthetic */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-extrabold);
}

/* Gold accent utilities */
.text-gold {
    color: var(--color-gold);
}

.bg-gold {
    background-color: var(--color-gold);
}

.border-gold {
    border-color: var(--color-gold);
}

.hover\:text-gold:hover {
    color: var(--color-gold);
}

.hover\:bg-gold:hover {
    background-color: var(--color-gold);
}

.hover\:border-gold:hover {
    border-color: var(--color-gold);
}

/* Black background utilities */
.bg-black {
    background-color: var(--color-black);
}

.text-black {
    color: var(--color-black);
}

/* Interactive elements with gold accent */
.btn-gold {
    background-color: var(--color-gold);
    color: var(--color-black);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-normal);
}

.btn-gold:hover {
    background-color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(169, 139, 83, 0.3);
}

.btn-gold-outline {
    background-color: transparent;
    color: var(--color-gold);
    border: 2px solid var(--color-gold);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-normal);
}

.btn-gold-outline:hover {
    background-color: var(--color-gold);
    color: var(--color-black);
    transform: translateY(-2px);
}

/* Link styles with gold accent */
.link-gold {
    color: var(--color-white);
    transition: color var(--transition-fast);
}

.link-gold:hover {
    color: var(--color-gold);
}

/* Border utilities */
.border-active-gold {
    border-bottom: 2px solid var(--color-gold);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Animations inspired by Elevate Studios */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes goldShimmer {
    0%, 100% {
        background-position: -100% 0;
    }
    50% {
        background-position: 200% 0;
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-in both;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Gold shimmer effect for special headings */
.gold-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-white) 0%,
        var(--color-gold) 50%,
        var(--color-white) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldShimmer 4s linear infinite;
}