/* Design tokens – merkkleuren, typografie, ritme en de drie sporen
   Samengevoegd uit de inline CSS van 57 referentiepagina's. */

:root {
  --ink:#211F1D;
  --ink-2:#3A3835;
  --ink-soft:#55524F;
  --ink-faint:#8A8682;
  --orange:#F47E20;
  --orange-deep:#AD5A17;
  --orange-tint:#FDF1E6;
  --orange-soft:#FBE4CE;
  --peach:#FBF1E8;
  --cream:#FBF8F4;
  --cream-2:#F4EEE6;
  --white:#FFFFFF;
  --line:#E8E1D7;
  --line-dk:#33312E;
  --sensing:#00983A;
  --feeling:#82368C;
  --intuition:#E6332A;
  --thinking:#27348B;
  --display:'Baloo 2','Manrope',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --tk-bg: var(--cream);
  --tk-bg-2: var(--cream-2);
  --tk-surface: var(--white);
  --tk-radius: 20px;
  --tk-radius-lg: 24px;
  --tk-rhythm: 92px;
  --tk-accent: var(--orange-deep);
  --tk-accent-soft: var(--orange-tint);
  --tk-line: var(--line);
  --tk-hero-fade: rgba(244,126,32,.11);
  --tk-label: "";
  --ruimte-xs: clamp(28px, 3vw, 40px);
  --ruimte-s: clamp(40px, 5vw, 60px);
  --ruimte-m: clamp(60px, 7vw, 88px);
  --ruimte-l: clamp(80px, 9vw, 112px);
}
body[data-track="personal"] {
  --tk-bg: #FBF6F0;
  --tk-bg-2: #F7EFE6;
  --tk-surface: #FFFFFF;
  --tk-radius: 24px;
  --tk-radius-lg: 30px;
  --tk-rhythm: 100px;
  --tk-accent: var(--orange-deep);
  --tk-accent-soft: var(--orange-tint);
  --tk-line: #ECE2D6;
  --tk-hero-fade: rgba(244,126,32,.14);
}
body[data-track="business"] {
  --tk-bg: #F9F7F3;
  --tk-bg-2: #F1EDE6;
  --tk-surface: #FFFFFF;
  --tk-radius: 14px;
  --tk-radius-lg: 18px;
  --tk-rhythm: 84px;
  --tk-accent: var(--orange-deep);
  --tk-accent-soft: #F6EFE6;
  --tk-line: #E5DFD3;
  --tk-hero-fade: rgba(244,126,32,.07);
}
body[data-track] {
  background:var(--tk-bg);
}
body[data-track] .card {
  border-radius:var(--tk-radius);
  border-color:var(--tk-line);
  background:var(--tk-surface);
}
body[data-track] .sec {
  padding:var(--tk-rhythm) 0;
}
body[data-track] .phero::before {
  background:radial-gradient(circle,var(--tk-hero-fade),transparent 68%);
}
body[data-track] .band-cream {
  background:var(--tk-bg-2);
}
body[data-track] .btn-ghost {
  border-color:var(--tk-line);
}
body[data-track="business"] .card {
  box-shadow:none;
  border-width:1px;
}
body[data-track="business"] .card:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 40px -30px rgba(20,30,50,.4);
}
body[data-track="personal"] .card:hover {
  transform:translateY(-5px);
  box-shadow:0 28px 56px -32px rgba(40,30,20,.28);
}
body[data-track="personal"] [data-nav="business"] {
  display:none;
}
body[data-track="business"] [data-nav="personal"] {
  display:none;
}
body[data-track="personal"] .tk-business, body[data-track="personal"] [data-tk-only="business"] {
  display:none!important;
}
body[data-track="business"] .tk-personal, body[data-track="business"] [data-tk-only="personal"] {
  display:none!important;
}
body[data-track="business"] section.sec {
  padding-top:var(--ruimte-s)!important;
  padding-bottom:var(--ruimte-s)!important;
}
body[data-track="business"] .hh-beeld {
  border-radius:16px;
}