/* ============================================================
   Pendo Offerteportaal — gedeeld thema
   Kleuren: navy #14191F · mint #43D4C1 · wit · lichtgrijs
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* brand */
  --navy:      #14191F;
  --navy-900:  #0D1116;
  --navy-800:  #1A2027;
  --navy-700:  #232B34;
  --navy-line: #2C353F;
  --mint:      #43D4C1;
  --mint-600:  #2FBDAB;
  --mint-700:  #239385;
  --mint-soft: #E4F8F4;

  /* paper / neutral */
  --paper:    #FFFFFF;
  --paper-2:  #F6F7F8;
  --paper-3:  #EEF0F2;
  --line:     #E5E8EB;
  --line-2:   #D5DADF;

  /* ink */
  --ink:      #14191F;
  --ink-2:    #3D454E;
  --muted:    #5B6470;
  --muted-2:  #8A929C;

  /* on-dark */
  --on-navy:        #EAF0F2;
  --on-navy-muted:  #8FA0AB;
  --on-navy-faint:  #5E6F7B;

  /* type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-sign:    'Caveat', cursive;

  --radius:    16px;
  --radius-sm: 11px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(20,25,31,.05), 0 1px 1px rgba(20,25,31,.04);
  --shadow-md: 0 8px 24px -8px rgba(20,25,31,.16), 0 2px 6px rgba(20,25,31,.06);
  --shadow-lg: 0 30px 70px -24px rgba(13,17,22,.55);
  --shadow-panel: -1px 0 0 var(--navy-line), -24px 0 60px -30px rgba(13,17,22,.5);
}

/* ---- Mood: Editorial (serif display) ---- */
[data-mood="Editorial"] {
  --font-display: 'Newsreader', Georgia, serif;
}
[data-mood="Editorial"] h1,
[data-mood="Editorial"] h2,
[data-mood="Editorial"] .display { letter-spacing: -0.01em; font-weight: 500; }

/* ---- Mood: Technisch (mono-forward) ---- */
[data-mood="Technisch"] {
  --font-display: 'JetBrains Mono', ui-monospace, monospace;
}
[data-mood="Technisch"] h1,
[data-mood="Technisch"] h2 { letter-spacing: -0.02em; }
[data-mood="Technisch"] .eyebrow { letter-spacing: .22em; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.08;
}

p { margin: 0; }

a { color: inherit; }

button { font-family: var(--font-body); cursor: pointer; }

::selection { background: var(--mint); color: var(--navy); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* scrollbars */
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: content-box; }
.scroll-dark::-webkit-scrollbar { width: 10px; }
.scroll-dark::-webkit-scrollbar-thumb { background: var(--navy-line); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }