/* ============================================================
   TYPOGRAPHY SCHEMES — Schema-variabelen + Element-toepassing
   
   ARCHITECTUUR:
   Deel 1: Schema-definities (variabelen per data-typo-scheme)
   Deel 2: Generieke element-toepassing (werkt voor ALLE pagina's)
   
   Wijzig een variabele in Deel 1 → het werkt automatisch door
   op alle elementen via Deel 2. Geen edits nodig op pagina-CSS.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   DEEL 1: SCHEMA-DEFINITIES
   ════════════════════════════════════════════════════════════ */

/* Schema 9: De Couturier — Playfair Display + Inter */
[data-typo-scheme="9"] {
    /* Font-families */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-meta: 'Inter', -apple-system, sans-serif;

    /* H1 / Display */
    --h1-size: clamp(28px, 4vw, 54px);
    --h1-weight: 400;
    --h1-leading: 1.05;
    --h1-tracking: -0.02em;

    /* H2 */
    --h2-size: clamp(28px, 3.5vw, 44px);
    --h2-weight: 400;
    --h2-leading: 1.1;
    --h2-tracking: -0.01em;

    /* H3 */
    --h3-size: clamp(20px, 2vw, 28px);
    --h3-weight: 700;
    --h3-leading: 1.15;
    --h3-tracking: 0em;

    /* Body */
    --body-size: 17px;
    --body-weight: 400;
    --body-leading: 1.6;
    --body-tracking: 0.01em;

    /* Lead / Intro */
    --lead-size: 20px;
    --lead-weight: 500;
    --lead-leading: 1.5;

    /* Quotes */
    --quote-size: clamp(24px, 3vw, 36px);
    --quote-weight: 400;
    --quote-leading: 1.2;
    --quote-style: italic;
    --quote-font: 'Playfair Display', Georgia, serif;

    /* Meta / Labels — luxemerk-stijl: breed gespatieerd uppercase */
    --meta-size: 12px;
    --meta-weight: 500;
    --meta-leading: 1.4;
    --meta-tracking: 0.1em;
    --meta-transform: uppercase;

    /* Buttons */
    --btn-size: 14px;
    --btn-weight: 500;
    --btn-tracking: 0.08em;
    --btn-transform: uppercase;

    /* Caption */
    --caption-size: 13px;
    --caption-weight: 400;
    --caption-leading: 1.4;
    --caption-tracking: 0.02em;

    /* Navigation */
    --nav-size: 15px;
    --nav-weight: 500;
    --nav-tracking: 0.06em;
}


/* ════════════════════════════════════════════════════════════
   DEEL 2: GENERIEKE ELEMENT-TOEPASSING
   
   Deze regels koppelen typografie-variabelen (uit data-typo-scheme)
   aan kleur-variabelen (uit data-color-scheme) op HTML-elementen.
   
   Alle pagina's erven deze regels automatisch.
   Pagina-specifieke CSS hoeft NOOIT font-family/size/weight
   te herhalen — alleen layout (padding, margin, grid).
   ════════════════════════════════════════════════════════════ */

/* ─── Body baseline ─── */
body {
    font-family: var(--font-body);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-leading);
    letter-spacing: var(--body-tracking);
}

/* ─── Koppen ─── */
h1,
.heading-1 {
    font-family: var(--font-heading);
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-leading);
    letter-spacing: var(--h1-tracking);
    color: var(--color-text-heading);
}

h2,
.heading-2 {
    font-family: var(--font-heading);
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-leading);
    letter-spacing: var(--h2-tracking);
    color: var(--color-text-heading);
}

h3,
.heading-3 {
    font-family: var(--font-heading);
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-leading);
    letter-spacing: var(--h3-tracking);
    color: var(--color-text-heading);
}

/* ─── Body tekst ─── */
p,
.body-text {
    font-family: var(--font-body);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-leading);
    letter-spacing: var(--body-tracking);
    color: var(--color-text-primary);
}

/* ─── Lead / Intro ─── */
.lead-text {
    font-family: var(--font-body);
    font-size: var(--lead-size);
    font-weight: var(--lead-weight);
    line-height: var(--lead-leading);
}

/* ─── Citaten ─── */
blockquote,
.quote-text {
    font-family: var(--quote-font);
    font-size: var(--quote-size);
    font-weight: var(--quote-weight);
    line-height: var(--quote-leading);
    font-style: var(--quote-style);
    color: var(--color-text-heading);
}

/* ─── Meta / Labels — de luxemerk-spelling ─── */
.meta-label {
    font-family: var(--font-meta);
    font-size: var(--meta-size);
    font-weight: var(--meta-weight);
    line-height: var(--meta-leading);
    letter-spacing: var(--meta-tracking);
    text-transform: var(--meta-transform);
    color: var(--color-text-secondary);
}

/* ─── Buttons ─── */
.btn {
    font-family: var(--font-meta);
    font-size: var(--btn-size);
    font-weight: var(--btn-weight);
    letter-spacing: var(--btn-tracking);
    text-transform: var(--btn-transform);
}

/* ─── Caption ─── */
.caption,
figcaption {
    font-family: var(--font-body);
    font-size: var(--caption-size);
    font-weight: var(--caption-weight);
    line-height: var(--caption-leading);
    letter-spacing: var(--caption-tracking);
    color: var(--color-text-secondary);
}

/* ─── Navigatie ─── */
nav a,
.nav-text {
    font-family: var(--font-meta);
    font-size: var(--nav-size);
    font-weight: var(--nav-weight);
    letter-spacing: var(--nav-tracking);
}

/* ─── Links ─── */
a {
    color: var(--color-accent-primary);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-accent-hover);
}