/* Frontend Globale Styling - Consistent met Design System */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* Import Design System Variables */
@import url('/css/variables.css');

/* Global Header Styling */
h1, h2, h3, h4, h5, h6,
.heading,
.section-title,
.product-name,
.shop-title {
    font-family: var(--font-serif);
    font-weight: var(--heading-font-weight);
    letter-spacing: var(--heading-letter-spacing);
    font-style: normal;
    font-stretch: var(--heading-font-stretch);
    font-variation-settings: "wght" var(--heading-font-variation-weight);
}

/* Body en algemene tekst */
body {
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    font-weight: var(--body-font-weight);
}

/* Specifieke header groottes */
h1 {
    font-size: var(--text-8xl);
    line-height: var(--leading-tight);
}

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

h3 {
    font-size: var(--text-5xl);
    line-height: var(--leading-normal);
}

h4 {
    font-size: var(--text-4xl);
    line-height: var(--leading-normal);
}

h5 {
    font-size: var(--text-3xl);
    line-height: var(--leading-normal);
}

h6 {
    font-size: var(--text-2xl);
    line-height: var(--leading-normal);
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
    h1 {
        font-size: var(--text-7xl);
    }
    
    h2 {
        font-size: var(--text-5xl);
    }
    
    h3 {
        font-size: 28px;
    }
    
    h4 {
        font-size: 22px;
    }
}

.form-group label .required-indicator {
    font-size: 0.75em;
    line-height: 1;
    vertical-align: super;
    margin-left: 0px;
    color: inherit;
}