Vakmensenvoor metaal.

You are building UI for MBI s.r.o. — Dutch uitzendbureau (staffing agency) for the metalworking sector.
Audience: lassers, draaiers, fitters, montage-medewerkers + their employers (metaalbouwers, scheepswerven, machinefabrieken).
Voice: werkvloer-Nederlands. Concrete (loon, locatie, contract). Geen recruiter-mist. Tweede persoon enkelvoud (je) default.

MARK: Bar-Mark — wordmark + 6px verticale accent-bar. Span-lockup voor JSX:
  <span style={{display:"inline-flex",alignItems:"center",gap:size*0.20}}>
    <span style={{width:size*0.075,height:size*0.95,background:"#1E5BA8"}} aria-hidden />
    <span style={{fontFamily:"ui-monospace,monospace",fontSize:size,fontWeight:800,letterSpacing:"-.025em"}}>MBI</span>
  </span>
Pure-SVG fallback for favicon/email — see /brand/mbi-bar-mark.svg.

COLORS: bg=#F2EDE4 (paper-cream, never #fff), text=#0E1116 (steel-900), accent=#1E5BA8 (Industrial Blue — bar, underlines, left-borders, CTA only).
FORBIDDEN: #0066ff (rookie blue), recruiter-purple gradients, large blue backgrounds, border:1px solid (use shadow instead).

FONTS: JetBrains Mono 800 headings (-0.025em tracking) + Inter 400/500 body. Mono only for: wordmark, headings, numerieke accents. Never sans-headings.
BORDERS: box-shadow: rgba(14, 17, 22,0.08) 0px 0px 0px 1px — never CSS border
FOCUS: box-shadow: 0 0 0 3px rgba(30, 91, 168,0.25)
SHADOWS:
  card:  rgba(14, 17, 22,0.06) 0px 1px 3px, rgba(14, 17, 22,0.08) 0px 0px 0px 1px
  float: rgba(14, 17, 22,0.15) 0px 8px 24px, rgba(14, 17, 22,0.08) 0px 0px 0px 1px
  CTA hard offset (craft signature): 3px 3px 0 rgba(30, 91, 168,0.35)

CRAFT RULES (prevents AI-slop):
- Industrial Blue as ACCENT only — bar, underline, left-border, number highlight, CTA. Never large fill.
- Hard offset shadow on primary CTA: box-shadow: 3px 3px 0 rgba(30, 91, 168,0.35)
- Asymmetric grids on overzicht-pages — break uniform columns with col-span-full
- Headline tweede regel: fade naar 18% opacity voor visuele diepte ("Vakmensen / voor metaal.")
- Job listings: titel = functie + locatie + loon + contract. Niet "Spannende kans..."
- Numbers as design elements (counts, ervaring-jaren) in Industrial Blue
- Service tags: border-left: 2px solid #1E5BA8 (geen full border elsewhere)
- Vakkennis-Engels mag (TIG, MIG/MAG, CNC). Recruiter-Engels nooit ("leverage", "opportunity").

COMPONENTS:
- Primary btn: #0E1116 bg, #F2EDE4 text, 8px radius, 10/20px padding, shadow: 3px 3px 0 rgba(14, 17, 22,0.20)
- Industrial Blue CTA: #1E5BA8 bg, white text, shadow: 3px 3px 0 rgba(30, 91, 168,0.35)
- Vacature-card: #E8E3D9 bg, 12px radius, shadow-card, blue-bordered service-tags
- Worker-profiel: avatar (initials of foto) + naam mono + status pills (groen=beschikbaar, blue=cert valid)
- Input: #F2EDE4 bg, shadow-border, 8px radius

:root {
  --koper:       #1E5BA8;  /* Signature — links, underlines, CTA */
  --koper-hover: #14457E;
  --koper-tint:  rgba(30, 91, 168,0.10);
  --ink:         #0E1116;
  --ink-mid:     #2a2a2a;
  --ink-soft:    #5a5a5a;
  --mid-aa:      #5a5a5a;  /* Captions, metadata, eyebrow text — WCAG AAA on paper (6.4:1). Aliased to Ink Soft */
  --mid:         #6B7280;  /* DECORATIVE ONLY — placeholders, divider labels. Fails AA for body text */
  --rule:        #D4D0C5;  /* Decorative dividers, never text */
  --paper-dim:   #E8E3D9;
  --paper:       #F2EDE4;
  --steel-700:   #1F252E;  /* Surface dark — secondary card bg in dark mode */
  --steel-500:   #3A4350;  /* Muted dark — divider in dark, never text */

  --font-display: var(--font-display), ui-monospace, 'JetBrains Mono', monospace;
  --font-body:    var(--font-body), ui-sans-serif, 'Inter', system-ui, sans-serif;
  --font-brand:   var(--font-brand), 'IBM Plex Sans', system-ui, sans-serif;

  --shadow-border: rgba(14, 17, 22,0.08) 0px 0px 0px 1px;
  --shadow-card:   rgba(14, 17, 22,0.06) 0px 1px 3px,
                   rgba(14, 17, 22,0.08) 0px 0px 0px 1px;
  --shadow-float:  rgba(14, 17, 22,0.15) 0px 8px 24px,
                   rgba(14, 17, 22,0.08) 0px 0px 0px 1px;
  --shadow-cta:    3px 3px 0 rgba(30, 91, 168,0.35);
  --focus-ring:    0 0 0 3px rgba(30, 91, 168,0.25);

  /* Motion tokens (added 2026-04-26) */
  --ease-craft:  cubic-bezier(.2,.8,.2,1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}