/* =========== Global styles and typography ==========*/
/* Base layout */
html, body {
    height: 100%;
    min-height: 100%;
}

/* Gradient background */
body {
    background: linear-gradient(90deg,
        var(--color-accent-1) 0%,
        var(--color-accent-2) 40%,
        var(--color-accent-3) 80%
    );
    color: var(--color-text);
    font-family: var(--font-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== TYPOGRAPHY ===== */
/* Main headings with brand styling */
h1, h2 {
    font-family: var(--font-accent);
    font-weight: 700;
    text-transform: uppercase;
}

p {
    font-family: var(--font-main);
    color: var(--color-text);
}

/* Title with gradient text effect */
.color-title {
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 2.5rem;
    background: linear-gradient(90deg, var(--color-primary-orange), var(--color-primary-pink));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin-bottom: 1rem;
}

.tagline {
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: 2rem;
}

/* ============ MEDIA QUERIES ============ */

/* Large tablet and below */
@media (max-width: 992px) {
    .color-title {
        font-size: 2.1rem;
        letter-spacing: -1px;
    }
    .tagline {
        font-size: 1.5rem;
    }
}

/* Tablet size devices */
@media (max-width: 768px) {
    .color-title {
        font-size: 1.7rem;
        margin-bottom: 0.7rem;
    }
    .tagline {
        font-size: 1.2rem;
    }
    h1, h2 {
        font-size: 1.3rem;
    }
    p {
        font-size: 1rem;
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .color-title {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }
    .tagline {
        font-size: 1rem;
    }
    h1, h2 {
        font-size: 1.1rem;
    }
    p {
        font-size: 0.97rem;
    }
}

/* Small mobile devices */
@media (max-width: 375px) {
    .color-title {
        font-size: 1.1rem;
    }
    .tagline {
        font-size: 0.95rem;
    }
    h1, h2 {
        font-size: 1rem;
    }
    p {
        font-size: 0.93rem;
    }
}