/**
 * Twents Carmel College — design-tokens.
 *
 * Bron: Figma "BFF™ — Twents Carmel College" (jjbO03Far6Qusa2KeM7D27),
 * collecties Color, Typography, Spacing, Border-radius en Components,
 * plus de tekststijlen in de ontwerpen (regelafstand/letter-spacing staan
 * niet in de variabelen; nagemeten op Home: Display D-1, Heading H2, Body
 * Large).
 *
 * Werkt met het Carmel design system van de plugin (tokens.css +
 * typography.css, aangezet in functions.php). Hier staat ALLEEN wat bij
 * TCC afwijkt van de standaard. Selector moet gelijk zijn aan die van
 * de plugin (op :root werkt het niet, zie carmel/DESIGN-SYSTEM.md).
 *
 * Het thema is een kopie van theme-alma: de CSS in css/blocks/ gebruikt
 * nog de Alma-namen (--alma-donker-blauw enz.). Die wijzen hieronder
 * (VERTAALLAAG) voorlopig naar TCC-kleuren; per onderdeel vervangen door
 * de --tcc-namen zodra het tegen het TCC-Figma is gelegd.
 */

/* TCC-palet (Figma "Color"), los te gebruiken in style.css. */
:root {
    /* Primary */
    --tcc-blauw: #000055;
    --tcc-blauw-15: rgba(0, 0, 85, 0.15);
    --tcc-grijs: #F2F2F2;

    /* Secondary */
    --tcc-kobalt-blauw: #003C8C;
    --tcc-balpen-blauw: #14A0DC;
    --tcc-geel: #FFBE00;         /* Avontuurlijk Geel */
    --tcc-rood: #CF2C62;         /* Rugzak Rood */
    --tcc-oranje: #FF7D37;       /* Onderzoekend Oranje */

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

    /* ------------------------------------------------------------
       VERTAALLAAG (tijdelijk): Alma-namen → TCC-kleuren, zodat de
       overgenomen CSS meteen in TCC-kleuren staat. Rol per naam:
       donker-blauw = hoofdkleur, ac-grijs = lichte vlakken, roze =
       accent (verlopen, rondjes), licht-blauw/geel/oranje/rood =
       secundaire accenten. Per onderdeel nalopen tegen Figma.
       ------------------------------------------------------------ */
    --alma-donker-blauw: var(--tcc-blauw);
    --alma-donker-blauw-15: var(--tcc-blauw-15);
    --alma-ac-grijs: var(--tcc-grijs);
    --alma-licht-blauw: var(--tcc-balpen-blauw);
    --alma-geel: var(--tcc-geel);
    --alma-roze: var(--tcc-rood);
    --alma-oranje: var(--tcc-oranje);
    --alma-rood: var(--tcc-rood);

    --alma-neutral-1000: var(--tcc-neutral-1000);
    --alma-neutral-900: var(--tcc-neutral-900);
    --alma-neutral-800: var(--tcc-neutral-800);
    --alma-neutral-700: var(--tcc-neutral-700);
    --alma-neutral-600: var(--tcc-neutral-600);
    --alma-neutral-500: var(--tcc-neutral-500);
    --alma-neutral-400: var(--tcc-neutral-400);
    --alma-neutral-300: var(--tcc-neutral-300);
    --alma-neutral-200: var(--tcc-neutral-200);
    --alma-neutral-100: var(--tcc-neutral-100);
    --alma-neutral-0: var(--tcc-neutral-0);
}

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

    /* ============================================================
       KLEUREN
       Tekst en koppen TCC Blauw (Figma: alle tekststijlen op Home),
       pagina wit (Figma Home: #FFF), lichte vlakken TCC Grijs.
       ============================================================ */
    --carmel-color-text: var(--tcc-blauw);
    --carmel-color-bg: var(--tcc-neutral-0);
    --carmel-color-text-light: var(--tcc-neutral-100);
    --carmel-color-bg-alt: var(--tcc-grijs);
    --carmel-color-white: var(--tcc-neutral-0);
    --carmel-color-border: var(--tcc-blauw-15);
    --carmel-color-heading: var(--tcc-blauw);

    --carmel-color-btn-accent: var(--tcc-blauw);


    /* ============================================================
       FONTS
       Alles PT Sans (Figma: Heading, Display, Body, Eyebrow, Caption,
       Label), via Google Fonts (functions.php).
       ============================================================ */
    --carmel-font-heading: 'PT Sans', sans-serif;
    --carmel-font-body: 'PT Sans', sans-serif;


    /* ============================================================
       KOPPEN (Figma: Display/D-1 t/m Heading/H6, bold)
       Nagemeten: D-1 90% / -4%, H2 100% / -2%. Voor de andere koppen
       dezelfde verhouding aangenomen (Display -4%, H1-H3 -2%, H4-H6
       -1%): NOG NALOPEN in de ontwerpen.
       ============================================================ */
    --carmel-font-size-display1: 96px;
    --carmel-line-height-display1: 90%;
    --carmel-letter-spacing-display1: -3.84px;   /* -4% */
    --carmel-font-weight-display1: 700;

    --carmel-font-size-display2: 88px;
    --carmel-line-height-display2: 90%;
    --carmel-letter-spacing-display2: -3.52px;   /* -4% (aanname) */
    --carmel-font-weight-display2: 700;

    --carmel-font-size-h1: 64px;
    --carmel-line-height-h1: 100%;
    --carmel-letter-spacing-h1: -1.28px;         /* -2% (aanname) */
    --carmel-font-weight-h1: 700;

    --carmel-font-size-h2: 56px;
    --carmel-line-height-h2: 100%;
    --carmel-letter-spacing-h2: -1.12px;         /* -2% */
    --carmel-font-weight-h2: 700;

    --carmel-font-size-h3: 32px;
    --carmel-line-height-h3: 120%;
    --carmel-letter-spacing-h3: -0.64px;         /* -2% (aanname) */
    --carmel-font-weight-h3: 700;

    --carmel-font-size-h4: 28px;
    --carmel-line-height-h4: 120%;
    --carmel-letter-spacing-h4: -0.28px;         /* -1% (aanname) */
    --carmel-font-weight-h4: 700;

    --carmel-font-size-h5: 24px;
    --carmel-line-height-h5: 120%;
    --carmel-letter-spacing-h5: -0.24px;         /* -1% (aanname) */
    --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. */
    --carmel-font-size-display1-mobile: 48px;
    --carmel-letter-spacing-display1-mobile: -1.92px;
    --carmel-font-size-display2-mobile: 48px;
    --carmel-letter-spacing-display2-mobile: -1.92px;
    --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 (Figma: Body xLarge t/m Small, regular)
       Nagemeten: Body Large 130% / -3%. Body Medium: Alma-regel (150%)
       aangehouden voor lopende tekst (leesbaarheid, WCAG 1.4.12): NOG
       NALOPEN in de TCC-ontwerpen.
       ============================================================ */
    --carmel-font-size-body-xlarge: 32px;        /* mobiel 20px */
    --carmel-font-size-body-large: 24px;
    --carmel-font-size-body-large-mobile: 18px;
    --carmel-line-height-body-large: 130%;
    --carmel-letter-spacing-body-large: -0.72px; /* -3% */
    --carmel-font-size-body-medium: 20px;
    --carmel-font-size-body-medium-mobile: 16px;
    --carmel-line-height-body-medium: 150%;
    --carmel-letter-spacing-body-medium: normal;
    --carmel-font-size-caption: 14px;
    --carmel-font-size-eyebrow: 13px;

    /* Niet in de standaard-tokens, wel in Figma. Onder de Alma-naam,
       omdat de overgenomen CSS die gebruikt (zie vertaallaag). */
    --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;
    --carmel-font-size-button-small: 14px;
    --carmel-font-size-label-large: 18px;        /* mobiel 16px */
    --carmel-font-size-label-small: 14px;


    /* ============================================================
       KNOPPEN (Figma "Components": Button Large 64px hoog, padding 32px,
       gap 16px, medium; mobiel 48px / 16px / 8px; Button Small 32px)
       ============================================================ */
    /* 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: vorm van de knoppen in TCC (pil zoals Alma?) */
    --carmel-btn-radius: 999px;
    --alma-btn-height: 64px;
    --alma-btn-height-mobile: 48px;
    --alma-btn-gap: 16px;
    /* Pill met pijl: rondje rechts, 4px van de rand, 24px na de tekst */
    --alma-btn-inset: 4px;
    --alma-btn-icon-gap: 24px;


    /* ============================================================
       RUIMTE (Figma "Spacing" → Section / Content spacing; gelijk aan
       Alma)
       ============================================================ */
    --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;
       gelijk aan Alma)
       ============================================================ */
    --carmel-radius-sm: 8px;
    --carmel-radius-md: 16px;
    --carmel-radius-lg: 24px;
    --alma-radius-xl: 32px;


    /* ============================================================
       PLUGIN-ONDERDELEN
       ============================================================ */
    --carmel-search-button-bg: var(--tcc-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-label-large: 16px;
        --carmel-space-section: 80px;
        --alma-btn-padding-x: 16px;
        --alma-btn-height: var(--alma-btn-height-mobile);
        --alma-btn-gap: 8px;
        --alma-btn-icon-gap: 16px;
    }
}