/* ============================================================
   DV SERVICE DESIGN SYSTEM — gebundelde tokens
   Gegenereerd uit tokens/*.css (de @import-keten was render-
   blokkerend: 7 sequentiële requests). Bewerk de bronbestanden
   in tokens/ en plak ze hier opnieuw samen.
   Google Fonts wordt via <link> in de HTML geladen (parallel).
   ============================================================ */

/* ============================================================
   DV SERVICE — WEBFONTS
   Display:  Archivo        — sturdy industrial grotesque (headings, logo-adjacent)
   Body:     Hanken Grotesk — clean humanist sans (UI + prose)
   Mono:     Space Mono     — technical specs, kW/kWh, energy-label codes

   TWO WAYS TO LOAD THESE FONTS:

   [A] CDN (active below) — works instantly, needs internet. Fine for
       development in VS Code and for most production sites.

   [B] SELF-HOSTED (offline / fully portable) — download the .woff2 files
       once into ../assets/fonts/ and switch which block is commented.
       See ../assets/fonts/README.md for the exact files + 3-step guide.
   ============================================================ */

/* ---- [A] CDN (Google Fonts) — comment this line out when self-hosting ---- */

/* ---- [B] SELF-HOSTED — uncomment this block once the .woff2 files are in
        ../assets/fonts/ (filenames must match exactly). Then comment out [A]. ----

@font-face { font-family: 'Archivo'; font-weight: 500 900; font-style: normal; font-display: swap;
  src: url('../assets/fonts/archivo-variable.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400 700; font-style: normal; font-display: swap;
  src: url('../assets/fonts/hanken-grotesk-variable.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('../assets/fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('../assets/fonts/space-mono-700.woff2') format('woff2'); }

---- end self-hosted block ---- */

/* ============================================================
   DV SERVICE — COLOR TOKENS
   Brand DNA from the logo: royal-blue "D" + fresh lime-green "V".
   Blue = trust / electrical / technical.  Green = energy / growth / verduurzaming.
   ============================================================ */

:root {
  /* ---- Brand blue scale (the "D") ---------------------------- */
  --dv-blue-50:  #eef0fb;
  --dv-blue-100: #dde1f6;
  --dv-blue-200: #b9c2ed;
  --dv-blue-300: #8e9be0;
  --dv-blue-400: #5d6fd0;
  --dv-blue-500: #3a4fc4;   /* bright accent / focus */
  --dv-blue-600: #2a3dae;   /* PRIMARY — matches logo D */
  --dv-blue-700: #232f87;   /* deep, headings on light */
  --dv-blue-800: #1b2566;
  --dv-blue-900: #141b49;   /* near-ink brand navy */

  /* ---- Brand green scale (the "V") --------------------------- */
  --dv-green-50:  #f4f9e7;
  --dv-green-100: #e7f3c9;
  --dv-green-200: #d2e89a;
  --dv-green-300: #b8db64;
  --dv-green-400: #9ecb38;
  --dv-green-500: #82b312;   /* ACCENT — matches logo V */
  --dv-green-600: #6c9a0d;
  --dv-green-700: #54770c;
  --dv-green-800: #415c0e;
  --dv-green-900: #324710;

  /* ---- Cool slate neutrals ----------------------------------- */
  --dv-ink-900: #0f1623;   /* primary heading / near-black */
  --dv-ink-800: #1c2433;
  --dv-ink-700: #2d3645;   /* strong body */
  --dv-ink-600: #424d5e;
  --dv-ink-500: #5d697b;   /* secondary text */
  --dv-ink-400: #8b95a4;   /* muted / captions */
  --dv-ink-300: #b6bdc8;   /* disabled text, icons */
  --dv-line-2:  #d3d9e1;   /* strong border */
  --dv-line:    #e4e8ee;   /* hairline border */
  --dv-mist:    #f1f4f8;   /* muted surface */
  --dv-cloud:   #f7f9fb;   /* faint surface */
  --dv-white:   #ffffff;

  /* ---- Semantic / status ------------------------------------- */
  --dv-success: #2e9e5b;
  --dv-success-bg: #e7f6ee;
  --dv-warning: #d98a16;
  --dv-warning-bg: #fcf2e0;
  --dv-danger:  #d2453a;
  --dv-danger-bg: #fbe9e7;
  --dv-info:    var(--dv-blue-600);
  --dv-info-bg: var(--dv-blue-50);

  /* ---- Energy-label palette (Positief Wonen / energy advice) -- */
  --dv-energy-a: #2e9e5b;   /* A / A+ green */
  --dv-energy-b: #6c9a0d;
  --dv-energy-c: #9ecb38;
  --dv-energy-d: #f2c40f;
  --dv-energy-e: #f29f1c;
  --dv-energy-f: #e8742a;
  --dv-energy-g: #d2453a;   /* G red */

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */
  --color-primary:        var(--dv-blue-600);
  --color-primary-hover:  var(--dv-blue-700);
  --color-primary-press:  var(--dv-blue-800);
  --color-primary-soft:   var(--dv-blue-50);
  --color-on-primary:     var(--dv-white);

  --color-accent:         var(--dv-green-500);
  --color-accent-hover:   var(--dv-green-600);
  --color-accent-soft:    var(--dv-green-50);
  --color-on-accent:      var(--dv-ink-900);

  --text-strong:   var(--dv-ink-900);
  --text-body:     var(--dv-ink-700);
  --text-muted:    var(--dv-ink-500);
  --text-faint:    var(--dv-ink-400);
  --text-on-dark:  #e9edf4;
  --text-on-dark-muted: #a9b2c4;

  --surface-page:   var(--dv-white);
  --surface-muted:  var(--dv-mist);
  --surface-faint:  var(--dv-cloud);
  --surface-card:   var(--dv-white);
  --surface-navy:   var(--dv-blue-900);   /* dark band / footer */
  --surface-navy-2: var(--dv-blue-800);

  --border-subtle: var(--dv-line);
  --border-strong: var(--dv-line-2);
  --border-focus:  var(--dv-blue-500);

  --focus-ring: 0 0 0 3px var(--dv-blue-200);
}
/* ============================================================
   DV SERVICE — TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* ---- Families ---------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Weights ----------------------------------------------- */
  --fw-regular: 400;  /* @kind other */
  --fw-medium:  500;  /* @kind other */
  --fw-semibold:600;  /* @kind other */
  --fw-bold:    700;  /* @kind other */
  --fw-black:   800;  /* @kind other */ /* big display */

  /* ---- Type scale (1.250 major-third-ish, tuned) ------------- */
  --text-3xs: 0.6875rem; /* 11px — micro caps */
  --text-2xs: 0.75rem;   /* 12px */
  --text-xs:  0.8125rem; /* 13px */
  --text-sm:  0.9375rem; /* 15px */
  --text-base:1rem;      /* 16px body */
  --text-md:  1.125rem;  /* 18px lead */
  --text-lg:  1.375rem;  /* 22px */
  --text-xl:  1.75rem;   /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 2.875rem;  /* 46px */
  --text-4xl: 3.75rem;   /* 60px display */
  --text-5xl: 4.75rem;   /* 76px hero */

  /* ---- Line heights ------------------------------------------ */
  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* ---- Tracking ---------------------------------------------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;   /* letterspaced eyebrows / "SERVICE BV" feel */

  /* ---- Semantic roles ---------------------------------------- */
  --role-display-weight: var(--fw-black);
  --role-heading-weight: var(--fw-bold);
  --role-eyebrow-weight: var(--fw-bold);
}

