/* Huisstijl Tagnick Caribbean — één op één uit de handoff (§ Design Tokens).
   Alles wat de site kleurt of meet staat hier; nergens anders een losse hexwaarde. */

:root {
  /* Anker */
  --tn-blauw:   #4A7A94;   /* CTA-band, header-accenten, logo op wit */
  --tn-donker:  #16272f;   /* footer, donkere kaarten */

  /* Sub-brandkleuren per dienst */
  --tn-cloud:   #2E8BC0;
  --tn-managed: #4F8F6D;
  --tn-network: #0e8c96;
  --tn-odoo:    #BA7517;
  --tn-dev:     #155e82;
  --tn-resid:   #D9643A;   /* tevens de kleur van de actieknoppen */

  /* Tekst */
  --tn-kop:     #201e1d;
  --tn-body:    #4a4744;
  --tn-body2:   #4a5568;
  --tn-sec:     #6b6866;
  --tn-opdonker:#a9bcc6;

  /* Lijnen en vlakken */
  --tn-lijn:    #eceae8;
  --tn-lijn2:   #f0eeec;
  --tn-vlak:    #f7f5f2;
  --tn-hover:   #f2f6f8;

  /* Letters — zelf gehost, zie fonts.css */
  --tn-kopfont: Archivo, system-ui, sans-serif;
  --tn-bodyfont: Mulish, system-ui, sans-serif;
  --tn-monofont: 'JetBrains Mono', ui-monospace, monospace;

  /* Maten */
  --tn-rand: clamp(20px, 5vw, 60px);   /* zijmarge van elke sectie */
  --tn-pill: 999px;
}

/* De site heeft één vaste verschijning: licht, met donkere banden waar het ontwerp
   dat vraagt. Geen automatische donkere variant — dat zou de huisstijl overrulen. */
html { color-scheme: light; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--tn-kop);
  font-family: var(--tn-bodyfont);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tn-blauw); text-decoration: none; }
a:hover { color: var(--tn-donker); }

*:focus-visible { outline: 2px solid var(--tn-blauw); outline-offset: 3px; border-radius: 4px; }

@keyframes tn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--tn-zweef, -8px)); } }
@keyframes tn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Gedeelde bouwstenen */
.tn-sectie { padding: clamp(56px, 7vw, 96px) var(--tn-rand); }
.tn-mono { font-family: var(--tn-monofont); }

.tn-knop {
  display: inline-block; border-radius: var(--tn-pill);
  font-family: var(--tn-kopfont); font-weight: 700; font-size: 14px;
  padding: 13px 26px; border: none; cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}
.tn-knop--actie { background: var(--tn-resid); color: #fff; }
.tn-knop--actie:hover { transform: scale(1.06); color: #fff; }
.tn-knop--donker { background: var(--tn-donker); color: #fff; }
.tn-knop--donker:hover { transform: scale(1.04); color: #fff; }

.tn-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--tn-monofont); font-size: 11px; color: var(--tn-opdonker);
}
.tn-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tn-managed); animation: tn-pulse 2.2s ease-in-out infinite;
}