/**
 * Global Font System - Home2.0
 * Smaller, elegant fonts with cursive accents
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Satisfy&display=swap');

/* Base Font Sizes - 11px base */
:root {
    --font-base: 11px;
    --font-small: 10px;
    --font-medium: 12px;
    --font-large: 13px;
    --font-xlarge: 15px;
    --font-xxlarge: 17px;
    --font-xxxlarge: 21px;
    
    /* Font Families */
    --font-primary: 'Poppins', sans-serif;
    --font-cursive: 'Dancing Script', cursive;
    --font-cursive-alt: 'Satisfy', cursive;
}

/* Global Body */
body {
    font-family: var(--font-primary);
    font-size: var(--font-base);
    line-height: 1.6;
}

/* Headings with Cursive Accents */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600;
}

h1 {
    font-size: var(--font-xxxlarge);
}

h2 {
    font-size: var(--font-xxlarge);
}

h3 {
    font-size: var(--font-xlarge);
}

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

h5, h6 {
    font-size: var(--font-medium);
}

/* Cursive Accents for Special Elements */
.cursive-text,
.hero-subtitle,
.section-tagline,
.feature-accent {
    font-family: var(--font-cursive);
    font-weight: 500;
}

.cursive-alt {
    font-family: var(--font-cursive-alt);
}

/* Buttons */
button, .btn, .btn-primary, .btn-secondary {
    font-size: var(--font-small);
    font-weight: 600;
}

/* Navigation */
.nav-link {
    font-size: var(--font-small);
}

/* Form Elements */
input, textarea, select {
    font-size: var(--font-small);
    font-family: var(--font-primary);
}

label {
    font-size: var(--font-small);
    font-weight: 500;
}

/* Cards */
.card-title {
    font-size: var(--font-medium);
    font-weight: 600;
}

.card-text {
    font-size: var(--font-small);
}

/* Icons - Smaller Sizes */
.icon-small {
    font-size: 1.2rem;
}

.icon-medium {
    font-size: 1.8rem;
}

.icon-large {
    font-size: 2.2rem;
}

.icon-xlarge {
    font-size: 2.8rem;
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
    :root {
        --font-base: 10px;
        --font-small: 9px;
        --font-xxxlarge: 19px;
        --font-xxlarge: 15px;
    }
}