/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Poppins:wght@400;500;600&family=Bebas+Neue&display=swap');

/* CSS Variables for Fonts */
:root {
    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --font-hero: 'Bebas Neue', cursive;

    /* Font Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Font Sizes */
    --fs-hero: clamp(2.5rem, 8vw, 5rem);
    --fs-h1: clamp(2rem, 6vw, 4rem);
    --fs-h2: clamp(1.75rem, 5vw, 3rem);
    --fs-h3: clamp(1.5rem, 3vw, 2rem);
    --fs-h4: clamp(1.25rem, 2.5vw, 1.5rem);
    --fs-body: clamp(1rem, 2vw, 1.125rem);
    --fs-small: clamp(0.875rem, 1.5vw, 1rem);
}

/* Base Typography */
body {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
}

h4 {
    font-size: var(--fs-h4);
}

/* Hero Title - Special Font */
.hero-title {
    font-family: var(--font-hero);
    font-size: var(--fs-hero);
    font-weight: var(--fw-regular);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Paragraph Text */
p {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    margin-bottom: 1rem;
}

/* Strong/Bold Text */
strong, b {
    font-weight: var(--fw-semibold);
}

/* Section Titles */
.section-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-h2);
    text-align: center;
    margin-bottom: 2rem;
}

/* Navigation Links */
.nav-link {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 1rem;
}

/* Buttons */
.btn {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Logo */
.logo {
    font-family: var(--font-hero);
    font-size: 1.75rem;
    font-weight: var(--fw-regular);
    letter-spacing: 1px;
}

/* Distance Cards */
.distance-card h3 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
}

/* Info Cards */
.info-card h3 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
}

/* Feature Cards */
.feature-card h3 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
}

/* Countdown */
.countdown-value {
    font-family: var(--font-hero);
    font-size: 3rem;
    font-weight: var(--fw-regular);
}

.countdown-label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: var(--fw-medium);
}

/* Small Text */
.small-text, small {
    font-size: var(--fs-small);
}

/* Responsive Typography Adjustments */
@media (max-width: 768px) {
    :root {
        --fs-hero: 2.5rem;
        --fs-h1: 2rem;
        --fs-h2: 1.75rem;
        --fs-h3: 1.5rem;
        --fs-body: 1rem;
    }

    .countdown-value {
        font-size: 2rem;
    }
}