/* ---- Optional helper classes (handy in cards & kits) -------- */
.dv-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.dv-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.dv-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}
.dv-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.dv-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}
/* ============================================================
   DV SERVICE — SPACING & LAYOUT TOKENS
   4px base grid.
   ============================================================ */

:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Section rhythm */
  --section-y:        var(--space-24);
  --section-y-tight:  var(--space-16);

  /* Container */
  --container-max: 1200px;
  --container-pad: var(--space-6);
  --gutter:        var(--space-8);
}
/* ============================================================
   DV SERVICE — RADIUS, SHADOW & MOTION TOKENS
   Fresh look: medium-soft radii, clean layered shadows, snappy motion.
   ============================================================ */

:root {
  /* ---- Radius ------------------------------------------------ */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;   /* default card / input */
  --radius-lg:  18px;
  --radius-xl:  26px;   /* feature cards / media */
  --radius-pill:999px;

  /* ---- Shadows (cool slate-tinted, never pure black) --------- */
  --shadow-xs: 0 1px 2px rgba(20, 27, 73, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 27, 73, 0.07);
  --shadow-md: 0 8px 22px rgba(20, 27, 73, 0.09);
  --shadow-lg: 0 18px 44px rgba(20, 27, 73, 0.12);
  --shadow-blue: 0 12px 28px rgba(42, 61, 174, 0.22);   /* on primary CTAs */
  --shadow-inset-line: inset 0 0 0 1px var(--dv-line);

  /* ---- Motion ------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-in:       cubic-bezier(0.5, 0, 0.75, 0);  /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}
/* ============================================================
   DV SERVICE — light base layer
   Sensible element defaults + a couple of layout helpers.
   Kept minimal so it never fights a consumer's own reset.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--dv-green-200); color: var(--dv-ink-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* ---- Layout helpers ---------------------------------------- */
.dv-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.dv-section { padding-block: var(--section-y); }
.dv-section--tight { padding-block: var(--section-y-tight); }

/* A faint technical grid — used on dark/feature bands as texture */
.dv-gridlines {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}