/*
Base Styles - Foundation typography, layout, and global styles
Sets up the basic visual language for Snacked AI
*/

/* ========== HTML & BODY ========== */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--foreground);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== TYPOGRAPHY ========== */

/* All headings use the Wedges display font */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-black);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--foreground);
    line-height: var(--leading-tight);
}

/* Heading sizes */
h1 {
    font-size: var(--text-7xl);
    line-height: var(--leading-tight);
}

h2 {
    font-size: var(--text-6xl);
    line-height: var(--leading-snug);
}

h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
}

h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

/* Body text */
p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--foreground);
}

/* Large body text */
.text-large {
    font-size: var(--text-xl);
    line-height: var(--leading-normal);
}

/* ========== CONTAINER ========== */
/* Constrains content width and centers it */
.container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* ========== SECTIONS ========== */
/* Base section styles */
section {
    position: relative;
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

/* Section headers (centered headings + subheadings) */
.section-header {
    text-align: center;
    margin-bottom: var(--space-4xl);
    position: relative;
    z-index: 10; /* Ensure headers stay above floating images */
}

.section-heading {
    font-size: var(--text-6xl);
    margin-bottom: var(--space-lg);
}

.section-heading-white {
    color: white;
}

.section-subheading {
    font-size: var(--text-xl);
    color: var(--muted-foreground);
    max-width: 700px;
    margin: 0 auto;
}

.section-subheading-white {
    color: rgba(255, 255, 255, 0.9);
}

/* ========== HIGHLIGHT BOXES ========== */
/* Colored boxes behind words in headings */
.highlight-box {
    position: relative;
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
    border: none;
    transform: rotate(-1deg);
    animation: highlight-float 4s ease-in-out infinite;
}

.highlight-pink {
    background-color: var(--pink);
    color: var(--pink-foreground);
}

.highlight-green {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

.highlight-blue {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.highlight-yellow {
    background-color: var(--highlight);
    color: var(--highlight-foreground);
}

/* ========== FOOTER ========== */
.footer {
    background-color: var(--foreground);
    color: var(--card);
    padding: var(--space-2xl) var(--space-lg);
    border-top: none;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.footer p {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    margin: 0;
}

.footer-tagline {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--card);
}

.footer-copyright {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.footer-link {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--card);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

.footer-separator {
    color: var(--muted-foreground);
}

@media (max-width: 768px) {
    .footer-container {
        text-align: center;
    }
}

/* ========== RESPONSIVE DESIGN ========== */

/* Tablet and below */
@media (max-width: 768px) {
    /* Reduce section padding on mobile */
    section {
        padding-top: var(--section-padding-y-mobile);
        padding-bottom: var(--section-padding-y-mobile);
    }
    
    /* Reduce container padding */
    .container {
        padding-left: var(--container-padding-mobile);
        padding-right: var(--container-padding-mobile);
    }
    
    /* Scale down heading sizes */
    h1 {
        font-size: var(--text-5xl);
    }
    
    h2,
    .section-heading {
        font-size: var(--text-5xl);
    }
    
    h3 {
        font-size: var(--text-xl);
    }
    
    /* Scale down section subheadings */
    .section-subheading {
        font-size: var(--text-lg);
    }
    
    /* Scale down large text */
    .text-large {
        font-size: var(--text-lg);
    }
}

/* Mobile only */
@media (max-width: 640px) {
    /* Further reduce heading sizes on small mobile */
    h1 {
        font-size: var(--text-4xl);
    }
    
    h2,
    .section-heading {
        font-size: var(--text-4xl);
    }
}