/**
 * Alma College — design-tokens.
 *
 * Bron: Figma "BFF™ — Alma College" (bgkRxMPNz744t57lWjJplg), collecties
 * Color, Typography, Spacing, Border-radius en Components, plus de
 * tekststijlen op de Brand Guide (regelafstand/letter-spacing).
 *
 * Werkt met het Carmel design system van de plugin (tokens.css +
 * typography.css, aangezet in functions.php). Hier staat ALLEEN wat bij
 * Alma afwijkt van de standaard. Selector moet gelijk zijn aan die van
 * de plugin (op :root werkt het niet, zie carmel/DESIGN-SYSTEM.md).
 */

/* Alma-palet (Figma "Color"), los te gebruiken in style.css. */
:root {
    /* Primary */
    --alma-donker-blauw: #2C2A67;
    --alma-donker-blauw-15: rgba(44, 42, 103, 0.15);
    --alma-ac-grijs: #F9F7F7;

    /* Secondary */
    --alma-licht-blauw: #49BBBC;
    --alma-geel: #E8E234;
    --alma-roze: #E5007E;
    --alma-oranje: #F56400;
    --alma-rood: #F53200;

    /* Neutral */
    --alma-neutral-1000: #000000;
    --alma-neutral-900: #171717;
    --alma-neutral-800: #262626;
    --alma-neutral-700: #404040;
    --alma-neutral-600: #525252;
    --alma-neutral-500: #737373;
    --alma-neutral-400: #A3A3A3;
    --alma-neutral-300: #D4D4D4;
    --alma-neutral-200: #E5E5E5;
    --alma-neutral-100: #F5F5F5;
    --alma-neutral-0: #FFFFFF;
}

