/**
 * Carmel design system — standaard design-tokens.
 *
 * Alleen geladen als het thema dit aanzet:
 *     add_theme_support( 'carmel-design-system' );
 * (zie includes/design-system.php). Bestaande sites (CCG, CCS, BCE)
 * gebruiken dit (nog) niet.
 *
 * Een school-thema zet in zijn eigen css/variables.css ALLEEN wat
 * afwijkt — minimaal kleuren en fonts. Dat bestand laadt na dit bestand
 * en wint dus, MITS het dezelfde selector gebruikt als hieronder
 * (:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper)).
 * Let op: op :root werkt het NIET — deze standaardwaarden staan op <body>
 * en gaan dan vóór wat er van :root geërfd wordt.
 *
 * De waarden onder "gedeeld" zijn bij CCS en BCE (beide naar Figma
 * gebouwd) exact gelijk. De rest is een redelijke standaard (meestal die
 * van BCE) die een school vrijwel altijd overschrijft.
 *
 * Scope is body/.editor-styles-wrapper i.p.v. :root (editor-iframe) en
 * sluit wp-admin en de Customizer uit — :where() telt niet mee in de
 * specificiteit.
 */
:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {

    /* ============================================================
       KLEUREN — altijd per school invullen
       ============================================================ */
    --carmel-color-text: #020A0A;
    --carmel-color-bg: #F9F7F7;
    --carmel-color-text-light: #F5F5F5;
    --carmel-color-bg-alt: #F5F5F5;
    --carmel-color-white: #FFFFFF;
    --carmel-color-border: rgba(2, 10, 10, 0.25);

    --carmel-color-heading: var(--carmel-color-text);

    --carmel-color-btn-accent: var(--carmel-color-text);
    --carmel-color-btn-primary-bg: var(--carmel-color-btn-accent);
    --carmel-color-btn-primary-text: var(--carmel-color-white);
    /* gedeeld */
    --carmel-color-btn-secondary-bg: transparent;
    --carmel-color-btn-secondary-text: var(--carmel-color-btn-accent);
    --carmel-color-btn-secondary-border: var(--carmel-color-btn-accent);

    --carmel-btn-padding: 24px;
    --carmel-btn-radius: 16px;


    /* ============================================================
       FONTS — altijd per school invullen
       ============================================================ */
    --carmel-font-heading: sans-serif;
    --carmel-font-body: sans-serif;

    /* gedeeld */
    --carmel-font-weight-regular: 400;
    --carmel-font-weight-medium: 500;
    --carmel-font-weight-bold: 700;


    /* ============================================================
       KOPPEN
       ============================================================ */
    --carmel-font-size-display1: 88px;
    --carmel-line-height-display1: 90%;          /* gedeeld */
    --carmel-letter-spacing-display1: -2.64px;
    --carmel-font-weight-display1: 500;

    --carmel-font-size-display2: 72px;
    --carmel-line-height-display2: 90%;          /* gedeeld */
    --carmel-letter-spacing-display2: -2.16px;
    --carmel-font-weight-display2: 500;

    --carmel-font-size-h1: 64px;
    --carmel-line-height-h1: 90%;                /* gedeeld */
    --carmel-letter-spacing-h1: -1.28px;
    --carmel-font-weight-h1: 500;

    --carmel-font-size-h2: 48px;
    --carmel-line-height-h2: 100%;
    --carmel-letter-spacing-h2: -0.96px;
    --carmel-font-weight-h2: 500;

    /* gedeeld: h3-h6 groottes */
    --carmel-font-size-h3: 32px;
    --carmel-line-height-h3: 120%;
    --carmel-letter-spacing-h3: -0.64px;
    --carmel-font-weight-h3: 500;

    --carmel-font-size-h4: 28px;
    --carmel-line-height-h4: 120%;
    --carmel-letter-spacing-h4: normal;
    --carmel-font-weight-h4: 500;

    --carmel-font-size-h5: 24px;
    --carmel-line-height-h5: 120%;
    --carmel-letter-spacing-h5: normal;
    --carmel-font-weight-h5: 500;

    --carmel-font-size-h6: 18px;
    --carmel-line-height-h6: 120%;
    --carmel-letter-spacing-h6: normal;
    --carmel-font-weight-h6: 700;                /* gedeeld */

    /* Mobiel (≤782px) */
    --carmel-font-size-display1-mobile: 48px;
    --carmel-letter-spacing-display1-mobile: -1.44px;
    --carmel-font-size-display2-mobile: 40px;
    --carmel-letter-spacing-display2-mobile: -1.2px;
    --carmel-font-size-h1-mobile: 40px;
    --carmel-letter-spacing-h1-mobile: -0.8px;
    --carmel-font-size-h2-mobile: 32px;
    --carmel-letter-spacing-h2-mobile: -0.64px;
    --carmel-font-size-h3-mobile: 24px;
    --carmel-letter-spacing-h3-mobile: -0.48px;
    --carmel-font-size-h4-mobile: 22px;
    --carmel-font-size-h5-mobile: 20px;
    --carmel-font-size-h6-mobile: 16px;


    /* ============================================================
       TEKST — gedeeld
       ============================================================ */
    --carmel-font-size-body-xlarge: 32px;
    --carmel-font-size-body-large: 24px;
    --carmel-font-size-body-large-mobile: 18px;
    --carmel-line-height-body-large: 120%;
    --carmel-letter-spacing-body-large: normal;
    --carmel-font-size-body-medium: 20px;
    --carmel-font-size-body-medium-mobile: 16px;
    --carmel-line-height-body-medium: 120%;
    --carmel-letter-spacing-body-medium: normal;
    --carmel-font-size-caption: 14px;
    --carmel-font-size-eyebrow: 13px;

    --carmel-font-size-button-large: 16px;
    --carmel-font-size-button-small: 14px;
    --carmel-font-size-label-large: 16px;
    --carmel-font-size-label-small: 14px;


    /* ============================================================
       RUIMTE — gedeeld
       ============================================================ */
    --carmel-space-xs: 8px;
    --carmel-space-sm: 16px;
    --carmel-space-md: 24px;
    --carmel-space-lg: 40px;
    --carmel-space-xl: 80px;

    --carmel-space-section: var(--carmel-space-xl);
    --carmel-space-component: var(--carmel-space-md);


    /* ============================================================
       HOEKEN EN BEELDHOOGTES
       ============================================================ */
    --carmel-radius-sm: 8px;
    --carmel-radius-md: 16px;
    --carmel-radius-lg: 24px;

    /* gedeeld */
    --carmel-image-height-hero: 540px;
    --carmel-image-height-card: 400px;


    /* ============================================================
       PLUGIN-ONDERDELEN — gedeeld
       ============================================================ */
    --carmel-search-button-bg: var(--carmel-color-btn-accent);
    --carmel-drawer-logo-height: 32px;
}