/* ============================================================
   Van Geenen — Site Tokens voor rvsplaat.nl
   Gegenereerd: 2026-05-06
   Bron: Van Geenen Design System v1 (colors_and_type.css)
   NIET bewerken in theme — dit bestand staat in uploads/css/
   en overleeft thema-updates.
   ============================================================ */

/* Webfonts — Lexend lokaal gehost in uploads/fonts/lexend/
   font-display: swap voor performance (FOIT-preventie)
   Alleen de gebruikte gewichten: 300, 400, 500, 600, 700
   (300=light voor display, 400=body, 500=UI, 600=h3/h4, 700=bold accenten)
   -------------------------------------------------------------- */

@font-face {
  font-family: "Lexend";
  src: url("/wp-content/uploads/fonts/lexend/Lexend-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("/wp-content/uploads/fonts/lexend/Lexend-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("/wp-content/uploads/fonts/lexend/Lexend-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("/wp-content/uploads/fonts/lexend/Lexend-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("/wp-content/uploads/fonts/lexend/Lexend-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono — secundair voor specs (maatvoering, toleranties)
   Via Google Fonts CDN met display=swap (acceptabel voor mono-font op specs-pagina's)
   -------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

/* ============================================================
   CSS Custom Properties — Van Geenen Design Tokens
   ============================================================ */

/* ============================================================
   SEO/GEO Content-componenten — Van Geenen Skin-mapping
   ------------------------------------------------------------
   Verhuisd naar wpt_global_custom_css (Globale CSS-veld) per 2026-06-09
   (thema v1.8.0.54). De --wpt-*-token mapping staat nu in het Globale
   CSS-veld van de rvsplaat-installatie (samen met de component-CSS).
   De fundamentele --vg-* brand-tokens hieronder blijven in dit bestand.
   ============================================================ */

:root {

  /* ---------- Brand kleuren ---------- */
  --vg-hot-metal:       #B71712;   /* Hot Metal — primaire merkkleur, "gesmolten staal" */
  --vg-hot-metal-deep:  #7A0A0E;   /* Dieper rood, gebruikt aan gradient-root            */
  --vg-gun-metal:       #040706;   /* Gun Metal — bijna zwart, afgewerkt staal           */
  --vg-gun-metal-2:     #14181A;   /* Licht opgeheven gun metal voor oppervlakken        */

  /* Neutrals — cool steel schaal */
  --vg-white:           #FFFFFF;
  --vg-paper:           #F4F4F5;   /* Off-white, licht warm                              */
  --vg-steel-100:       #E6E6E8;
  --vg-steel-200:       #C7C8CC;
  --vg-steel-250:       #CDCED3;   /* Tussenstap steel-200→300 — CTA-band gradient-eindpunt */
  --vg-steel-300:       #9B9CA3;
  --vg-steel-400:       #6E6F77;
  --vg-steel-500:       #45464D;
  --vg-steel-600:       #2A2B30;
  --vg-black:           #000000;

  /* Hot Metal schaal (voor tints / hover states) */
  --vg-red-50:          #FCEAEA;
  --vg-red-100:         #F5C2C3;
  --vg-red-300:         #DA5256;
  --vg-red-500:         var(--vg-hot-metal);
  --vg-red-700:         #8B0E12;
  --vg-red-900:         #4D0709;

  /* Signature gradient — Hot Metal → Gun Metal "curved gradient" */
  --vg-gradient-curve: radial-gradient(
      120% 90% at 100% 100%,
      #E62A2F 0%,
      #B11116 22%,
      #5C0A0D 48%,
      #131316 75%,
      #000000 100%
  );
  --vg-gradient-linear: linear-gradient(135deg, #B11116 0%, #5C0A0D 45%, #131316 100%);

  /* Semantische oppervlak + tekst tokens */
  --vg-bg:              var(--vg-paper);
  --vg-bg-inverse:      var(--vg-gun-metal);
  --vg-surface:         var(--vg-white);
  --vg-surface-2:       var(--vg-steel-100);
  --vg-border:          var(--vg-steel-200);
  --vg-border-strong:   var(--vg-steel-400);

  --vg-fg-1:            var(--vg-gun-metal);   /* Primaire tekst op licht    */
  --vg-fg-2:            var(--vg-steel-500);   /* Secundaire tekst op licht  */
  --vg-fg-3:            var(--vg-steel-400);   /* Gedempte / meta tekst      */
  --vg-fg-on-dark-1:    var(--vg-white);
  --vg-fg-on-dark-2:    var(--vg-steel-200);
  --vg-fg-on-dark-3:    var(--vg-steel-300);
  --vg-accent:          var(--vg-hot-metal);

  /* ---------- Typografie ---------- */
  --vg-font-display: "Lexend", "Helvetica Neue", Arial, sans-serif;
  --vg-font-sans:    "Lexend", "Helvetica Neue", Arial, sans-serif;
  --vg-font-mono:    "JetBrains Mono", ui-monospace, "Menlo", monospace;

  /* Type schaal — Lexend, gewicht + grootte voor hiërarchie */
  --vg-fs-hero:     clamp(64px, 9vw, 144px);
  --vg-fs-h1:       clamp(44px, 6vw, 88px);
  --vg-fs-h2:       clamp(32px, 4vw, 56px);
  --vg-fs-h3:       28px;
  --vg-fs-h4:       22px;
  --vg-fs-eyebrow:  14px;
  --vg-fs-body-lg:  19px;
  --vg-fs-body:     16px;
  --vg-fs-body-sm:  14px;
  --vg-fs-meta:     12px;

  --vg-lh-tight:   0.92;
  --vg-lh-display: 1.0;
  --vg-lh-heading: 1.1;
  --vg-lh-body:    1.55;

  --vg-tracking-display: -0.025em;
  --vg-tracking-eyebrow: 0;
  --vg-tracking-body:    0;

  /* ---------- Spacing schaal (4-pt grid) ---------- */
  --vg-space-0:   0;
  --vg-space-1:   4px;
  --vg-space-2:   8px;
  --vg-space-3:   12px;
  --vg-space-4:   16px;
  --vg-space-5:   24px;
  --vg-space-6:   32px;
  --vg-space-7:   48px;
  --vg-space-8:   64px;
  --vg-space-9:   96px;
  --vg-space-10:  128px;

  /* ---------- Radii ---------- */
  --vg-radius-sm:   4px;
  --vg-radius-md:   8px;
  --vg-radius-lg:   14px;
  --vg-radius-xl:   24px;
  --vg-radius-pill: 999px;

  /* ---------- Shadows / elevatie ---------- */
  --vg-shadow-1:        0 1px 2px rgba(19,19,22,.08);
  --vg-shadow-2:        0 8px 20px -8px rgba(19,19,22,.18);
  --vg-shadow-3:        0 24px 60px -20px rgba(19,19,22,.30);
  --vg-shadow-red-glow: 0 18px 60px -18px rgba(177,17,22,.55);

  /* ---------- Motion ---------- */
  --vg-ease:      cubic-bezier(.2,.7,.2,1);
  --vg-ease-out:  cubic-bezier(.16,1,.3,1);
  --vg-dur-fast:  140ms;
  --vg-dur-base:  240ms;
  --vg-dur-slow:  520ms;

  /* ---------- Content-container (uitgelijnd met de header) ----------
     Bron van waarheid voor breedte + horizontale padding van elk element
     dat exact op de logo/header-content-x moet uitlijnen (o.a. .wpt-breadcrumb,
     .container hierboven). Waarden 1:1 gekopieerd uit .wpt-header-bar
     (post 11, Main Navigation Component-CSS) — wijzig die daar NIET los,
     wijzig hier + verifieer de header nog steeds overeenkomt.
     Fix Plan 3 actie A1 (07-07-2026): --vg-container/--vg-pad-x bestonden
     nog niet, waardoor .wpt-breadcrumb's var(--vg-container)/var(--vg-pad-x)
     op niets resolvden (geen max-width, geen horizontale padding = flush-left). */
  --vg-container: 1240px;
  --vg-pad-x:     40px; /* desktop, >=1200px — matcht .wpt-header-bar padding: 14px 40px */
}

/* Responsive --vg-pad-x — spiegelt de .wpt-header-bar-breakpoints (post 11)
   exact (1199px/767px), zodat elk --vg-pad-x-gebruikend element op elke
   viewport-breedte identiek uitlijnt met de header. */
@media (max-width: 1199px) {
  :root { --vg-pad-x: 28px; } /* matcht .wpt-header-bar padding: 14px 28px */
}
@media (max-width: 767px) {
  :root { --vg-pad-x: 15px; } /* matcht .wpt-header-bar padding: 14px 15px */
}

/* ============================================================
   Semantische typografie-klassen (utility classes)
   ============================================================ */

.vg-hero {
  font-family: var(--vg-font-display);
  font-weight: 400;
  font-size: var(--vg-fs-hero);
  line-height: var(--vg-lh-tight);
  letter-spacing: var(--vg-tracking-display);
  color: var(--vg-fg-1);
}

.vg-h1 {
  font-family: var(--vg-font-display);
  font-weight: 400;
  font-size: var(--vg-fs-h1);
  line-height: var(--vg-lh-display);
  letter-spacing: var(--vg-tracking-display);
}

.vg-h2 {
  font-family: var(--vg-font-display);
  font-weight: 400;
  font-size: var(--vg-fs-h2);
  line-height: var(--vg-lh-heading);
}

.vg-h3 {
  font-family: var(--vg-font-sans);
  font-weight: 600;
  font-size: var(--vg-fs-h3);
  line-height: var(--vg-lh-heading);
  letter-spacing: -0.01em;
}

.vg-h4 {
  font-family: var(--vg-font-sans);
  font-weight: 600;
  font-size: var(--vg-fs-h4);
  line-height: var(--vg-lh-heading);
}

.vg-eyebrow {
  font-family: var(--vg-font-sans);
  font-weight: 600;
  font-size: var(--vg-fs-eyebrow);
  letter-spacing: var(--vg-tracking-eyebrow);
  color: var(--vg-accent);
}

.vg-lead {
  font-family: var(--vg-font-sans);
  font-weight: 400;
  font-size: var(--vg-fs-body-lg);
  line-height: var(--vg-lh-body);
  color: var(--vg-fg-2);
}

.vg-body {
  font-family: var(--vg-font-sans);
  font-weight: 400;
  font-size: var(--vg-fs-body);
  line-height: var(--vg-lh-body);
  color: var(--vg-fg-1);
}

.vg-meta {
  font-family: var(--vg-font-sans);
  font-weight: 500;
  font-size: var(--vg-fs-meta);
  letter-spacing: 0.04em;
  color: var(--vg-fg-3);
}

.vg-mono {
  font-family: var(--vg-font-mono);
  font-size: var(--vg-fs-body-sm);
}