:root{

    /* KLEUREN — Elevator Antwerp werkt zonder chroma: het enige kleur op de
       site komt uit het werk zelf. Alles hier is neutraal grijs. */
    --wit:   #ffffff;
    --zwart: #000000;

    --grijs-70: #4d4d4d;  /* leestekst op wit */
    --grijs-45: #7a7a7a;  /* meta, bijschriften, labels */
    --grijs-25: #cacaca;  /* lijnen */
    --grijs-10: #e8e8e8;  /* vlakken achter beeld */

    /* SEMANTISCH — deze vier draaien om op .bg-dark (structural.css),
       zodat blokken nooit zelf een kleur hoeven te kiezen. */
    --bg:        var(--wit);
    --fg:        var(--zwart);
    --fg-muted:  var(--grijs-70);
    --fg-quiet:  var(--grijs-45);
    --lijn:      var(--grijs-25);
    --wash:      var(--grijs-10);

    /* De enige uitzondering op het grijs: het bolletje dat pulseert zolang
       een werk te koop is of een expositie loopt. Pastelgroen, zodat het
       naast de tekst opvalt zonder de achromatische opmaak te breken.
       Draait niet mee op .bg-dark — dezelfde tint werkt op wit en op zwart. */
    --status-live: #9ed5a8;

    /* STRUCTURAL */
    --max-width: calc(100vw - 2 * var(--section-padding-left));
    --max-width-small: calc(100vw - 2 * var(--section-padding-left-small));
    --gap: clamp(1.5rem, 3vw, 3rem);
    --gallery-gap: clamp(0.75rem, 1.2vw, 1rem);
    --padding: clamp(2rem, 4vw, 3rem);
    --main-height: 75vh;

    /* Hoogte van de sticky header. Staat hier omdat sticky content eronder
       (zie entry.css) die hoogte als offset nodig heeft. */
    --header-height: 4.5rem;

    /* STYLE — vierkant, en dat blijft zo */
    --border-radius-small: 0;
    --border-radius-medium: 0;
    --border-radius-large: 0;

    /* Haarlijnen */
    --hairline:        1px solid var(--lijn);
    --hairline-strong: 1px solid var(--fg);

    /* DIEPTE - semantisch, nooit willekeurig */
    --z-drawer: 210;
    --z-header: 300;
    --z-skip-link: 400;

    /* MOTION */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 180ms;
    --transition-mid: 380ms;
    --reveal-duration: 720ms;
    --reveal-shift: 12px;

    /* SECTIONS */
    --section-gap: clamp(2rem, 5vw, 4.5rem);

    /* structural.css rekent met de helft van deze waarden, dus staat hier het
       dubbele van de gewenste sectie-padding (3.5rem — 8rem). */
    --section-padding-top: clamp(7rem, 18vw, 16rem);
    --section-padding-bottom: clamp(7rem, 18vw, 16rem);
    --section-padding-left: clamp(1.25rem, 5vw, 5rem);
    --section-padding-right: var(--section-padding-left);
    --section-max-width: 96rem;

    /* FONTS — Archivo variable (wght 100-900, wdth 62-125) */
    --font-headings: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-text:     var(--font-headings);

    /* Variable-font instellingen per rol */
    --vf-display: 'wdth' 118, 'wght' 620;
    --vf-heading: 'wdth' 108, 'wght' 600;
    --vf-heading-sm: 'wdth' 106, 'wght' 600;
    --vf-text:    'wdth' 100, 'wght' 400;
    --vf-meta:    'wdth' 88, 'wght' 500;
    --vf-button:  'wdth' 92, 'wght' 600;

    /* Type schaal — vloeiend van 600px tot 2560px */
    --h1-size: clamp(3rem, 1.95rem + 5.25vw, 5.25rem);
    --h2-size: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);
    --h3-size: clamp(1.5rem, 1.33rem + 0.85vw, 2.125rem);
    --h4-size: clamp(1.188rem, 1.1rem + 0.44vw, 1.5rem);
    --h5-size: clamp(1.188rem, 1.1rem + 0.44vw, 1.5rem);
    --h6-size: clamp(0.938rem, 0.9rem + 0.19vw, 1.0625rem);
    --p-size:  clamp(0.938rem, 0.9rem + 0.19vw, 1.0625rem);

    --lead-size:      clamp(1.188rem, 1.1rem + 0.44vw, 1.5rem);
    --meta-size:      clamp(0.813rem, 0.78rem + 0.16vw, 0.875rem);
    --meta-size-small: clamp(0.688rem, 0.66rem + 0.14vw, 0.75rem);
}


/* ---------------- */
/* MEDIA QUERIES    */
/* ---------------- */
@media screen and (max-width: 600px) {
    :root{
        --section-max-width: 100%;
    }
}