:where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {

    /* ============================================================
       KLEUREN
       ============================================================ */
    --carmel-color-text: var(--alma-neutral-1000);
    --carmel-color-bg: var(--alma-ac-grijs);
    --carmel-color-text-light: var(--alma-neutral-100);
    --carmel-color-bg-alt: var(--alma-neutral-100);
    --carmel-color-white: var(--alma-neutral-0);
    --carmel-color-border: var(--alma-donker-blauw-15);

    /* NOG CHECKEN in de ontwerpen: koppen zwart (tekststijlen in de Brand
       Guide) of donkerblauw (merk)? Nu zwart, zoals de tekststijlen. */
    --carmel-color-heading: var(--carmel-color-text);

    --carmel-color-btn-accent: var(--alma-donker-blauw);


    /* ============================================================
       FONTS
       Koppen/display: VAG Rounded Std (zelf te hosten, zie css/fonts.css).
       Tekst, eyebrow, caption, labels, knoppen: Poppins (Google Fonts,
       geladen in functions.php).
       ============================================================ */
    --carmel-font-heading: 'VAG Rounded Std', 'VAG Rounded', 'Arial Rounded MT Bold', sans-serif;
    --carmel-font-body: 'Poppins', sans-serif;


    /* ============================================================
       KOPPEN (Figma: Display/D-1 t/m Heading/H6, allemaal bold)
       ============================================================ */
    --carmel-font-size-display1: 88px;
    --carmel-line-height-display1: 90%;
    --carmel-letter-spacing-display1: -0.88px;   /* -1% */
    --carmel-font-weight-display1: 700;

    --carmel-font-size-display2: 72px;
    --carmel-line-height-display2: 90%;
    --carmel-letter-spacing-display2: -0.72px;   /* -1% */
    --carmel-font-weight-display2: 700;

    --carmel-font-size-h1: 64px;
    --carmel-line-height-h1: 100%;
    --carmel-letter-spacing-h1: -0.64px;         /* -1% */
    --carmel-font-weight-h1: 700;

    --carmel-font-size-h2: 56px;
    --carmel-line-height-h2: 100%;
    --carmel-letter-spacing-h2: normal;
    --carmel-font-weight-h2: 700;

    --carmel-font-size-h3: 32px;
    --carmel-line-height-h3: 120%;
    --carmel-letter-spacing-h3: -0.32px;         /* -1% */
    --carmel-font-weight-h3: 700;

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

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

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

    /* Mobiel (Figma "Mobile"-modus). Letter-spacing naar rato (-1%). */
    --carmel-font-size-display1-mobile: 48px;
    --carmel-letter-spacing-display1-mobile: -0.48px;
    --carmel-font-size-display2-mobile: 38px;
    --carmel-letter-spacing-display2-mobile: -0.38px;
    --carmel-font-size-h1-mobile: 40px;
    --carmel-letter-spacing-h1-mobile: -0.4px;
    --carmel-font-size-h2-mobile: 32px;
    --carmel-letter-spacing-h2-mobile: normal;
    --carmel-font-size-h3-mobile: 24px;
    --carmel-letter-spacing-h3-mobile: -0.24px;
    --carmel-font-size-h4-mobile: 22px;
    --carmel-font-size-h5-mobile: 20px;
    --carmel-font-size-h6-mobile: 16px;


    /* ============================================================
       TEKST (Figma: Body xLarge t/m Small, regular, 120%)
       ============================================================ */
    --carmel-font-size-body-xlarge: 24px;        /* mobiel 20px */
    --carmel-font-size-body-large: 20px;
    --carmel-font-size-body-large-mobile: 18px;
    --carmel-line-height-body-large: 120%;
    --carmel-letter-spacing-body-large: normal;
    --carmel-font-size-body-medium: 18px;
    --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;

    /* Niet in de standaard-tokens, wel in Figma */
    --alma-font-size-body-xlarge-mobile: 20px;
    --alma-font-size-body-small: 16px;
    --alma-font-size-body-small-mobile: 14px;

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


    /* ============================================================
       KNOPPEN (Figma "Components": Button Large 64px hoog, padding 32px,
       gap 16px, medium; mobiel 48px / 16px / 8px)
       ============================================================ */
    /* geldt ook voor de zoekknop (alleen icoon): neutraal houden; de
       padding van tekstknoppen staat in style.css */
    --carmel-btn-padding: 16px;
    --alma-btn-padding-x: 32px;
    /* NOG CHECKEN bij UI Components: afronding van de knoppen */
    --carmel-btn-radius: 16px;
    --alma-btn-height: 64px;
    --alma-btn-height-mobile: 48px;
    --alma-btn-gap: 16px;


    /* ============================================================
       RUIMTE (Figma "Spacing" → Section / Content spacing)
       ============================================================ */
    --carmel-space-xs: 8px;
    --carmel-space-sm: 16px;
    --carmel-space-md: 24px;
    --carmel-space-lg: 40px;
    --carmel-space-xl: 80px;

    /* Section Medium: 120px desktop / 80px mobiel */
    --carmel-space-section: 120px;
    --carmel-space-component: var(--carmel-space-md);


    /* ============================================================
       HOEKEN (Figma "Border-radius": md 8, xl 16, 2xl 24, 3xl 32)
       ============================================================ */
    --carmel-radius-sm: 8px;
    --carmel-radius-md: 16px;
    --carmel-radius-lg: 24px;
    --alma-radius-xl: 32px;


    /* ============================================================
       PLUGIN-ONDERDELEN
       ============================================================ */
    --carmel-search-button-bg: var(--alma-donker-blauw);
}

@media (max-width: 782px) {
    :where(body:not(.wp-admin):not(.wp-customizer), .editor-styles-wrapper) {
        --carmel-font-size-body-xlarge: var(--alma-font-size-body-xlarge-mobile);
        --carmel-font-size-button-large: 14px;
        --carmel-font-size-label-large: 14px;
        --carmel-space-section: 80px;
        --alma-btn-padding-x: 16px;
        --alma-btn-height: var(--alma-btn-height-mobile);
        --alma-btn-gap: 8px;
    }
}